Если вам нравится SbUP Форум, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....

 

Помогите разобраться с меню для сайта!

Автор irbis0108, 12-03-2014, 14:36:39

« назад - далее »

irbis0108Topic starter

Всем привет и спасибо за помощь!

Решил заморочиться и попробовать создать верхнее меню для сайта. Вроде все легко, но один момент не получается: Как сделать что бы что бы ссылка меняла цвет при наведении, как на нее саму так и на контейнер "li" в котором она находится в данном случае?

При наведении у меня стоит картинка, она появляется когда наводишь на "li", a ссылка цвет не меняет! И если кто-то знает как сделать,что бы при переходе на страницу (какую-либо) активная ссылка оставалась активной(цветом и фоном)?

Код меню
[spoiler]<div id="menu">
            <ul id="nav">
               <li><a href="index.php">Главная</a></li>
               <li><a href="articles.php">Статьи</a></li>
               <li><a href="lessons.php">Уроки</a></li>
               <li><a href="contacts.php">О нас</a></li>
            </ul>
        </div> [/spoiler]

Css Код
[spoiler]
#menu {
    outline: 1px solid red;
    width: 1024px;
    height: 32px;
    margin: 10px 0 ;
    background-color: #BFC3C2;
    position: relative;
    background-image: url(../img/menu.png);
}
#nav{
    position: absolute;
    top: 0;
    left: 37px;
    width: 640px;
    height: 30px;
    outline: 1px solid #333;
   
}

#nav li{
    float: left;
    outline: 1px solid red;
    padding: 5px 35px;
    margin:0 10px 0 15px ;
}

#nav li a{
    text-decoration: none;
    font:bold 16px Verdana;
    color: #ffffff;
}

#nav li:hover{
    color: #000000;
    background-image: url(../img/menu_act.png);
    background-repeat: no-repeat;
    background-position: center;
   
}
#nav li a:hover{
    color: #000000;
    text-decoration: none;
    display: block;
}

#nav li a:active{
    background-image: url(../img/menu_act.png);
    background-repeat: no-repeat;
    background-position: center;
}

[/spoiler]
  •  


UnitZ

#1
Это по первому
#nav li:hover a

По второму - для подсветки ссылки на текущую страницу добавляют к этой ссылке дополнительный класс, например current. Это делается обычно на стороне сервера, но скорее всего можно и на js.
Псевдокласс :active определяет стиль для ссылки, в момент нажатия на нее.
  •  


irbis0108Topic starter

Всем  спасибо! Разобрался с 1 вопросом, дальше буду думать сам. :-\ Тема закрыта!
  •  



Если вам нравится SbUP Форум, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....