Выпадающие меню на HTML и CSS

Рейтинг:

Дата: 8 июня 2009 132477 27

Твитнуть

Каждый, кто решил создать свой сайт, сталкивается с потребностью создания симпатичного меню для своего сайта. В этой статье я расскажу, как при помощи обычного HTML-кода и несложных CSS-правил, можно создать отличное выпадающее меню, которое легко менять и дополнять. И для этого нам не понадобится никакой JavaScript-код!

ДЕМО  ИСХОДНИКИ 

Первым и самым важным этапом, при создании выпадающего меню, является создание его структуры. Лучше всего это делать, используя ненумерованные списки. Давайте создадим вот такое простое меню:

<div id="nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Статьи</a>
   <ul>
   <li><a  href="#">HTML</a></li>
   <li><a  href="#">CSS</a></li>
   <li><a  href="#">PHP</a></li>
   <li><a  href="#">MySQL</a></li>
   </ul>
</li>
<li><a href="#">Книги</a>
   <ul>
   <li><a  href="#">Раскрутка и продвижение</a> </li>
   <li><a  href="#">Е-Бизнес</a></li>
   <li><a  href="#">Web-Дизайн</a></li>
   <li><a  href="#">Платежные системы</a></li>
   </ul>
</li>
<li><a href="#">О нас</a> </li>
</ul>   
</div>

Довольно простой и не сложный  получился html-код. Выглядеть этот список будет так.

На следующем этапе мы приведем наше меню к более красивому виду. Это легко можно сделать благодаря использованию CSS.
Первым делом уберем меркеры в ненумерованном списке, отступы, а также зададим ширину нашего меню.

#nav ul {
      margin: 0px;
      padding: 0px;
      list-style:none;
      width:200px;
}

Теперь нам необходимо задать положение элементов списка. Так как наше меню будет вертикальное, это облегчает нашу работу. Однако, нам необходимо задать значение для свойства "position", как "relative". Это необходимо для того, чтобы относительно основного меню абсолютно позиционировать подменю.  Также зададим нижнее подчеркивание для пунктов меню.

#nav  ul li {
  position: relative;
  border-bottom:1px solid #ccc;
}

Теперь необходимо подкорректировать наше подменю. Так как мы хотим, чтобы наше меню появлялась справа от основного меню в тот момент, когда над этим пунктом находится курсор, то нам необходимо вложенному списку, свойству "position" задать значение "absolute". Также нам необходимо задать его положение. Это делается следующим образом

#nav li ul {
  position: absolute;
  left: 200px;
  top: 0;
  display: none;
}

Используя атрибуты  left и  top мы задаем абсолютное позиционирование нашего подменю относительно родительского пункта меню.  Также я присвоил атрибуту "display" значение "none", так как мы не хотим видеть подменю при открытии страницы.

Итак, теперь наше меню выглядит так.

Теперь придадим вид нашим ссылкам. В первую очередь для того, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка, присвоим атрибуту "display" значение "block". Также уберем нижнее подчеркивание и зададим цвет фона и цвет текста ссылок.

#nav ul li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff;
  padding: 5px;
} 

Далее нам необходимо сделать так, чтобы при наведении на пункты меню, у нас справа появлялось подменю.
Делается это следующим образом

#nav  li:hover ul { display: block; }

Вот теперь наше меню уже работает и выглядит так.

Осталось придать ему более привлекательный вид.

Для начала давайте сделаем так, чтобы при наведении на пункты нашего меню изменялся фон и цвет текста. Для этого добавим следующий код

#nav li:hover  a {
  color:#FFFFFF;
  background:  url(img/fone-tr.png);
} 

Здесь я в качестве фона использую вот эту картинку, но Вы можете использовать и заливку любым другим цветом (например: background-color:#0000ff;).

А теперь сделаем так, чтобы при наведении на пункт  подменю, он также изменял цвет своего фона. Для этого используем следующий код:

#nav  li:hover ul a:hover {
  background-color:#cccccc;
  background-image:none;
  color:#FFFFFF;
}

Ну вот и все! Наше выпадающее меню на html и CSS готово. Можете  посмотреть, что у нас получилось здесь.

На этом казалось бы можно было закончить, но нет. К сожалению ранние версии Internet Explorer понимают псевдокласс :hover лишь для тега <a> - так что li:hover, на который у нас завязано появление подменю и изменение цвета фона, ему ни о чём не говорит.

Для  того чтобы устранить эту проблему, добавим небольшой JavaScript-код:

А теперь сделаем так, чтобы при наведении на пункт  подменю, он также изменял цвет своего фона. Для этого используем следующий код:

<script  type="text/javascript">
jsHover = function() {

    var hEls =  document.getElementById("nav").getElementsByTagName("LI");

    for (var i=0, len=hEls.length; i<len;  i++) {

        hEls[i].onmouseover=function() {  this.className+=" jshover"; }
        hEls[i].onmouseout=function() {  this.className=this.className.replace(" jshover", ""); }
    }
}

if (window.attachEvent &&  navigator.userAgent.indexOf("Opera")==-1)  window.attachEvent("onload", jsHover);
</script>

Это позволяет "прицепить" класс jshover к любому элементу <li>, над которым проходит курсор. Эта функция работает только в Internet Explorer — для других браузеров она просто не нужна.

Теперь, чтобы меню заработало в IE, добавим к трем уже существующим правилам по дополнительному селектору li.jshover:

ДЕМО  ИСХОДНИКИ 

Удачи!

• Комментарии (27)
• Сайт
• Facebook

Представьтесь:

Ваш e-mail:

Адрес сайта
(если есть):

Сообщение:

 

Введите цифры:

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?