Випадаюче меню

Як зробити меню ви вже знаєте. Сьогодні ж на прикладі горизонтального меню я розповім, як можна зробити меню, що випадає або список.

Пам'ятайте ми з вами говорили, що меню робить за допомогою ненумерованого списку. Так ось, створення меню, що випадає робиться також за допомогою списку, тільки він буде у нас вкладеним. Додамо його до нашого прикладу:

Випадаюче меню
Як бачите з прикладу ми вклали ще один список в один з пунктів горизонтального меню. Але якщо я залишу все в такому вигляді, то список з самого початку буде видно, а нам цього зовсім не треба. Для цього пропишемо в стилях таку строчку:

Тепер ми зробили наш список невидимим, а тепер давайте його зробимо дивись при наведенні на пункт горизонтального меню, в якому він вкладений:

А тепер пропишемо властивості для нашого списку:

В результаті у мене вийшло ось таке меню: меню з списком, що випадає. Можна додати невелику затримку появи списку і пунктів меню і остаточний вигляд вийшов таким. Сподіваюся Вам, дорогі читачі, було все зрозуміло що я намагався викласти вище. Звичайно можна було зробити наше меню набагато краще, використавши анімацію і тому подібні речі, але це я пропоную зробити вам самостійно.

Всі права на сайт належать Олександру Побединський.

Випадаюче меню
Випадаюче меню
Випадаюче меню

Схожі статті