Перейти к содержанию
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;
}

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

код в CODE

class="active"
забито в верстке?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добрый день! 

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

<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>

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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;
}

 

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

 

#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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

post-20793-0-88885600-1398012590_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

post-675110-0-51787500-1398105372_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.