Определенный стиль рабочей ссылки в меню

14 сообщений

#13 лет назад

Здравствуйте, форумчане.
Возник такой банальный вопрос: как после нажатия на один из элементов меню сделать так, чтобы к этому (нажатому элементу) применился стиль (цвет, убралось подчеркивание и оранжевый фон?
Пробовал псевдоклассами, но вышло только под ФФ и Оперу, а под Хром не работает вообще!
Пример:

<div id="left_menu">
<ul>
<span style="font-size:18px; font-family:Georgia;">О компании</span>
<ul>
<li><a href="#">Наша миссия</a></li>
<li><a href="#">Сертификаты</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</ul>
...... еще вложенный <ul> </ul>
</div>

CSS:
#left_menu ul li a:hover{
color:#9d2a37; text-decoration:none; background:#f7f1cd; border-radius:5px; padding-left:10px; padding-right:10px; font-size:16px; font-style: regular; font-family:Georgia;
}

#left_menu ul li a:focus{
color:#9d2a37; text-decoration:none; background:#f7f1cd; border-radius:5px; padding-left:10px; padding-right:10px; font-style: regular; font-family:Georgia; font-size:16px; }

Потом решил через онклик сделать, под хром заработало, но не могу убрать подчеркивание открытой ссылки.....

HTML:
<head>
<style type="text/css">
.selected {font-size:16px; font-family:Georgia; color:#9d2a37; background:#f7f1cd;
border-radius:5px;
text-decoration:none;
}
</style>
<script language="JavaScript" type="text/javascript">
var Lst;

function CngClass(obj){
if (Lst) Lst.className='';
obj.className='selected';
Lst=obj;
}
</script>
</head>

<div id="left_menu">
<ul>
<span style="font-size:18px; font-family:Georgia;">О компании</span>
<ul>
<li><a onclick="CngClass(this);" href="#">Наша миссия</a></li>
<li><a onclick="CngClass(this);" href="#">Сертификаты</a></li>
<li><a onclick="CngClass(this);" href="#">Контакты</a></li>
</ul>
...... еще вложенный <ul>

</ul>
</div>

text-decoration:none; - прописано, а подчеркивание осталось в Хроме.. в чем причина?

14 сообщений

#13 лет назад

Чтобы было наглядней, выложил на фрихост.

ссылка

Напомню зачаду: Меню слева - рамка вокруг текста должна быть при наведении, и остаться у выбранного пункта. То есть если мы смотрим страницу "Охлажденное мясо", то пункт долден быть выделен баграундом и убиралось подчеркивание.

Спасибо заранее!

99 сообщений

#13 лет назад

konstantinskiy,

#left_menu ul li a:hover {

меняете на

#left_menu ul li a:hover, #left_menu ul li a.active  {

и к нужному пункту меню додбавлете класс active

<a class="active" href="#">Мясо</a>

14 сообщений

#13 лет назад

Цитата ("r0b1n"):

konstantinskiy,
#left_menu ul li a:hover { 
меняете на
#left_menu ul li a:hover, #left_menu ul li a.active  { 
и к нужному пункту меню додбавлете класс active
<a class="active" href="#">Мясо</a>

Сделал как посоветовали, но вышло вот как
ссылка

А мне надо, чтобы был выделен после нажатия только 1 пункт, вот так
ссылка

359 сообщений

#13 лет назад

konstantinskiy, не знаю почему у вас не получилось. r0b1n все правильно советовал. Вот рабочий пример ссылка (правда сделал немного по другому, но принцип тот же). И зачем скрипты вообще нужны? Все это предусмотрено в любой CMS (активному пункту добавляется какой-то класс)

P.S. а если уж так необходимо с помощью скриптов, значит нужно здесь Цитата ("konstantinskiy"):

HTML:
<head>
<style type="text/css">
.selected {font-size:16px; font-family:Georgia; color:#9d2a37; background:#f7f1cd;
border-radius:5px;
text-decoration:none;
}

вместо text-decoration:none; добавить text-decoration:none !Important;

99 сообщений

#13 лет назад

konstantinskiy, дык Вы присваивайте одному нужному элементу, тому который должен быть выделен класс active, остальные не трогайте.

14 сообщений

#13 лет назад

TitokR, Спасибо, со скриптом помогло. Как раз то, что я хотел.
r0b1n, И вам спасибо, смысл я понял. Да, почитал что если на cms, то нужно присваивать лучше класс элементу и все будет работать.
Всем спасибо за участие. Тема закрыта!