Вот по своей цветовой гамме яркое вертикальное меню которое подойдет на темный и светлый фон. По умолчанию оно идет в синей гамме, но пришлось покрасить и в зеленый, так как всякое бывает и разные шаблоны по своим стилям. Эта навигация больше подойдет на ресурс, где каркас фиксирован. Просто трудно представить его на широкополосным, так как сами категорий, где вы прописываете материал, его нужно настраивать под свой блок, который у вас на сайте. За это у нас отвечает в скрипте 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;}
|