Красивая навигация в web стиле с иконками для ucoz

3500 просмотров Alan_Writer 24.03.2014

Демо ▶️

Красивая навигация в web стиле с иконками для ucoz. Красивая навигация для сайта с иконками, выполненная очень качественно и аккуратно.В данном меню слева расположена к каждому пункту меню своя тематическая иконка. В обычном режиме меню светлое, а при наведении курсором становится ярко зеленым. Данная навигация непо впишется в светлый дизайн.

Установка меню

В блок где хотите видеть меню:
Код
<nav class="bnav">
<ul>
<li><a href="/"><span class="ico ico_01"></span>Главная</a></li>
<li><a href="/"><span class="ico ico_02"></span>Фильмы</a></li>
<li><a href="/"><span class="ico ico_03"></span>Сериалы</a></li>
<li><a href="/"><span class="ico ico_04"></span>ТВ передачи</a></li>
<li><a href="/"><span class="ico ico_05"></span>Мультфильмы</a></li>
<li><a href="/"><span class="ico ico_06"></span>Музыка торрент</a></li>
<li><a href="/"><span class="ico ico_07"></span>Игры торрент</a></li>
<li><a href="/"><span class="ico ico_08"></span>Шаблоны для uCoz</a></li>
<li><a href="/"><span class="ico ico_09"></span>Журналы торрент</a></li>
<li><a href="/"><span class="ico ico_10"></span>Спорт торрент</a></li>
<li><a href="/"><span class="ico ico_11"></span>Обои торрент</a></li>
</ul>
</nav>

В CSS:
Код
.bnav {width:215px;}
.bnav ul {display:block; padding:0; margin:0; list-style:none; background:0;}
.bnav li {margin:3px 0 0 0;}  
.bnav li:first-child {margin:0;}  
.bnav li a {height:30px; padding:0 0 0 36px; display:block; position:relative; overflow:hidden; font:12px/30px Calibri; color:#4e6378; text-shadow:0 1px 1px #f5f8fa; text-decoration:none; background:url(http://fullweb.ucoz.ru/_bl/3/45779636.png) no-repeat -698px 0;}  
.bnav li a:hover {color:#fff; text-shadow:0 1px 1px #329500; background-position:-698px -32px;}  
.bnav li a .ico {width:24px; height:24px; display:block; position:absolute; left:6px; top:3px; background-image:url(http://fullweb.ucoz.ru/_bl/3/60924725.png); background-repeat:no-repeat;}  
.bnav li a .ico_01 {background-position:center 3px;}  
.bnav li a .ico_02 {background-position:center -28px;}  
.bnav li a .ico_03 {background-position:center -60px;}  
.bnav li a .ico_04 {background-position:center -94px;}  
.bnav li a .ico_05 {background-position:center -128px;}  
.bnav li a .ico_06 {background-position:center -160px;}  
.bnav li a .ico_07 {background-position:center -194px;}  
.bnav li a .ico_08 {background-position:center -228px;}  
.bnav li a .ico_09 {background-position:center -260px;}  
.bnav li a .ico_10 {background-position:center -293px;}  
.bnav li a .ico_11 {background-position:center -228px;}

Примечания:
  • Картинки из CSS лучше сохранить себе, чтоб они потом никуда не пропали.
  • Это меню взято из шаблона Torrentiki для uCoz, возможно вас заинтересует и он.

Вот и все ваше меню для uCoz готово.

Теги: Красивая навигация, навигация с иконками ucoz, в web стиле с иконками, вертикальное меню с иконками, для uCoz
8 Комментариев
avatar
4
А где взять иконки для этого меню?
В шаблоне, из которого выдернули это меню, так же нет иконок!
Помогите, автор! sad
avatar
5
Обновил стили, теперь там рабочие картинки, сохрани их себе.
avatar
6
Спасибо!
Я так полагаю ,картинки нужно порезать...или просто добавить в папку images и все?
avatar
7
Не надо ничего резать, просто те две картинки из стилей залей себе на сайт, и уже у себя в стилях замени ссылки на свои.
avatar
8
Я все сделал, но почему-то ничего не работает.
Вот мой сайт http://sunpack.ucoz.net/
avatar
1
Как заставить это меню выдвигаться?
avatar
2
А где тут написано что это выдвижное меню?
avatar
3
А есть код какой нибудь? Просто хочу это меню сделать выдвижным)
Можете с этого шаблона http://fullweb.ucoz.ru/blog/2013-12-17-309 вытащить выдвижное меню?