Создание горизонтального меню с использованием только CSS3

20 марта 2015 | Опубликовано в css | 1 Комментарий »

Для создания меню лучше всего использовать ссылки, находящиеся в элементах списка HTML, а менять внешний вид меню — с помощью стилей этих элементов. С точки зрения поисковой оптимизации выпадающее меню на чистом CSS очень удобно, потому что оно отменяет необходимость в использовании Javascript для браузера. В CSS есть много функций, которые можно использовать, чтобы создать отличные меню. В этом уроке мы рассмотрим строгое на вид меню и научимся создать выпадение подпунктов меню при наведении указателя мыши на элемент списка.

Для этого урока Вам нужно только знание основ HTML и CSS.

Подготовка кода HTML для меню

Сначала нужно создать код HTML для меню, в нем должны находиться основные категории веб-сайта, а также, если нужно, подпункты.

Ниже расположен пример типичной структуры HTML для меню:

<ul id=nav>
     <li><a href="">Home</a></li>
     <li><a href="">About</a></li>
     <li><a href="">Portfolio</a>
     <ul>
          <li><a href="">Website 1</a></li>
          <li><a href="">Website 2</a></li>
          <li><a href="">Website 3</a></li>
          <li><a href="">Website 4</a></li>
          <li><a href="">Website 5</a></li>
     </ul>
     </li>
     <li><a href="">Services</a>
     <ul>
          <li><a href="">Website Design</a>
          <ul>
               <li><a href="">HTML</a></li>
               <li><a href="">CSS</a></li>
          </ul>
          </li>
          <li><a href="">Website Development</a>
          <ul>
               <li><a href="">PHP</a></li>
               <li><a href="">.Net</a></li>
               <li><a href="">JavaScript</a></li>
               <li><a href="">jQuery</a></li>
          </ul>
          </li>
          <li><a href="">SEO</a></li>
          <li><a href="">Advertising</a></li>
          <li><a href="">Marketing</a></li>
     </ul>
     </li>
     <li><a href="">Contact</a></li>
</ul>

В этом меню есть 5 основных пунктов: Home (Главная), About (О нас), Portfolio (Примеры работ), Services (Услуги) и Contact (Контакты). У пункта «Примеры работ» есть подпункты, это сделано с помощью списка, который вложен в список:

<li><a href="">Portfolio</a>
     <ul>
          <li><a href="">Website 1</a></li>
          <li><a href="">Website 2</a></li>
          <li><a href="">Website 3</a></li>
          <li><a href="">Website 4</a></li>
          <li><a href="">Website 5</a></li>
     </ul>
</li>

У пункта «Услуги» есть подподпункт, это сделано с помощью списка, который вложен в список, который в свою очередь вложен в список:

<li><a href="">Services</a>
     <ul>
          <li><a href="">Website Design</a>
          <ul>
               <li><a href="">HTML</a></li>
               <li><a href="">CSS</a></li>
          </ul>
          </li>
          <li><a href="">Website Development</a>
          <ul>
               <li><a href="">PHP</a></li>
               <li><a href="">.Net</a></li>
               <li><a href="">JavaScript</a></li>
               <li><a href="">jQuery</a></li>
          </ul>
          </li>
          <li><a href="">SEO</a></li>
          <li><a href="">Advertising</a></li>
          <li><a href="">Marketing</a></li>
     </ul>
</li>

Задаем стили полосе меню

Теперь, когда готов код HTML для списка, можно начинать добавлять код CSS, чтобы список превратился в меню.

Для начала зададим стили основному списку, удалив стили маркеров списка и добавив цвет фона и высоту списку:

ul {
     padding:0;
     margin:0;
     list-style: none;
     background:#000;
     height:36px;
}

После этого зададим стили для элементов списка и добавим всплывание влево, чтобы список стал горизонтальным:

ul li {
     float:left;
     position:relative;
}

Так как элементы списка — это ссылки, зададим им стили, используя селектор ссылок, отключим подчеркивание и изменим цвет ссылок:

a:link, a:visited {
     text-decoration: none;
     color: #FFF;
     font-weight:bold;
}

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

ul li a, ul li a:visited {
     display:block;
     color:#fff;
     width:104px;
     height:auto;
     line-height:20px;
     padding:10px;
     text-align:center;
}

Затем нужно задать стили ссылкам дли момента, когда пользователь наводит указатель мыши, поменяв местами цвет текста и фона с помощью расположенных ниже стилей:

ul li a:hover {
     display:block;
     color:#000;
     background:#FFF;
     line-height:20px;
     padding:10px;
}

После завершения работы над основным списком нам нужно применить стили для подпунктов и подподпунктов, а также показывать их, когда пользователь наводит указатель мыши на пункт, так что снова воспользуемся псевдоклассом :hover.

Начнем со скрытия вложенных списков первого и второго уровней:

ul li ul, ul li:hover ul li ul {
     display: none;
}

Теперь можно использовать псевдокласс :hover, чтобы показать подпункты, когда пользователь наводит указатель мыши на элемент списка, со следующими стилями:

ul li:hover ul {
     display:block;
     position:absolute;
     top:36px;
     left:0;
     height:auto;
}

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

Далее применим стили к элементам списка, чтобы отделить их линией:

ul li:hover ul li a {
     display:block;
     text-align:left;
     border-bottom:1px solid #FFF;
}

И, наконец, покажем подподпункты, когда пользователь наводит указатель мыши на элемент вложенного списка первого уровня, применив такие стили:

ul li:hover ul li:hover ul {
     display:block;
     position:absolute;
     left:124px;
     top:0;
}

Посмотрите окончательный результат в демонстрации работы меню на чистом CSS.

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

Опубликовано в css, марта 20, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Создание горизонтального меню с использованием только CSS3

Подготовка кода HTML для меню

Задаем стили полосе меню

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые