Помогите настроить вертикальное меню

Екатерина
Екатерина
2.1K
15
Добрый день, Александр. Хочу попросить вашей помощи в настройке вертикального меню. На просторах сети нашла довольно симпатичное вертикальное меню, которое почему-то никак не хочет нормально работать на моем сайте. Само меню имеет такой вид. HTML: 
<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>
Суть проблемы в следующем. Если установить меню без скрипта, только HTML и CSS, то оно будет работать нормально за исключением того, что не будет выделяться цветом та категория блока меню, на которой пользователь сейчас находится. Если же прописать скрипт, то меню вообще перестает работать, при попытке перейти по меню ничего не происходит, страницы нужные не открываются. Помогите, пожалуйста, подскажите, что нужно изменить в данном скрипте, чтобы меню работало, и при открытии какого-то определенного пункта меню, эта категория меню выделялась цветом (чтобы было ясно и понятно пользователю в каком разделе меню он находится в данный момент)?
Изображения:

Комментарии: 15

Екатерина
Екатерина
03.04.2016, 14:48
Я установила ваш новый скрипт, но он не работает так, как надо.
Александр Мальцев
Александр Мальцев
03.04.2016, 15:03
По идее должен работать. Может быть они у тебя по умолчанию все активные.
Тогда сделай так:
$(function() {
  var path = location.pathname.slice(1);
  var startPosition = path.indexOf('/');
  var secondPosition = path.indexOf('/',startPosition+1);
  if (secondPosition == -1) {
    $(".accordion > li > a[href*='"+path+"']").removeClass('active');
    return;
  }
  var searchPath = path.substring(0,secondPosition);
  if ($(".accordion > li > a[href*='"+searchPath+"']").length) {
    $(".accordion > li > a[href*='"+searchPath+"']").addClass('active');
  }
});
Екатерина
Екатерина
03.04.2016, 15:15
Ничего не понимаю, но и тут тоже самое, тоже все выделено зеленым. Чудеса, да и только…
При этом, обратите внимание, что внизу, там где меню Другие сервисы, где стоит ваш скрипт такого вида:

<script>
$(function() {
 if ($(".accordion > li > a[href*='"+location.pathname.slice(1)+"']").length) {
 $(".accordion > li > a[href*='"+location.pathname.slice(1)+"']").addClass('active');
 }
});
</script>
Там почему-то, меню зеленым не выделяется. Там, оно такое, как и должно быть, но я не могу поставить данный скрипт в меню Выбора канала, так как он тогда не будет выделять нужный мне канал, как делает скрипт, который почему-то не хочет работать корректно. Во завернула… если непонятно объяснила, спрашивайте, уточню.
Александр Мальцев
Александр Мальцев
03.04.2016, 15:23
Вы вставили скрипт на странице в 2 местах. В одном месте один, а в другом месте другой. Надо быть внимательной. Вот поэтому он и не работает :)
Екатерина
Екатерина
03.04.2016, 16:14
Все, разобралась! Оставила в одном месте ваш последний скрипт! И всё стало как надо. Фух.
Спасибо, что потратили свое время на помощь мне, Александр!
Екатерина
Екатерина
02.04.2016, 14:28
Там, где ВСЕ КАНАЛЫ _http://banktv.at.ua/publ/ нужно, чтобы меню вообще не выделялось цветом (в данный момент оно всё зелёное) и было просто серое, как обычно, до тех пор, пока пользователь не зайдет в нужную категорию или не откроет нужный канал.
Александр Мальцев
Александр Мальцев
02.04.2016, 14:59
Попробуй так:
$(function() {
  var path = location.pathname.slice(1);
  var startPosition = path.indexOf('/');
  var secondPosition = path.indexOf('/',startPosition+1);
  if (secondPosition == '-1') return;
  var searchPath = path.substring(0,secondPosition);
  if ($(".accordion > li > a[href*='"+searchPath+"']").length) {
    $(".accordion > li > a[href*='"+searchPath+"']").addClass('active');
  }
});
Екатерина
Екатерина
02.04.2016, 16:33
Ничего не изменилось. Все равно зеленым выделено, как и было до этого.
Александр Мальцев
Александр Мальцев
23.03.2016, 16:53
Попробуйте изменить данный скрипт на следующий:
<script>
$(function() {
  if ($(".accordion > li > a[href*='"+location.href+"']").length>0) {
    $(this).addClass('active');
  }
});
</script>
Екатерина
Екатерина
23.03.2016, 17:26
Не хочет почему-то данный скрипт работать. Установила его, но ничего не изменилось, при переходе по меню не выделятся активный открытый пункт.
Александр Мальцев
Александр Мальцев
24.03.2016, 05:48
Что-то не то написал :)
Сделай так:
<script>
$(function() {
  if ($(".accordion > li > a[href*='"+location.pathname.slice(1)+"']").length) {
    $(".accordion > li > a[href*='"+location.pathname.slice(1)+"']").addClass('active');
  }
});
</script>
Екатерина
Екатерина
24.03.2016, 12:29
Саш, спасибо за работу, все работает, но немного не так, как хотелось бы!
Сейчас объясню. Если ты находишься в какой-либо категории меню (например тут _http://banktv.at.ua/publ/detskie/1), то все ок, — скрипт работает, меню выделяется. Но если перейти на какой-то конкретный канал (страницу), например _http://banktv.at.ua/publ/detskie/disney_channel_smotret_online/1-1-0-3 то меню уже не выделяется зеленым.
Можно ли сделать так, чтобы при открытии конкретной страницы выделятся тот пункт меню, к которому она относится? Если это детский канал, чтобы выделялось меню Детские, если это какой-либо спортивный канал, чтобы выделялось меню Спортивные.
Если конечно, это вообще можно реализовать? Видимо, я в статье изначально не очень понятно объяснила, чего именно хочу… Прошу прощения.
Вот скриншот:
Александр Мальцев
Александр Мальцев
24.03.2016, 13:40
Я не знаю как у тебя организованы URL. Могу только судить по приведённым выше путям.
Тогда сделай так:
$(function() {
  var path = location.pathname.slice(1);
  var startPosition = path.indexOf('/');
  var secondPosition = path.indexOf('/',startPosition+1);
  var searchPath = path.substring(0,secondPosition);
  if ($(".accordion > li > a[href*='"+searchPath+"']").length) {
    $(".accordion > li > a[href*='"+searchPath+"']").addClass('active');
  }
});
Екатерина
Екатерина
24.03.2016, 13:51
Класс! То, что надо! Сашка, ты как всегда супер! Огромное тебе спасибо, ты мегакрутой!
Екатерина
Екатерина
30.03.2016, 14:41
Александр, простите мне мою невнимательность, что сразу недоглядела, но в скрипте есть небольшой баг.
Когда открыта отдельная страница, то меню выглядит вот так — серое меню и зеленым выделен цвет. (см.скриншот)
.
Кроме этого, когда открыта какая-то отдельная категория, то скрипт тоже работает исправно.
Но когда я захожу на страницу _http://banktv.at.ua/publ/ где расположены ВСЕ каналы, которые есть на сайте, меню выглядит ужасающе,- оно все зеленое!!! Такого быть не должно (см.скрин)
.
К сожалению, только сейчас это увидела и офигела. Можно это как-то подправить?