Выподающее меню С подсветкой активного элемента на странице
Здравствуйте подскажите пожалуйста, как сделать выпадающее меню с подпунктами и подсвечиванием того пункта меню который я выбрал.
Мой список работает , но при выборе пункта меню он добавляет класс только для <li><a class="nav_art" href="/two">Январь (10)</a></li> А для категории меню не выбирает и соответственно не раскрывает список,
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<html>
<body>
<style>
ul.left_menu li a:hover, ul.left_menu li.active a {
color:#FFF;
background-color:#78bbe6;
border:1px solid #78bbe6;
}
ul.acitem {
list-style:none;
}
ul.left_menu a.active, ul.left_menu ul.acitem li a.active, ul.left_menu a.active:hover, ul.left_menu ul.acitem li a.active:hover {
color:#FFF;
background-color:#78bbe6;
border:1px solid #78bbe6;
}
</style>
<script type="text/javascript">
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};
$(document).ready(function() {$('.left_menu').initMenu();})
</script>
<ul class="left_menu collapsible">
<li>
<a class="nav_art" href="#">С чего начать</a>
<ul class="acitem">
<li><a class="nav_art" href="/one">Рубрика 1</a></li>
<li><a class="nav_art" href="#">Рубрика 2</a></li>
<li><a class="nav_art" href="#">Рубрика 3</a></li>
</ul>
</li>
<li>
<a class="nav_art" href="#">Архивы</a>
<ul class="acitem">
<li><a class="nav_art" href="/two">Январь (10)</a></li>
<li><a class="nav_art" href="#">Февраль (15)</a></li>
<li><a class="nav_art" href="#">Март (8)</a></li>
</ul>
</li>
</ul>
</body>
</html>
И скрипт для добавления класса активным пунктам меню.
$('ul li a.nav_art').each(function() {
link = $(this).attr('href');
if(link != homePage && link == window.location.href.substr(0,link.length)) $(this).addClass('active');
});
|
Rorbi,
$(this).addClass('active').parents('ul').prev().click();
|
Цитата:
|
Цитата:
|
Цитата:
Цитата:
к сожалению не помогло |
Цитата:
|
Цитата:
$('ul li a.nav_art').each(function() {
link = $(this).attr('href');
if(link != homePage && link == window.location.href.substr(0,link.length)) $(this).addClass('active').parents('ul').prev().click();
вот тут это не работает, не добавляется класс active для самой категории <a class="nav_art" href="#">С чего начать</a>, а по прежнему только для той ссылки на которую я нажал |
Rorbi,
работает
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<style>
ul.left_menu li a:hover, ul.left_menu li.active a {
color:#FFF;
background-color:#78bbe6;
border:1px solid #78bbe6;
}
ul.acitem {
list-style:none;
}
ul.left_menu a.active, ul.left_menu ul.acitem li a.active, ul.left_menu a.active:hover, ul.left_menu ul.acitem li a.active:hover {
color:#FFF;
background-color:#78bbe6;
border:1px solid #78bbe6;
}
</style>
<script type="text/javascript">
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};
$(document).ready(function() {$('.left_menu').initMenu();
$('ul li a.nav_art').each(function() {
link = $(this).attr('href');
if( link == '/two') $(this).addClass('active').parents('ul').prev().click();
});
})
</script>
<ul class="left_menu collapsible">
<li>
<a class="nav_art" href="#">С чего начать</a>
<ul class="acitem">
<li><a class="nav_art" href="/one">Рубрика 1</a></li>
<li><a class="nav_art" href="#">Рубрика 2</a></li>
<li><a class="nav_art" href="#">Рубрика 3</a></li>
</ul>
</li>
<li>
<a class="nav_art" href="#">Архивы</a>
<ul class="acitem">
<li><a class="nav_art" href="/two">Январь (10)</a></li>
<li><a class="nav_art" href="#">Февраль (15)</a></li>
<li><a class="nav_art" href="#">Март (8)</a></li>
</ul>
</li>
</ul>
</body>
</html>
|
| Часовой пояс GMT +3, время: 08:19. |