О сайте | Карта сайта | Календарь сайта | Содержание
www.shtogrin.com  
Главная  //  Элементы дизайна  //  Навигационное меню  //  Горизонтальное CSS меню

Горизонтальное меню

Большинство сайтов имеют ярко выраженную иерархическую структуру:

  • Раздел 1
    • Подраздел 1.1
    • Подраздел 1.2
    • Подраздел 1.3
  • Раздел 2
    • Подраздел 2.1
  • Раздел 3

Эта структура идеально подходит для нашего горизонтального меню. Благодаря стилям CSS и свойству :hover наше меню оживет. Internet Explorer обрабатывает :hover только для ссылок, поэтому нам понадобится еще маленькая функция на javascript для имитации :hover для других элементов.

CSS:

HTML:

Javascript (для IE):

Загрузка:

example.html  example.css  example.js 

Пример:

Совместимость:

Firefox 1.* 2.*
Internet Explorer 5.* 6.* 7.*
Opera 8.* 9.*

23.02.2007


2006-2019, Roman Shtogrin