» »

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


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

Вот по своей цветовой гамме яркое вертикальное меню которое подойдет на темный и светлый фон. По умолчанию оно идет в синей гамме, но пришлось покрасить и в зеленый, так как всякое бывает и разные шаблоны по своим стилям. Эта навигация больше подойдет на ресурс, где каркас фиксирован. Просто трудно представить его на широкополосным, так как сами категорий, где вы прописываете материал, его нужно настраивать под свой блок, который у вас на сайте. За это у нас отвечает в скрипте width:270px; почти в начале.



Код
<div class="b_menu">  
<ul>  
<li><a href="http://zornet.ru/">Главная</a></li>  
<li><a href="http://zornet.ru/forum">Форум</a></li>  
<li><a href="http://zornet.ru/news">Файлы</a></li>  
<li><a href="http://zornet.ru/load">Статьи</a></li>  
<li><a href="/">Блоггер</a></li>  
<li><a href="/forum">Гостевая</a></li>  
<li><a href="/news">Топ сайтов</a></li>  
<li><a href="/load">Админ на связи</a></li>  
</ul>  
</div>


CSS:

Код
.b_menu {width:270px; margin:0 auto;}  
.b_menu ul li {display:block; height:20px; line-height:20px; padding:0 0 3px 0;}  
.b_menu ul li a {display:block; background:url(http://zornet.ru/CSS-ZORNET/Grety/b_menu.png) no-repeat 0 -20px; height:20px; color:#fff; padding:0 0 0 20px;}  
.b_menu ul li a:hover {background-position:0 0; text-decoration:none;}






Код
<div class="b_menu">  
<ul>  
<li><a href="http://zornet.ru/">Главная</a></li>  
<li><a href="http://zornet.ru/forum">Форум</a></li>  
<li><a href="http://zornet.ru/news">Файлы</a></li>  
<li><a href="http://zornet.ru/load">Статьи</a></li>  
<li><a href="http://zornet.ru/">Блоггер</a></li>  
<li><a href="http://zornet.ru/forum">Гостевая</a></li>  
<li><a href="http://zornet.ru/news">Топ сайтов</a></li>  
<li><a href="http://zornet.ru/load">Админ на связи</a></li>  
</ul>  
</div>


CSS:

Код
.b_menu {width:270px; margin:0 auto;}  
.b_menu ul li {display:block; height:20px; line-height:20px; padding:0 0 3px 0;}  
.b_menu ul li a {display:block; background:url(http://zornet.ru/CSS-ZORNET/Grety/b_menu_1125.png) no-repeat 0 -20px; height:20px; color:#fff; padding:0 0 0 20px;}  
.b_menu ul li a:hover {background-position:0 0; text-decoration:none;}


24.04.2015 Просмотров: 468 Комментарий: (0)

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

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

Комментарий: 0
avatar