Красиво хоризонтално меню с CSS

В този урок ще ви покажа как да направите красиво меню с падащо подменю.

В повечето случаи този ефект може да се постигне с помощта на CSS. Но тъй като IE6 е много лош браузър, ще трябва да използваме малко jQuery, за да бъдем напълно удобни за различни браузъри.

красиво

HTML

Подменютата на всеки елемент трябва да бъдат поставени заедно между таговете.

CSS

меню

В дадено меню всички подменюта няма да се показват директно под елементите на менюто. Всички подменюта ще се показват еднакво вляво.

jQuery - специфичен за IE6

Тъй като IE6 не разбира li:hover, ще трябва да използваме jQuery.

Заключение

Хубаво и просто. Надявам се, че ще намерите това меню за полезно.

P.S. Тук ще намерите демо версия на това меню, но с една малка разлика - подменютата се отварят само когато щракнете върху елемента от менюто. Изпълнението на този пример може да се види в изходния код на страницата.

Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: www.sohtanaka.com Превод: Максим Шкурупий Урокът е създаден: 18 август 2009 г. Преглеждания: 83114 Правила за препечатване

5 последни урока от рубриката "За сайта"

Блокиране на разкриващи ефекти

Днес бихме искали да споделим няколко идеи за ефект на разкриване на кутия, които можете да използвате за вашите проекти.

Ако искате значително да повишите нивото на сигурност на вашия WordPress сайт, тогава не можете да избегнете конфигурацията на файла .htaccess. Това не само ще ви предпази от редица хакерски атаки, но и ще организира пренасочвания, както и ще реши проблеми, свързани с кеша.

20 безплатни WordPress теми за материален дизайн

Материалният дизайн е нарастваща тенденция от Google. Тази колекция съдържа безплатни WordPress теми, направени в този популярен стил.

20 Creative MouseOver уебсайта

Ефектите са там, за да впечатлят нашите посетители. Тази колекция съдържа няколко десетки ресурса, чиито създатели са се постарали много да впечатлят своите посетители.

В края на месеца ви предлагаме да се запознаете с набор от безплатни материали за уеб дизайнери за изминалия месец.