Гарне меню з підменю, що випадає на CSS

Цей урок розповість Вам, як за допомогою CSS зробити гарне меню з випадаючим текстом.

Цей матеріал є продовженням цього. Додавши трохи коду ми надамо даному меню додаткову функціональність, а саме можливість показувати елементи, що випадають, підменю.

Почнемо з модифікованоїHTML розмітки:

Тут є невелика відмінність від минулого меню. По-перше, у нас з'явилися підменю під елементами Metal, Plastic та Services. Їх ми оформляємо окремим невпорядкованим списком. По-друге, у меню з'явилися спеціальні теги, які працюють лише в Internet Explorer 6. Ці теги допомагають правильно відображати це меню саме в даному браузері.

Що стосується CSS , то код тут досить об'ємний і я не бачу сенсу повністю його викладати тут. Я помістив його в окремий файл і підключив до основного документа так:

Після цього у Вас вийде класне меню з підменю, що випадає. Не забувайте, що тут використано всього 1 зображення.

Користуйтесь! Всього доброго!

Даний урок підготовлений для вас командою сайту.

5 останніх уроків рубрики "CSS"

Смішні ефекти для літер

Невеликий ефект з інтерактивною анімацією букв.

Реалізація кумедних підказок

Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.

Анімовані літери

Експеримент: анімовані букви SVG на базі бібліотеки anime.js.

Сонцезахисні окуляри відпершої особи

Прикольний експеримент веб-сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.

Навігація, що розкривається

Експериментальний скрипт навігації, що розкривається.

---