Это меню имеет вертикальный вид, очень стильно смотрится на светлых шаблонов uCoz. Само меню очень стильно сделано и работает не хуже остальных. В меню вы сможете указать любые ссылки с текстом, также рядом присутствуют маленькие разноцветные кружки, которые при наведении курсом подсвечиваются слегка. Размер этих кругов 14x14, если вы увлекаетесь PS, то сможете себе наделать намного больше и добавить в это меню.
Отличное решение для светлых дизайнов uCoz, данное меню полностью рабочие и отлично будет смотреть на любом сайте.
Установка:
1. В таблицу стилей CSS:
Код
/************************/
.menu li a {padding:8px 5px;display:block;text-decoration:none;font-size:13px;color:#454545}
.menu li a:hover {color:#408BB7;}
.menu i {display:inline-block;width:11px;height:11px;margin-bottom:0px;margin-right:16px;background:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;}
i.cat1 {border:2px solid #f9b744}
i.cat2 {border:2px solid #f25246}
i.cat3 {border:2px solid #f246a7}
i.cat4 {border:2px solid #a853d4}
i.cat5 {border:2px solid #65c0ac}
i.cat6 {border:2px solid #4859f8}
i.cat7 {border:2px solid #97ce6f}
i.cat8 {border:2px solid #3297db}
i.cat24 {border:2px solid #4859f8}
i.cat_add {border:2px solid #aaafb5}
.menu a:hover .cat1 {border:2px solid #f9b744;background:#f9b744}
.menu a:hover .cat2 {border:2px solid #f25246;background:#f25246}
.menu a:hover .cat3 {border:2px solid #f246a7;background:#f246a7}
.menu a:hover .cat4 {border:2px solid #a853d4;background:#a853d4}
.menu a:hover .cat5 {border:2px solid #65c0ac;background:#65c0ac}
.menu a:hover .cat6 {border:2px solid #4859f8;background:#4859f8}
.menu a:hover .cat7 {border:2px solid #97ce6f;background:#97ce6f}
.menu a:hover .cat8 {border:2px solid #3297db;background:#3297db}
.menu a:hover .cat_add {border:2px solid #aaafb5;background:#aaafb5}
.menu .flright {opacity:0.4;font-weight:bold;}
/*******************************/
2. В глобальный блок:
Код
<div class="menu">
<li><a href="..."><i class="cat1"></i>...</a></li>
<li><a href="..."><i class="cat2"></i>... </a></li>
<li><a href="..."><i class="cat4"></i>...</a></li>
<li><a href="..."><i class="cat5"></i>...</a></li>
<li><a href="..."><i class="cat2"></i>...</a></li>
<li><a href="..."><i class="cat6"></i>...</a></li>
<li><a href="..."><i class="cat7"></i>...</a></li>
<li><a href="..."><i class="cat1"></i>...</a></li>
<li><a href="..."><i class="cat1"></i>...</a></li>
<li><a href="..."><i class="cat4"></i>...</a></li>
<li><a href="..."><i class="cat2"></i>...</a></li>
<li><a href="..."><i class="cat6"></i>...</a></li>
<li><a href="..."><i class="cat5"></i>...</a></li>
</div>
На этом наша установка завершена!
