вРазные полезности

Стильное вертикальное меню для uCoz

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

Так будет смотреться на простом сайте.

Переходим к установке:

Устанавливаем в контейнер, но как уже сказано, не в блок, как делают обычно.

Код
<div id=»w_menu_block»>  
  <div id=»w_menu_top»><b>Меню сайта</b>  
  <div>  
  <span style=»background: #355C88;»></span>  
  <span style=»background: #355C88;»></span>  
  <span style=»background: #355C88;»></span>  
  </div>  
  </div>  
  <ul>  
  <li><a href=»#»><i></i>Скрипты для uCoz</a></li>  
  <li><a href=»#»><i></i>Шаблоны для uCoz</a></li>  
  <li><a href=»#»><i></i>Заработок на uCoz</a></li>  
  <li><a href=»#»><i class=»activ_ss»></i>Авторство</a></li>  
  <li><a href=»#»><i></i>Блог сайта</a></li>  
  <li><a href=»#»><i></i>Новости сайта</a></li>  
  <li style=»border-bottom: 1px solid #C3C8CB;margin-bottom:10px;padding-bottom:10px;»><a href=»#»><i></i><b>Форум сайта</b></a></li>  
  <li><a href=»#»><i></i>Предоставляемые услуги</a></li>  
  <li><a href=»#»><i></i>Предложить материал</a></li>  
  </ul>  
  </div>

CSS:

Код
#w_menu_block   

    

  #w_menu_block ul   
  list-style: none;  
  padding: 0px;  
  margin: 3px 0 0;  
    

  #w_menu_block ul li   
   
    

  #w_menu_block ul li a   
  display: block;  
  padding: 0 10px;  
  color: #797D7F;  
  font:13px Tahoma,Arial,sans-serif;  
  text-decoration: none;  
  line-height: 30px;  
    
  #w_menu_block ul li a:hover   
  background: #FFF;  
  border-radius: 5px;  
    
  #w_menu_block ul li a:hover i   
  border: 7px solid transparent; border-left: 9px solid #0074B8;  
    

  #w_menu_block ul li i   
  float: left;  
  border: 7px solid transparent; border-left: 9px solid #797D7F;  
  margin-top: 9px;  
    
  #w_menu_block ul li i.activ_ss   
  border: 7px solid transparent; border-left: 9px solid #0074B8;  
    

  #w_menu_block ul li span  
  float: right;  
    

  #w_menu_top   
  padding: 0 10px;  
  font:17px Tahoma,Arial,sans-serif;  
  color: #0D608A;  
  line-height: 35px;  
    
  #w_menu_top div   
  float: right;  
  margin-top: 13px;  
    
  #w_menu_top span   
  background: #000;  
  float: left;  
  margin-right: 3px;  
  margin-top: center;  
  display: block;  
  width: 12px;  
  height: 12px;  
  border-radius: 50%;  
  

На этом установка закончена, все сохраняем.
Автор: waaka
Источник: http://boba.ucoz.com/

источник: zornet.ru

Похожие посты