ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Кнопочное в глянце горизонтальное меню uCoz

Кнопочное в глянце горизонтальное меню uCoz

Кнопочное в глянце горизонтальное меню uCoz
Если ваш дизайн позволяет поставить сразу несколько оттенок цвета как Кнопочное в глянце горизонтальное меню uCoz, то здесь вам нужно присмотреться к материалу. Сразу хочется сказать, только для светлого фона они созданы, так как на таком фоне они установлены и другая гамма совершенно не подойдет. Это можно посмотреть на демонстраций, а так они все разные и что главное сами по себе яркие и эффект имеют. При наведение на любую из них, будет появляться красная кнопка. Если кого не устраивает, то нужно перекрашивать или просто добавить свой оригинальный оттенок, который бы обозначал категорию по вашему ресурсу.

Этот код ставим, где хотите их видеть, также можете прибавить или убавить.

Код
<div class="top-menu"><a href="http://zornet.ru/" class="top-menu-1">ГЛАВНАЯ</a><a href="http://imobile.ucoz.com/load/20" class="top-menu-6">ZORNET.RU</a><a href="http://zornet.ru/forum/" class="top-menu-3">ZORNET.RU</a><a href="/dir/" class="top-menu-2">Сайты</a><a href="/photo/" class="top-menu-4">ZORNET.RU</a><a href="/publ/" class="top-menu-5">СТАТЬИ</a><a href="/stuff/" class="top-menu-7">Темы</a></div>


CSS:

Код
::selection { background: #8AF35C; color:#000}  
::-moz-selection { background: #f6b36a; color:#000}
body, td {font-family:Tahoma; font-size:11px; color:#6596b5;}
.top-line {background: url(http://zornet.ru/CSS-ZORNET/ND/ZRET/line.jpg) center bottom no-repeat; height: 14px}
.top-menu {padding: 5 25 0;height: 50px;}
div.top-menu a {hover,link,active,visited:text-decoration:none; color:#fff;}
.top-menu a { display: block; float: left; width: 124px; height: 50px; color: #fff; text-decoration: none; line-height: 36px; text-align: center; margin-right: 4px; font-size:10pt}
.top-menu a:hover { background: url('http://zornet.ru/CSS-ZORNET/ND/ZRET/1.jpg') center -50px no-repeat; }
.top-menu-1 { background: url('http://zornet.ru/CSS-ZORNET/ND/ZRET/1.jpg') center top no-repeat; }
.top-menu-2 { background: url('http://zornet.ru/CSS-ZORNET/ND/ZRET/2.jpg') left top no-repeat; }
.top-menu-3 { background: url('http://zornet.ru/CSS-ZORNET/ND/ZRET/3.jpg') left top no-repeat; }
.top-menu-4 { background: url('http://zornet.ru/CSS-ZORNET/ND/ZRET/4.jpg') left top no-repeat; }
.top-menu-5 { background: url('http://zornet.ru/CSS-ZORNET/ND/ZRET/5.jpg') left top no-repeat; }
.top-menu-6 { background: url('http://zornet.ru/CSS-ZORNET/ND/ZRET/6.jpg') left top no-repeat; }
.top-menu-7 { background: url('http://imobile.ucoz.com/images/mu/7.jpg') left top no-repeat; }


09 Июня 2015 Просмотров: 1152 Комментариев: (0)

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

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

Оставь свой отзыв

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