Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Горизонтальное выпадающее меню для сайта на CSS
Горизонтальное выпадающее меню для сайта на CSS
workman
Дата: Четверг, 25.09.2014, 19:59 | Сообщение # 1
Vip
Сообщений:1576
Награды: 7


По своему очень оригинальное горизонтальное меню для сайта ucoz. Выполнено в темно синих тонах, что можно говорить оно подойдет к многим дизайн сайта.
Установка очень проста.

Это пихаем в самый низ CSS файла сайта
Код
.cf:before,
.cf:after {
   content: " ";
   display: table;
}
.cf:after {
   clear: both;
}
.cf {
   *zoom: 1;
}

.menu,
.submenu {
   margin: 0;
   padding: 0;
   list-style: none;
}

.menu {
   margin: 50px auto;
   width: 800px;
   width: -moz-fit-content;
   width: -webkit-fit-content;
   width: fit-content;
   }
   .menu > li {
   background: #34495e;
   float: left;
   position: relative;
   -webkit-transform: skewX(25deg);
   }
   .menu a {
   display: block;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   font-family: Arial, Helvetica;
   font-size: 14px;
   }
   .menu li:hover {
   background: #e74c3c;
   }
   .menu > li > a {
   -webkit-transform: skewX(-25deg);
   padding: 1em 2em;
   }
   /* Dropdown */
   .submenu {
   position: absolute;
   width: 200px;
   left: 50%; margin-left: -100px;
   -webkit-transform: skewX(-25deg);
   -webkit-transform-origin: left top;
   }
   .submenu li {
   background-color: #34495e;
   position: relative;
   overflow: hidden;
   }
   .submenu > li > a {
   padding: 1em 2em;
   }
   .submenu > li::after {
   content: '';
   position: absolute;
   top: -125%;
   height: 100%;
   width: 100%;
   box-shadow: 0 0 50px rgba(0, 0, 0, .9);
   }
   /* Odd stuff */
   .submenu > li:nth-child(odd){
   -webkit-transform: skewX(-25deg) translateX(0);
   }
   .submenu > li:nth-child(odd) > a {
   -webkit-transform: skewX(25deg);
   }
   .submenu > li:nth-child(odd)::after {
   right: -50%;
   -webkit-transform: skewX(-25deg) rotate(3deg);
   }
   /* Even stuff */
   .submenu > li:nth-child(even){
   -webkit-transform: skewX(25deg) translateX(0);
   }
   .submenu > li:nth-child(even) > a {
   -webkit-transform: skewX(-25deg);
   }
   .submenu > li:nth-child(even)::after {
   left: -50%;
   -webkit-transform: skewX(25deg) rotate(3deg);
   }
   /* Show dropdown */
   .submenu,
   .submenu li {
   opacity: 0;
   visibility: hidden;
   }
   .submenu li {
   transition: .2s ease -webkit-transform;
   }
   .menu > li:hover .submenu,
   .menu > li:hover .submenu li {
   opacity: 1;
   visibility: visible;
   }
   .menu > li:hover .submenu li:nth-child(even){
   -webkit-transform: skewX(25deg) translateX(15px);
   }
   .menu > li:hover .submenu li:nth-child(odd){
   -webkit-transform: skewX(-25deg) translateX(-15px);
   }


Это ставим по месту
Код
<ul class="menu cf">
   <li><a href="#">Главная</a></li>
   <li>
   <a href="#">Уроки</a>
   <ul class="submenu">
   <li><a href="#">Веб-дизайн</a></li>
   <li><a href="#">Разработка</a></li>
   <li><a href="#">Исходники</a></li>
   <li><a href="#">Интересно</a></li>
   </ul>
   </li>
   <li><a href="#">Контакты</a></li>
   <li><a href="#">Советы</a></li>
   <li><a href="#">О нас</a></li>
   </ul>


Смотреть ДЕМО

Прикрепления: 8463691.png(304Kb)


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
kredit-oformi
Дата: Четверг, 25.09.2014, 20:13 | Сообщение # 2
Vip
Сообщений:1953
Награды: 5


workman, оригинальное меню нигде такого не встречал smile
Slavik
Дата: Четверг, 25.09.2014, 20:25 | Сообщение # 3
Проверенные
Сообщений:1439
Награды: 1


Цитата kredit-oformi ()
workman, оригинальное меню нигде такого не встречал

Тоже самое)). Круть smile


MIR-HACK.RU - Добро пожаловать в мир читов!
workman
Дата: Четверг, 25.09.2014, 21:45 | Сообщение # 4
Vip
Сообщений:1576
Награды: 7


ВЫ СПРАШИВАЙТЕ... Я ЕЩЕ И НЕ ТАКОЕ НА ЧУЖУ... biggrin biggrin biggrin

Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
workman
Дата: Четверг, 25.09.2014, 21:48 | Сообщение # 5
Vip
Сообщений:1576
Награды: 7


kredit-oformi, Slavik, СПАСИБО ЗА РЕПУЮ...

Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Kosten
Дата: Четверг, 25.09.2014, 21:50 | Сообщение # 6
Администраторы
Сообщений:12696
Награды: 39


Прикольное выпадение.. реально оригинально.. также в первые наблюдаю.. думаю workman, сам навигацию эту замутил wink

workman
Дата: Четверг, 25.09.2014, 22:06 | Сообщение # 7
Vip
Сообщений:1576
Награды: 7


Kosten, НЕА... НЕ САМ... ПРОСИЛ СОСЕДА.. biggrin biggrin biggrin

Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Kosten
Дата: Пятница, 26.09.2014, 00:19 | Сообщение # 8
Администраторы
Сообщений:12696
Награды: 39


workman, скажем что поверил smile

Slavik
Дата: Пятница, 26.09.2014, 01:50 | Сообщение # 9
Проверенные
Сообщений:1439
Награды: 1


workman, biggrin biggrin biggrin

MIR-HACK.RU - Добро пожаловать в мир читов!
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Горизонтальное выпадающее меню для сайта на CSS
Страница 1 из 11
Поиск: