Выпадающие меню для сайта с помощью CSS3 | RUDEBOXМеню на сайте является неотъемлемой его частью. В данном уроке мы рассмотрим как создать простое выпадающее меню для сайта реализовано без помощи сторонних скриптов, навигация будет реализована исключительно с помощью css3. Меню выполнено в темном стиле, а выпадающие подпункты в светлом, кроме этого у нас будет полоска по верх всего меню, что придаст меню особой элегантности. Кроме этого будет добавлено несколько теней, которые будут выделять меню, и создавать небольшую иллюзию объемности.

 

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

Основным преимуществом данной навигации является кроссбраузерность, что весьма необходима в конкуренции браузеров. И так, приступим.

Шаг 1. HTML

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

Выпадающие меню для сайта с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Нам необходимо определить позиционирование, некоторые общие параметры. параметр .decor будет отвечать за верхнюю полосу. Также определяем заливку для меню и подменю.

Стили достаточно простые, вы можете их легко изменить.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.