Вертикальное меню в 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;}    | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |