Скрипт горизонтального меню как на Google для ucoz
Установка:
1) Вставить код в нужное место ну я взял верхнюю часть сайта
Код
<div class="gmenu">
<ul>
<li><a href="/" class="active">Главная</a></li>
<li><a href="/search">Поиск</a></li>
<li><a href="/load">Каталог файлов</a></li>
<li><a href="/blog">Блог</a></li>
<li><a href="/forum">Форум</a></li>
</ul>
</div>
<ul>
<li><a href="/" class="active">Главная</a></li>
<li><a href="/search">Поиск</a></li>
<li><a href="/load">Каталог файлов</a></li>
<li><a href="/blog">Блог</a></li>
<li><a href="/forum">Форум</a></li>
</ul>
</div>
2) Этот код вставляем в таблицу CSS
Код
.gmenu ul {
border:0;
border-bottom:1px solid #000000;
background:#2D2D2D;
font-weight:normal;
font-size:10pt;
font-family:Arial;
height:30px;
line-height:30px;
margin:0;
padding:0;
padding-left:4px;
overflow:hidden;
}
.gmenu li {
list-style-type:none;
float:left;
}
.gmenu a {
padding:6px;
padding-bottom:7px;
color:#CCCCCC;
text-decoration:none;
}
.gmenu a:hover {
padding:6px;
color:#FFFFFF;
padding-top:7px;
padding-bottom:8px;
text-decoration:none;
background:#4C4C4C
}
.gmenu a.active {
border-top:2px solid #DD4B39;
padding:6px;
padding-top:5px;
padding-bottom:7px;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
.gmenu a.active:hover {
border-top:2px solid #DD4B39;
padding:6px;
padding-top:5px;
padding-bottom:7px;
color:#FFFFFF;
border-top:3px solid #DD4B39;
text-decoration:none;
background:#4C4C4C
}
Что бы менять полоску где вы ее хотите видеть просто добавьте class="active"
Жалоба