Если вы решили сменить у себя на ресурсе навигацию и поменять тем дизайн, то Верительное меню сайта SFARGAZ для uCoz отлично впишется по своим стилям, так как создано оно очень просто и конструктивно. Можете его установить как на светлый фон, он и был создан под такой оттенок цвета, так и на темный, что можете посмотреть в демонстраций и смотрится не хуже чем на оригинале. Есть у него безусловно эффект нажатие, но в нашем случай это наведение на его клик на любую категорию. С левой стороны располагается светлая стрелка на указание той или иной рубрике, на которую и будут переходить пользователи.
Каркас:
Код <div class="text"> <ul class="menu">
<li><a href="http://zornet.ru/">Главная</a></li> <li><a href="http://zornet.ru/">Шаблоны</a></li> <li><a href="http://zornet.ru/">Шаблоны CS</a></li> <li><a href="http://zornet.ru/">Скрипты сайта</a></li> <li><a href="http://zornet.ru/">PHP Скрипты uCoz</a></li> <li><a href="http://zornet.ru/">ZORNET.RU</a></li> <li><a href="http://zornet.ru/">Полезные статьи</a></li> <li><a href="http://zornet.ru/">Графика для uCoz</a></li> </ul> </div>
CSS:
Код ul.menu { margin: 0px; padding: 0px; list-style: none; }
ul.menu li { height: 27px; line-height: 27px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; margin: 4px 0; background: url(http://zornet.ru/CSS-ZORNET/Grety/zreg/ZR/menu.png); }
ul.menu li:hover { background: url(http://zornet.ru/CSS-ZORNET/Grety/zreg/ZR/menu-hover.png); }
ul.menu li a { display: block; height: 27px; line-height: 27px; color: white; background: url(http://zornet.ru/CSS-ZORNET/Grety/zreg/ZR/menu-li.png) 5px center no-repeat; text-decoration: none; padding: 0 10px 0 23px; }
Можете посмотреть DEMO, где будет на всю ширину, так как не вставлено в сам блок ресурса, при установке оно встанет по центру как нужно.
|