Привет. Дано меню-в простом состоянии просто ссылки без картинок.
При наведении должно становиться оформление как для текущей страницы.
Само оформление меню для текущей (current) сделано. Использовался растягивающийся фон шириной в пиксель и добавление скруглений через псевдоклассы :before и :after.
Вот пример:
| Код |
<ul class="menu-top">
<li class="menu current"><a>Главная</a></li>
<li class="menu"><a>Тарифы</a></li>
<li class="menu"><a>Личный кабинет</a></li>
<li class="menu"><a>Инструкции</a></li>
<li class="menu"><a>О сервисе</a></li>
</ul>
|
| Код |
.menu{display:inline-block;margin-left:7px;margin-right:7px;}
.menu:hover,.current{
background:url(img/menu_bg.png) repeat-x;
padding:0px 0 0 0;
color:#FFF;
}
.current:before{
content:url(img/menu_bl.png);
background: #FFF;
display:inline-block;
margin:0px 7px 0 0;
}
.current:after{
content:url(img/menu_br.png);
background: #FFF;
display:inline-block;
margin:0px 0 0 7px;
}
|
Как можно или возможно ли реализовать без подмены класса через onMouseOver-ы ? |
