В статье рассмотрен пример создания меню средствами HTML и CSS.

HTML часть меню

Для создания выпадающего меню воспользуемся многоуровневыми списками <ul> <li>.

<ul id="nav">
  <li><a href="#">Languages</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="return false;">Browsers</a>
    <ul>
      <li><a href="#">Chrome</a></li>
      <li><a href="#">Opera</a></li>
      <li><a href="#">IE</a></li>
      <li><a href="#">Firefox</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="return false;">Others</a></li>
</ul>

Рис 1. Многоуровневый список, первый шаг к созданию вложенного меню.

CSS часть меню

Итак, в нашем распоряжении есть многоуровневый список, для его преобразования в выпадающее меню необходимо применить некоторые CSS свойства. Разделю их на две основные части. Первая включает в себя свойства, после применения которых уже можно разглядеть работоспособное выпадающее меню (т.е. пункты главного меню расположены в ряд, при наведении на них курсора мыши отображается выпадающее меню), назову эту часть движком. Вторая часть CSS – это оформление меню.

Движок выпадающего меню

Убираем все отступы, а также маркеры обозначающие список:

#nav,#nav li ul{
  margin:0px;
  padding:0px;
  list-style:none;
}

Рис 2. Из списка удалены отступы и маркеры.

Расположим главные пункты меню (Languages, Browsers, Others) по левому краю в одну строку с фиксированной шириной.

#nav > li{
  float:left;
  width:120px;
}

Рис 3. Выравнивание основных пунктов меню по левому краю.

Применим для подменю следующие CSS свойства: position:absolute – абсолютное позиционирование элемента, совместно с этим свойством необходимо использовать z-index чтобы расположить блок подменю поверх остальных элементов. Обязательно нужно указать ширину блока, ну и конечно скрыть его.

#nav li ul{
  display:none;
  position:absolute;
  z-index:100;
  width:120px;
}

При наведении курсора мыши на основной пункт главного меню, отобразим подменю.

#nav li:hover ul{display:block}

Рис. 4. Отображение подменю при наведении курсора на один из пунктов главного меню.

Оформление выпадающего меню

Оформление главного меню

#nav > li{
  background-color:#F5F5F5;
  text-align:center;
  padding:10px 0px 10px 0px;
  border-top:1px solid #E8E8E8;
  border-right:1px solid #E8E8E8;
}

#nav > li:hover{background-color:#E8E8E8;}

#nav > li > a{
  font:14px "Geargia";
  color:#000000;
  text-decoration:none;
  text-transform:uppercase;
}

Оформление выпадающего меню

#nav li ul{
  margin-top:10px;
  background-color:#ffffff;
  border:1px solid #E8E8E8;
}

#nav li ul li{
  text-align:left;
  padding:5px 5px 5px 15px;
}

#nav li ul li a{
  font:14px "Geargia";
  color:#000000;
  text-decoration:none;
}
 
#nav li ul li a:hover{
  font:14px "Geargia";
  color:#553CCF;
  text-decoration:none;
}

Добавлено: 21 Февраля 2015 20:24:18 Добавил: Андрей Ковальчук Нравится 0

Добавить