Меню с активными и не активными кнопками

[lexx]

Добрый день!

Помогите пожалуйста решить такую проблему:

Имеется меню в котором четыре кнопки, каждая кнопка имеет сваю картинку при наведении на кнопку мышкой картинка изменяется с не активной на активную. Мне надо чтобы пользователь зайдя на определенную страницу сайта (каждая кнопка соответствует своей странице) кнопка горела как активная а перейдя на другую становилась обратно не активной.

Вот собственно моя верстка:

CSS

————-

#menu_2 {
margin: 0;
margin-left: 0px;
padding: 0px 0px 0px 0px;
float: left;
list-style: none;
background: url(../images/header/menu_2/menu_right.jpg) no-repeat right top;
}
#baner2_1 {
position: relative;
padding: 0;
float: left;
background: #35a3d2 url(../images/header/menu_2/baner_1.png) repeat-x;
}
#baner2_2 {
position: relative;
padding: 0;
float: left;
background: #35a3d2 url(../images/header/menu_2/baner_2.png) repeat-x;
}

#menu_2 a {
display: block;
width: 250px;
height: 140px;
background: url(../images/header/menu_2/menu_divider.jpg) no-repeat right top;
}

#menu_2_1:hover {
width: 250px;
height: 140px;
background: #f8f4dc url(../images/header/menu_2/baner_active_1.png) repeat-x;
}
#baner2_2 :hover {
width: 250px;
height: 140px;
background: #f8f4dc url(../images/header/menu_2/baner_active_2.png) repeat-x;
}

HTML

———————————————-

<div id="menu_2">
<li class="baner2_1_active"><div id="baner2_1"><a href="?page=airport_M2" ></a></div></li>
<li><div id="baner2_2"><a href="?page=transfer_city" {active2}></a></div></li>
<li><div id="baner2_3"><a href="?page=country_driver" {active3}></a></div></li>
<li><div id="baner2_4"><a href="?page=taxi_day" {active4}></a></div></li>
</div>

[a1rborn]

Ну и сделайте на каждой странице такую "активную" кнопку, а другие неактивные.

Т.е. для каждой страницы X с активной кнопкой Y у вас должен быть дивY на странице X и т.д.

[npofopr]

Ну скорее всего у вас стоит какой нибудь "движок" и решается тут все в php или что там у вас, а то, что вы выложили... ну это только верстка.

И у вас нет стилей, для baner2_1_active , я так понимаю, это и есть активный пункт меню. Вообще странно, что baner2_1_active , обычно делают "baner2_1 active" т.е. разделяют.

И потом уже, средствами php ли, js ли, по мере нахождения на той или другой странице присваивают нужному пункту active

[lexx]

Ну скорее всего у вас стоит какой нибудь "движок" и решается тут все в php

Да! php 'склеивает' каждую страницу и указывает что кнопка активна так:

$active = "class=active";
$str = str_replace('{active1}',$active,$str);

то есть "class=active" встает сюда

<li><div id="baner2_1"><a href="?page=airport_M2" {active1}></a></div></li>

и получается так

<li><div id="baner2_1"><a href="?page=airport_M2" class=active></a></div></li>

Но в идеале так не выходит, у меня то кнопка активна постоянно то не активна.

пробовал такую комбинацию:

#baner2_1:hover {
width: 250px;
height: 140px;
background: #f8f4dc url(../images/header/menu_2/baner_active_1.png) repeat-x;
}
#baner2_1, active{
background: #f8f4dc url(../images/header/menu_2/baner_active_1.png) repeat-x;
}

так получается что кнопка постоянно активна!

[npofopr]

Ну тогда уж

#baner2_1 .active{
background: #f8f4dc url(../images/header/menu_2/baner_active_1.png) repeat-x;
}

а лучше

#menu_2 .active{
background: #f8f4dc url(../images/header/menu_2/baner_active_1.png) repeat-x;
}

Edited January 29, 2013 by npofopr

[lexx]

Всем большое спасибо заработало !

Edited January 29, 2013 by lexx