Главная » Файлы » Прочие скрипты » CSS |
Красивое современное горизонтальное выпадающее меню на чистом CSS3 для uCoz
24.06.14, 18:55:09 | |
Неплохое горизонтальное меню для вашего сайта, реализованное на чистом css. Неплохая приятная анимация и светлые тона - всё это достаточно здорово сочетается и менюшка в целом очень хорошо смотрится Для начала посмотрите ДЕМО Моё тестирование в фидле: ДЕМО Установка: В самый низ вашего css вставляйте: Код .ph-lift1 ul, .ph-lift1 li { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; list-style: none; } .ph-lift1 { min-width: 800px; } .ph-lift1 ul { position: relative; } .ph-lift1 > ul:after { content:""; position: absolute; width: 50%; border-radius: 40%; height: 40px; bottom: 0; left: 20%; box-shadow: 0 0 10px rgba(28, 110, 126, 0.5); z-index: -1; } .ph-lift1 > ul:hover:after { bottom: 5px; } nav.ph-lift1 { text-align: center; } nav.ph-lift1 ul { display: inline-block; } nav.ph-lift1 ul:after { box-shadow: 0 0 10px rgba(85, 107, 47, 0.5); } nav.ph-lift1 > ul > li { float: left; } nav.ph-lift1 ul li { height: 80px; line-height: 80px; background: white; -webkit-transition: all.6s ease; -moz-transition: all.6s ease; -o-transition: all.6s ease; -ms-transition: all.6s ease; transition: all.6s ease; } nav.ph-lift1 ul li ul { max-height: 0; -webkit-transition: all.6s ease; -moz-transition: all.6s ease; overflow: hidden; display: block; } nav.ph-lift1 ul li:hover { box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset; background: darkolivegreen; } nav.ph-lift1 ul li:hover ul { max-height: 300px; } nav.ph-lift1 ul li a { display: block; overflow: hidden; text-decoration: none; color: #546a2f; height: 80px; } nav.ph-lift1 ul li ul li a { color: #7e7e00; } nav.ph-lift1 ul li ul li:hover { background: olive; } nav.ph-lift1 ul li a span { -webkit-transition: all.6s ease; -moz-transition: all.6s ease; -o-transition: all.6s ease; -ms-transition: all.6s ease; transition: all.6s ease; display: block; padding: 0 40px; } nav.ph-lift1 ul li:hover > a span { margin-top: -80px; color: white; text-shadow: 0 1px 2px black; } nav.ph-lift1 ul li a span:after { content: attr(data-title); display: block; } Следующий код в то место, где будет само меню: Код <nav class="ph-lift1"> <ul> <li class="active"> <a href="#home" data-title="Главная"> <span data-title="Главная">Главная</span> </a> <ul> <li> <a href="#"> <span data-title="Новости">Новости</span> </a> </li> <li> <a href="#"> <span data-title="Top 10">Top 10</span> </a> </li> </ul> </li> <li> <a href="#portfolio"> <span data-title="Портфолио">Портфолио</span> </a> <ul> <li> <a href="#"> <span data-title="Веб-дизайн">Веб-дизайн</span> </a> </li> <li> <a href="#"> <span data-title="Макеты">Макеты</span> </a> </li> <li> <a href="#"> <span data-title="Фоны">Фоны</span> </a> </li> </ul> </li> <li> <a href="#"> <span data-title="Обо мне">Обо мне</span> </a> </li> <li> <a href="#"> <span data-title="Контакты">Контакты</span> </a> <ul> <li> <a href="#"> <span data-title="Email">Email</span> </a> </li> <li> <a href="#about"> <span data-title="Адрес">Адрес</span> </a> </li> </ul> </li> <ul> </nav> За основу взята ЭТА статья Материал подготовлен Apocalypse | |
Просмотров: 489 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |