» »

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


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

По своему дизайну, просто классика стиля проявляются в Темное горизонтальное меню AVESR для ucoz где с уверенностью сказать можно, оно подойдет под любую тему интернет сайта. Но все таки с ним идут CSS и что можно будет заметить при установке. Это темный или можно сказать черный фон основной, но когда делаете клик, то вы увидите, что по всем сторонам идет светлый шлейф. Поставить его на такую же гамму, то отлично будет смотреться и прогиб очень будет оригинален при нажатие.

Это основа, ставим там где нужно, основном вверх сайта и в самый его низ прописываем.

Код
<div id="menu">  
<ul>  
<li><a href="#"><span>Главная</span></a></li>  
<li><a href="#"><span>Скрипты</span></a></li>  
<li><a href="#"><span>Шаблоны</span></a></li>  
<li><a href="#"><span>Карта сайта</span></a></li>  
<li><a href="#"><span>Контакты</span></a></li>  
<a href="http://zornet.ru/" style="display: none;"></a>  
</ul>  
</div>


CSS:

Код
#menu {width:100%; margin:0; padding:0;}  
#menu ul {list-style:none;}  
#menu li {list-style:none; display:block; float:left;}  

#menu li a {  
  font-family:sans-serif;  
  display:block;  
  float:left;  
  height:50px;  
  color:#F4F4F4;  
  font-size:18px;  
  font-weight:bold;  
  background:url(http://zornet.ru/CSS-ZORNET/gerav/menu_left6.png) no-repeat left;  
  line-height:49px;  
  padding:0 0 0 20px;  
  text-decoration:none;}  

#menu li a span {  
  display:block;  
  float:left;  
  background:url(http://zornet.ru/CSS-ZORNET/gerav/menu_right6.png) no-repeat right;  
  height:50px;  
  color:#F4F4F4;  
  line-height:49px;  
  padding:0 20px 0 0;}  

#menu li a:hover {  
  display:block;  
  float:left;  
  background:url(http://zornet.ru/CSS-ZORNET/gerav/menu_left_h6.png) no-repeat left;  
  height:50px;}  

#menu li a:hover span {  
  display:block;  
  float:left;  
  background:url(http://zornet.ru/CSS-ZORNET/gerav/menu_right_h6.png) no-repeat right;  
  color:#fff;  
  height:50px;}


Это вид, когда вы нажимаете на раздел:



Можете посмотреть, реальный вид DEMO
02.04.2015 Просмотров: 367 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 02.04.2015 23:321
0
Здесь вы можете добавлять свои категорий по вашему дизайну, точнее по ширине его.
avatar