Горизонтальное выпадающее меню для сайта на CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Горизонтальное выпадающее меню для сайта на CSS

workman

Четверг, 25 Сентября 2014, 19:59 | Сообщение 1

Проверенные

Сообщений:1716

Награды: 9

« 155 »

По своему очень оригинальное горизонтальное меню для сайта 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>

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