» »

Кнопочное в глянце горизонтальное меню 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.06.2015 Просмотров: 434 Комментарий: (0)

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

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

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