» »

Темное горизонтальное меню REBTAD для ucoz


Темное горизонтальное меню REBTAD для ucoz

И вот хочется вам представить очередное Темное горизонтальное меню REBTAD для ucoz, которое больше подойдет на бизнес порталы, но это мое мнение, здесь вам нужно смотреть, по вашему дизайну, впишется или нет. Немного похоже по стилям на глянец, это когда вы будете наводить курсор на раздел, и появиться эффект вдавливание по краям. Но первая рубрика будет по умолчанию, но можно убрать, просто в коде заменить как все остальные. Или выставить, там где вам нужно. К примеру на ту тему, которая основной идет. Здесь нет под меню, только чистые ссылки, сколько поставите, то и будет.

Установка:

Код:

Код
<ul class="menu1">
<li class="current"><a href="http://yraaa.ru"><b>ГЛАВНАЯ</b></a></li>
<li><a href="http://zornet.ru"><b>ZORNET.RU</b></a></li>
<li><a href="http://zornet.ru"><b>ZORNET.RU</b></a></li>
<li><a href="http://zornet.ru/load"><b>ZORNET.RU</b></a></li>
<li><a href="http://zornet.ru/load"><b>ZORNET.RU</b></a></li>
<li><a href="http://zornet.ru/load"><b>ZORNET.RU</b></a></li>
<li><a href="http://zornet.ru/load"><b>ZORNET.RU</b></a></li>
</ul>


CSS:

Код
.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(http://zornet.ru/CSS-ZORNET/gerav/refad/faren/35136527.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#fff; background:url(http://zornet.ru/CSS-ZORNET/gerav/refad/faren/66441186.gif);}
.menu1 li.current a b {background:url(http://zornet.ru/CSS-ZORNET/gerav/refad/faren/66441186.gif) no-repeat right top;}
.menu1 li a:hover {color:#fff; background:#000 url(http://zornet.ru/CSS-ZORNET/gerav/refad/faren/50195982.gif);}
.menu1 li a:hover b {background:url(http://zornet.ru/CSS-ZORNET/gerav/refad/faren/50195982.gif) no-repeat right top;}
.menu1 li.current a:hover {color:#fff; background:#000 url(http://zornet.ru/CSS-ZORNET/gerav/refad/faren/66441186.gif); cursor:default;}
.menu1 li.current a:hover b {background:url(http://zornet.ru/CSS-ZORNET/gerav/refad/faren/66441186.gif) no-repeat right top;}


Здесь в стилях идут только 3 ссылки, которые повторяются, это означает не будет совершенно грузиться долго а наоборот быстро.

08.04.2015 Просмотров: 358 Комментарий: (0)

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

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

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