Создание сайтов с нуля - урок 39 - Горизонтальное выпадающее меню

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

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

Единственное, что необходимо сделать – это преобразовать вертикальный список в горизонтальный.

Один из способов это сделать - задать элементам списка одтекание (float:left;). Второй вариант – задать им строчный тип (display: inline-block;). Тогда они автоматически расположатся в одну строку.

При первом варианте необходимо дополнительно удалить маркеры у списка, при втором - варианте – не забудьте удалить отступы между пунктами меню (для родителя – font-size: 0; а для вложенных ссылок – переопределить размер шрифта).

Горизонтальное меню с выпадающим подменю

В этом типе меню также все аналогично предыдущим примерам.

Разметка стандартная — двухуровневый список.

<ul>

   <li><a href=”#”>Меню 1</a></li>

   <li><a href=”#”>Меню 2</a>

            <ul>

               <li><a href=”#”>Меню 1</a></li>

               <li><a href=”#”>Меню 2</a></li>

               <li><a href=”#”>Меню 3</a></li>

               <li><a href=”#”>Меню 4</a></li>

               <li><a href=”#”>Меню 5</a></li>

            </ul>

   </li>

   <li><a href=”#”>Меню 3</a></li>

   <li><a href=”#”>Меню 4</a></li>

   <li><a href=”#”>Меню 5</a></li>

</ul>

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