» »

Выпадающее темное горизонтальное меню CSS

Выпадающее темное горизонтальное меню CSS

В красивой стилистике выпадающее горизонтальное меню на чистом css, что в нем можно разместим много запросов, но и дизайн оригинален. По сути простая навигация, которая может подойти на светлый формат сайта или на темный. Но безусловно нужно заметить, как все сделано, это появление элементов при наведении на категорию, также выпадающие под меню.

Где все создано понятно для пользователя, но если говорить на какую тематику, здесь больше на блог подойдет или если на ресурсе есть такой модуль, то отдельно вывести, также не удивлюсь, что на главной будет установлено. Гл здесь нет углов и под шапкой не очень смотреться будет, что все редактируется в CSS, включая палитру цвета.

Это проверка на тестовой площадке, где ниже будет демонстраций предоставлена, чтоб в реале посмотреть.

Горизонтальная навигация сайта

HTML

Код
<div id="zornusan_numag">
  <ul>
  <li class="active"><a href="http://zornet.ru"><span>ZORNET.RU</span></a></li>
  <li class="arunimedun"><a href="http://zornet.ru"><span>Скрипты для сайта</span></a>
  <ul>
  <li><a href="http://zornet.ru"><span>Скрипты для uCoz</span></a></li>
  <li><a href="http://zornet.ru"><span>Шаблоны для uCoz</span></a></li>
  <li><a href="http://zornet.ru"><span>Продукт 3</span></a></li>
  <li class="last"><a href="#"><span>Продукт 4</span></a></li>
  </ul>
  </li>
  <li><a href="#"><span>О компании</span></a></li>
  <li class="last"><a href="#"><span>Контакты</span></a></li>
  </ul>
  </div>

CSS

Код
/* Контейнер меню */  
#zornusan_numag{ height:37px;  
  padding:0;  
  margin: 0 auto;  
  border:1px solid;  
  border-radius:5px;
  width:90%;}
   
/* Удаляем маркеры, выводим в виде строки, задаем относительное позиционирование */  
#zornusan_numag > ul {list-style:inside none;  
  padding:0;  
  margin:0;}  
#zornusan_numag > ul > li {list-style:inside none;  
  padding:0;  
  margin:0;  
  float:left;  
  display:block;  
  position:relative;}
   
/* Текст ссылок */  
#zornusan_numag > ul > li > a{ outline:none;  
  display:block;  
  position:relative;  
  padding:12px 20px;  
  font:bold 13px/100% Arial, Helvetica, sans-serif;  
  text-align:center;  
  text-decoration:none;  
  text-shadow:1px 1px 0 rgba(0,0,0, 0.4);}
   
/* Стиль первого элемента списка */  
#zornusan_numag > ul > li:first-child > a{border-radius:5px 0 0 5px;}

/* Разделители */  
#zornusan_numag > ul > li > a:after{ content:'';  
  position:absolute;  
  border-right:1px solid;
  border-color:#747882;  
  top:-1px;  
  bottom:-1px;  
  right:-2px;  
  z-index:99;}  
#zornusan_numag ul li.arunimedun:hover > a:after{top:0; bottom:0;}

/* Маркер выпадающего списка */  
#zornusan_numag > ul > li.arunimedun > a:before{ content:'';  
  position:absolute;  
  top:17px;  
  right:6px;  
  border:5px solid transparent;  
  border-top:5px solid #fff; }
   
/* Маркер выпадающего списка при наведении */  
#zornusan_numag > ul > li.arunimedun:hover > a:before{top:23px;}

/* Цвет пункта меню выпадающего списка при наведении*/  
#zornusan_numag ul li.arunimedun:hover > a{ background:#51707C;  
  border-color:#51707C;  
  padding-bottom:13px;  
  padding-top:13px;  
  top:-1px;  
  z-index:999; }
#zornusan_numag ul li.arunimedun > a:hover{background:#51707C;}  
#zornusan_numag ul li.arunimedun:hover > ul, #zornusan_numag ul li.arunimedun:hover > div{display:block;  
  border-color:#51707C;}
   
/* Выпадающий список */  
#zornusan_numag ul li > ul, #zornusan_numag ul li > div{ display:none;  
  width:auto;  
  position:absolute;  
  top:38px;  
  padding:10px 0;  
  background:#51707C;  
  border-radius:0 0 5px 5px;  
  z-index:999;}  
#zornusan_numag ul li > ul{width:200px;}  
#zornusan_numag ul li > ul li{display:block;  
  list-style:inside none;  
  padding:0;  
  margin:0;  
  position:relative;}
   
/* Текст ссылок выпадающего списка */
#zornusan_numag ul li > ul li a{ outline:none;  
  display:block;  
  position:relative;  
  margin:0;  
  padding:8px 20px;  
  font:10pt Arial, Helvetica, sans-serif;  
  color:#fff;  
  text-decoration:none;  
  text-shadow:1px 1px 0 rgba(0,0,0, 0.5);}  

/* Основной стиль меню и пунктов меню выпадающего списка при наведении */
#zornusan_numag, #zornusan_numag > ul > li > ul > li a:hover {
  background: #69a0b5f5;
  background: -moz-linear-gradient(top, #73A9BE 0%, #222222 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#609cb3e8), color-stop(100%,#222222));
  background: -webkit-linear-gradient(top, #6f9cadeb 0%,#191818eb 100%);
  background: -o-linear-gradient(top, #73A9BE 0%,#222222 100%);
  background: -ms-linear-gradient(top, #73A9BE 0%,#222222 100%);
  background: linear-gradient(top, #73A9BE 0%,#222222 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73A9BE', endColorstr='#222222',GradientType=0 );
}  
#zornusan_numag{border-color:#000;}  
#zornusan_numag > ul > li > a{border-right:1px solid #000; color:#fff;}  
#zornusan_numag > ul > li > a:after{border-color:#444;}
/* Основной стиль меню при наведении */  
#zornusan_numag > ul > li > a:hover{background:#51707C;}

При создание меню здесь было использовано css и html и не чего файловый менеджер не нужно закачивать.

Демонстрация:
2017-12-19 Просмотров: 816 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar