» »

Простое горизонтальное меню CSS для сайта

Простое горизонтальное меню CSS для сайта

Представляю простое и также красиво сделанное горизонтальное меню, где идет поиск и производиться стильный эффект при наведении на раздел. Оно идет в темной гамме цвета, где как при клике на категорий или что вы пропишете.И также включает в этот эффект и поиск, что будет преображаться в другой цвет. Если говорить про функций поиск по сайту, то здесь при клике на правую кнопку появиться эффект.

Тематического смысла оно не несет и если говорить о функциональности, это как на сайте zornet.ru идет подчеркивание, только на этом будет происходить внизу описание. Если говорить о выпадающих пунктах или под категорий, то здесь их нет. Тут больше несет информационное направление, но и безусловно дизайн, что можно поставить в кино проекты или софт порталы и многие другие.

Так реально будет смотреться после установки:

Темное горизонтальное меню для uCoz

Вверх сайта в самый низ под шапку или вверх основном код прописывают.

Код
<div class="top-menu2">  
<nav id="top-menu1">  
<ul id="top-nav">  
<li><a href="/">Главная zornet.ru</a></li>  
<li><a href="/forum/">Форум сайта</a></li>  
<li><a href="load/">Файлы скачать</a></li>  
<li><a href="/publ/">Статьи по тематике</a></li>  
<li><a href="http://zornet.ru/load/0-0-0-0-1">Добавить материал</a></li>  
<li><a title="Обратная связь" href="/index/0-3">Обратная связь</a></li>  
</ul>  
<form id="searchform" onsubmit="this.sfSbm.disabled=true" method="get" action="/search/">  
  <input type="text" name="q" value="Поиск.." onblur="if(this.value=='')this.value='Поиск..'" onfocus="if(this.value=='Поиск..')this.value=''"/>  
  <input type="hidden" name="sfSbm"/>  
</form>  
</nav>  
</div>


CSS:

Код
/******Горизонтальное меню******/  
.top-menu2 {background: #3b3b3b;}  
#top-menu1 {  
height: 57px;  
max-width: 1150px;  
margin: 0px auto;  
}  

#top-nav li {  
float: left;  
position: relative;  
z-index: 999;  
list-style: none;  
}  

#top-nav {  
float: left;  
border-left: 1px solid #2f2f2f;  
-webkit-margin-before: 0;  
-webkit-margin-after: 0;  
-webkit-padding-start: 0;  
}  

#top-nav li a {  
  display: block;  
  color: #f5f5f5;  
  border-right: 1px solid #2f2f2f;  
  line-height: 57px;  
  padding: 0 24px;  
  transition: box-shadow 0.4s, color 0.4s;  
  position: relative;  
}  

#top-nav li a:hover {  
  box-shadow: inset 0 -4px 0 #7babf7;  
  color: #80aef5;  
}  

#searchform {  
  float: right;  
  margin-top: 7px;  
}  

#searchform input[type=text] {  
  display: block;  
  background: url(http://zornet.ru/Aben/ABGEA/Rin/retunga/search-icon.png) no-repeat 11px;  
  padding-left: 32px;  
  border: 1px solid #575656;  
  height: 39px;  
  border-radius: 3px;  
  width: 147px;  
  padding: 0 11px 0 43px;  
  color: #999;  
  font-size: 12px;  
  transition: border 0.4s;  
}  

#searchform input[type=text]:focus {  
  border: 1px solid #b9d4ff;  
}

Здесь нужно подчеркнуть, что эта навигация не адаптивна под мобильные аппараты.
05.09.2017 Просмотров: 301 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 05.09.2017 22:011
0
Спасибо за доработку этого горизонтального меню, пользователю ДимДимыч.
avatar