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

Вертикальное меню в 3 вариациях для uCoz

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

Код
<div id=»publ_menu»>  
  <li><a title=»Главная» href=»/»>Главная</a></li>  
  <noindex><li><a target=»_blank» title=»мы вконтакте» href=»https://vk.com/mr.toper»>Vk.com</a></li> </noindex>  
  <li><a title=»Форум» href=»/forum»>Форум</a></li>  
  <li><a title=»Видео» href=»/blog/»>Мувики</a></li>  
  <li><a title=»Статьи» href=»/publ/»>Статьи</a></li>  
  <li><a title=»Новости» href=»/news/»>Новости</a></li>  
  <li><a title=»Обзор Игр» href=»/board» >Обзор Игр</a></li>  
  <li><a title=»Топ сайтов» href=»/dir» >Топ сайтов</a></li>  
  <li><a title=»Гостевая» href=»/gb» >Гостевая книга</a></li>  
  <li><a title=»Файловый архив» href=»/load» >Каталог файлов</a></li>  
</div>

CSS:

Код
#publ_menu width:196px; margin:0 auto;  
#publ_menu li display:block; height:23px; line-height:23px; margin-bottom:3px;  
#publ_menu li a text-decoration: none;font-family: tahoma;  
font-size: 11px;font-weight:bold;display:block; background:url(http://zornet.ru/SKRIPT/ZR/frank/submit_zr-3.png) no-repeat 0 0; height:23px; color:#fff; padding:0 10px;  
#publ_menu li a:hover background-position:0 -25px; text-decoration:none; color:#fff; text-shadow:1px 1px 0px #013607; padding:0 5px;

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

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