Помогите настроить вертикальное меню
Добрый день, Александр.
Хочу попросить вашей помощи в настройке вертикального меню.
На просторах сети нашла довольно симпатичное вертикальное меню, которое почему-то никак не хочет нормально работать на моем сайте.
Само меню имеет такой вид.
HTML:
Суть проблемы в следующем. Если установить меню без скрипта, только HTML и CSS, то оно будет работать нормально за исключением того, что не будет выделяться цветом та категория блока меню, на которой пользователь сейчас находится.
Если же прописать скрипт, то меню вообще перестает работать, при попытке перейти по меню ничего не происходит, страницы нужные не открываются.
Помогите, пожалуйста, подскажите, что нужно изменить в данном скрипте, чтобы меню работало, и при открытии какого-то определенного пункта меню, эта категория меню выделялась цветом (чтобы было ясно и понятно пользователю в каком разделе меню он находится в данный момент)?
<ul class="accordion"> <!--Блок всего меню-->
<li id="one" class="files"> <!--Блок раздела-->
<a href="http://banktv.at.ua/publ/obshhestvennye/11">Общественные</a> <!--Ссылка блока раздела-->
</li>
<li id="two" class="mail">
<a href="http://banktv.at.ua/publ/razvlekatelnye/12">Развлекательные</a>
</li>
<li id="three" class="cloud">
<a href="http://banktv.at.ua/publ/poznavatelnye/10">Познавательные</a>
</li>
<li id="four" class="sign">
<a href="http://banktv.at.ua/publ/novostnye/8">Новостные</a>
</li>
<li id="five" class="sign">
<a href="http://banktv.at.ua/publ/sportivnye/9">Спортивные</a>
</li>
<li id="six" class="sign">
<a href="http://banktv.at.ua/publ/detskie/1">Детские</a>
</li>
<li id="seven" class="sign">
<a href="http://banktv.at.ua/publ/filmovye/5">Фильмовые</a>
</li>
<li id="eight" class="sign">
<a href="http://banktv.at.ua/publ/muzykalnye/3">Музыкальные</a>
</li>
<li id="nine" class="sign">
<a href="http://banktv.at.ua/publ/zhenskie/2">Женские</a>
</li>
<li id="ten" class="sign">
<a href="http://banktv.at.ua/publ/muzhskie/4">Мужские</a>
</li>
<li id="eleven" class="sign">
<a href="http://banktv.at.ua/publ/religioznye/6">Религиозные</a>
</li>
<li id="twelve" class="sign">
<a href="http://banktv.at.ua/publ/regionalnye/7">Региональные</a>
</li>
</ul>
CSS:
.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion li {
list-style: none;
}
/* Определение и стили элементов */
.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 40px;
height: 32px;
color: #fdfdfd;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
color: #3e5706;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
.accordion li > a span {
display: block;
position: absolute;
top: 7px;
right: 0;
padding: 0 10px;
margin-right: 10px;
font: normal bold 12px/18px Arial, sans-serif;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion > li:hover > a span,
.accordion > li:target > a span,
.accordion > li > a.active span {
color: #fdfdfd;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #3e5706;
}
/* Иконки перед разделами */
.accordion > li > a:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 24px;
height: 24px;
margin: 4px 8px;
background-repeat: no-repeat;
background-image: url(../img/icons.png); /* Ссылка на картинку-спрайт иконок */
background-position: 0px 0px;
}
.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }
.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { background-position: -24px -24px; }
.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { background-position: -48px -24px; }
.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { background-position: -72px -24px; }
/* Стили для под меню */
.sub-menu li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.sub-menu li:hover a { background: #efefef; }
.sub-menu li:last-child a { border: none; }
.sub-menu li.current > a { background: #efefef; }
.sub-menu li.current > a { color: #80b50d; }
.sub-menu li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sub-menu em {
position: absolute;
top: 0;
left: 0;
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif;
}
/* Скрываем неактивные блоки */
.accordion li > .sub-menu {
display: none;
}
.accordion li:target > .sub-menu {
display: block;
}
И скрипт, который не хочет работать
<script>$(function() {
// определяем совпадения URL текущей страницы и ссылок меню
// присваиваем к совпавшим новый класс
var linkMenu = $('.accordion .sub-menu > li > a');
linkMenu.each(function() {
var position = window.location.href;
var link = this.href;
var linkHahs = window.location.hash;
var linkSearch = window.location.search;
if(position == link ||
position == link + linkHahs ||
position == link + linkSearch ||
position == link + linkSearch + linkHahs)
{
$(this).parent('li').addClass('current');
}
});
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu'),
accordion_link = $('.accordion li > .sub-menu > li.current'); //переменная текущего пункта меню
//открываем раздел где найдена текущая ссылка
//добавляем класс к заголовку открытого раздела
accordion_link.each(function(){
$(this).parent().slideToggle();
$(this).parent().parent().children('a').addClass('active');
});
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') == 'active'){
accordion_body.slideUp('normal')
$(this).removeClass('active');
return false;
}
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});</script>
Изображения:
Тогда сделай так:
При этом, обратите внимание, что внизу, там где меню Другие сервисы, где стоит ваш скрипт такого вида:
Там почему-то, меню зеленым не выделяется. Там, оно такое, как и должно быть, но я не могу поставить данный скрипт в меню Выбора канала, так как он тогда не будет выделять нужный мне канал, как делает скрипт, который почему-то не хочет работать корректно. Во завернула… если непонятно объяснила, спрашивайте, уточню.
Спасибо, что потратили свое время на помощь мне, Александр!
Сделай так:
Сейчас объясню. Если ты находишься в какой-либо категории меню (например тут _http://banktv.at.ua/publ/detskie/1), то все ок, — скрипт работает, меню выделяется. Но если перейти на какой-то конкретный канал (страницу), например _http://banktv.at.ua/publ/detskie/disney_channel_smotret_online/1-1-0-3 то меню уже не выделяется зеленым.
Можно ли сделать так, чтобы при открытии конкретной страницы выделятся тот пункт меню, к которому она относится? Если это детский канал, чтобы выделялось меню Детские, если это какой-либо спортивный канал, чтобы выделялось меню Спортивные.
Если конечно, это вообще можно реализовать? Видимо, я в статье изначально не очень понятно объяснила, чего именно хочу… Прошу прощения.
Вот скриншот:
Тогда сделай так:
Когда открыта отдельная страница, то меню выглядит вот так — серое меню и зеленым выделен цвет. (см.скриншот)
Кроме этого, когда открыта какая-то отдельная категория, то скрипт тоже работает исправно.
Но когда я захожу на страницу _http://banktv.at.ua/publ/ где расположены ВСЕ каналы, которые есть на сайте, меню выглядит ужасающе,- оно все зеленое!!! Такого быть не должно (см.скрин)
К сожалению, только сейчас это увидела и офигела. Можно это как-то подправить?