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

Вертикальное меню Freskat для сайта uCoz

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

Код
<ul class=»bnav»>  
<li><a href=»/» title=»Главная страница»>Главная</a> </li>  
  <li><a href=»/load» title=»Каталог файлов»>Файлы</a> </li>  
<li><a href=»/» title=»Главная страница»>Статья</a> </li>  
  <li><a href=»/load» title=»Каталог файлов»>Блоггер</a> </li>  
  <li><a href=»/» title=»»>ZORNET.Ru</a> </li>  
  <li><a href=»/load» title=»Каталог файлов»>Файловый архив</a> </li>  
  <li><a href=»http://zornet.ru/» title=»Лучший сайт»>Администрация на связи</a> </li>  
  </ul>

Потом для него стили пропишем в CSS.

Код
.bnav width:185px; margin:0px; padding:0px; list-style:none; font-family: Tahoma;border-top:1px solid #484747;border-bottom:1px solid #484747;  
  .bnav li height:20px; display:block; background:url(http://zornet.ru/CSS-ZORNET/Grety/hover-csomsk1.png) no-repeat 0 0;text-indent:10px;font-size:11px;  
  .bnav li:hover background-position:0 -21px;  
  .bnav li:hover a:link,  
  .bnav li:hover a:active,  
  .bnav li:hover a:visited color:#dedede;text-shadow:0 0 3px #313131;padding-top:3;  
  .bnav li:first-child border:0;  
  .bnav li a:link,  
  .bnav li a:active,  
  .bnav li a:visited height:22px; display:block; color:#b5b5b5;padding-top:3;  
  .bnav li a:hover text-decoration:none; text-shadow:0 0 3px #313131;

На этом все и остается только посмотреть в реале как оно играет цветами.

Источник: http://diz-cs.ru/

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

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