Для любителей светлых тонов и стильных дизайнов мы нашли, и спешим представить новинку от Ucoz - привлекательное и очень, по хай-тековски, современное выпадающее меню. Написано на чистейшем CSS3, оно такое чистое, что не удивлюсь, если разработчик прежде чем писать трижды помыл руки.
Ну а кроме шуток, очень даже не плохое горизонтально ориентированное меню для сайта. Я вот на пару своих такое поставлю. Так же имеет приятную систему анимации и меню - все просто, стильно и без лишних наворотив. Подойдет для сайтов почти что любой современной деловой тематики. Клиенты обычно ценят простую навигацию и хороший дизайнерский подход к оформлению сайтов. Кто не знал - записывайте, а мы на этом собаку съели. Плагин подразумевает два типа меню - первое, как мы уже говорили, выпадающее. Легко и непринужденно, при наведении мыши выпадают подпункты меню и так же легко сворачивается. Очень чувствительная система к наведению мыши - все без рывков и бросков. А менюшка первого типа - элементы меню плавно прокручиваются и подсвечиваются не яркими цветами. Вообще пробовать и оставлять комментарии.
Установка:
В самый низ вашего 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>
При копирование материалов с сайта необходимо указать активную ссылку источника -
Скрипты для uCoz 2013 и
Горизонтальное выпадающее меню для uCoz
Расскажи друзьям интересные новости:
-
Установить на свой сайт блок социальных закладок
|