Активный пункт меню

[klaos27]

Всем добрый день!

Не получается совладать с активным пунктом верхнего горизонтального меню.

Подскажите пожалуйста каким образом решить данную проблему!

 

Пациент здесь.

 

 

[afwollis]

Не получается совладать с активным пунктом верхнего горизонтального меню.

тренировался недостаточно ты, О падаван юный!

лишь тренировок помочь смогут годы тебе...

ну либо вменяемые описание ситуации и вопрос.

[klaos27]

То что тренировался мало, это точно. Тренировки продолжаются.
 
На данном пациенте есть верхнее меню, содержащее следующий вид

 

<div id="menu">
<div class="wrapper">
<div class="menu">
<ul>
<li><a href=" " class="active"><span class="menu-title">Главная</span></a></li>
<li><a href=" "><span class="menu-titl e">О нас</span></a></li>
<li><a href=" "><span class="m e nu-title">Оплата</span></a></li>
<li><a href=" "><span class="menu -title">Доставка</span></a></li>
</ul>
</div>
</div>
</div>

 

Для данного меню есть стили

 

 

#menu {
margin: 0px;
width: 100%;
height: 77px;
background: url('../image/bg-mainmenu.png') top center no-repeat;
}
.menu {
margin: 0 15px;
height: 26px;
padding: 31px 0 20px;
}
.menu ul {
margin: 0px;
padding: 0;
float: left;
width: 100%;
}
.menu ul li {
padding: 0;
float: left;
display: block;
height: 34px;
background: 0;
margin: 0px;
}
.menu ul li a {
padding: 0px 0px 0px 20px;
display: block;
text-decoration: none;
z-index: 100;
cursor: pointer;
position: relative;
z-index: 100;
}
.menu .menu-title {
color: #fff;
display: block;
font-size: 14px;
line-height: 31px;
cursor: pointer;
padding: 0px 20px 0 0;
z-index: 9999;
}
.menu ul li:hover,
.menu ul li:active,
.menu ul li:focus {
}
.menu .active {
}
.menu ul li a:hover,
.menu ul li a.active,
.menu ul li a.active:focus {
background: url('../image/menu-hover.png') 0 0 no-repeat;
}
.menu ul li a:hover .menu-title,
.menu ul li a.active .menu-title,
.menu ul li a.active:focus .menu-title {
color: #ffe202;
background: url('../image/menu-hover.png') 100% 0 no-repeat;
}
.wrapper {
width: 960px;
margin: 0 auto;
}

 

В меню сейчас первая ссылка ("главная") выделена как активная ссылка и остается таковой всегда при переходе в другие пункты меню. Другие пункты меню активными не становятся.

А хочется чтобы при переходе в другой пункт меню он становился активным и, соответсвенно, выделялся другим цветом.

[afwollis]

код в CODE

class="active"

забито в верстке?

[klaos27]

Добрый день! 

Частично проблема решилась вот этим

<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
$.each($(".menu a"),function(){
if(url.indexOf(this.href)>=0){
$(this).addClass('active');
};
});
});
</script>

Только при таком решении активной является ссылка не только та на которой находишься, но еще и первая

[DrinkPozitive]

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=5870&filter_search=active%20menu

[YelloVV]

Помогите настроить чтобы активная ссылка меню была выделенной. Модуль не помого и то что написано тоже.
Вот код хидера
 
 

<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><?php if ($category['active']) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']) ;) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
<li><a href="/?php echo $home; ?">Главная<br />страница</a><li>
<li><a href="/aktsii-i-skidki">Акции<br /> и скидки</a></li>
<li><a href="/sposob-oplat">Способы<br />оплаты</a></li>
<li><a href="/informatsiya-o-dostavke">Способы<br />доставки</a></li>
<li class="selected"><a href="/o-nashem-magazine"> О нашем<br />магазине</a></li>
<li><a href="http:/index.php?route=information/contact">Контакты<br />и адрес</a><li>
<li><a href="http://tricota32.ru/usloviya-i-soglasheniya.html">Условия<br />соглашения</a><li>
</ul>
</div><script type="text/javascript"><!--
$('div#menu li').each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "selected";});
//--></script>

 

Вот ксс

 

 

 

#menu > ul > li > a.active {

}
#menu > ul > li > a {
font-size: 14px;
top: 5px;
color: #03471F;
line-height: 14px;
text-decoration: none;
display: block;
padding: 9px 10px 9px 10px;
z-index: 6;
position: relative;
text-transform: capitalize;
min-width: 124px;
text-align: center;
text-transform: uppercase;
}
#menu > ul > li:hover > a {
color: #FFFFFF;
}
#menu > ul > li:hover {
background: url('../image/menulh.png') center center no-repeat;
height: 100px;
min-width: 124px;
margin-top: -2px;
}
#menu > ul > li:selected {
background: url('../image/menulh.png') center center no-repeat;
height: 100px;
min-width: 124px;
margin-top: -2px;
}

 

 

Что не так подскажите пожайлуста.!

[YelloVV]

может кому надо. решилось вот так

 

 

#menu > ul > li > a.active {
background: url('../image/menulh.png') center center no-repeat;
height: 100px;
min-width: 124px;
margin-top: -14px;
}

 

 

в хидер

 

 

<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
$.each($(".menu a"),function(){
if(url.indexOf(this.href)>=0){
$(this).addClass('active');
};
});
});
</script> 

 

 

вместо . - #

 

 

tricota32.ru

[YelloVV]

2014-04-20_224941.png

не переживайте все поправлено

 

PS Спасибо зп своевременную помошь.