0

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

  • если потом раскрыть li.sub то активный пункт будет вот так почему-то смещена стрелка внизвведите сюда описание изображения

(function ($) {
$(document).ready(function(){
  var vmenu = $('#menu > li.sub > .fa-angle-down');
  vmenu.on('click',function(){
  $(this).toggleClass('active');
  $('#menu li ul').slideUp();
   if ($(this).next().is(":visible")){
       $(this).next().slideUp();
   } else {
   $(this).next().slideToggle();
   }
  });
  
   $('.sub ul li a').click(function(){
            var subIndex = $('.sub ul li a').index(this);
          $.cookie("sub-link", subIndex);
       $('.sub ul li a').removeClass('active');
       $(this).addClass('active');
    });
});
       }(jQuery));
#menu {
	width: 260px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
#menu>li{
    position: relative;
}
#menu>li>a {
    display: block;
    position: relative;
    padding: 10px 25px;
    background: #fff;
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
	border-bottom: 1px solid transparent;
    text-shadow: 0px 1px 1px #ffffff;
    color: #707070;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
	text-decoration:none;
}
#menu>li>.fa-angle-down{
    position: absolute;
    display: table;
    text-transform: uppercase;
    cursor: pointer;
    color: #000;
    font-size: 16px;
    outline: none;
    font-weight: 400;
    width: 40px;
    right: 0px;
    height: 39px;
    line-height: 2.5em;
    top: 0px;
    text-align: center;
} 
#menu>li:last-of-type>a {
	border-bottom: 1px solid #dedede;
}
#menu>li>a:hover,
#menu>li>a.active {
    background: transparent;
    text-shadow: 0px 1px 1px #ffffff;
    border: 1px solid #166816;
    color: #000;
}

#menu li ul {
	display:none;
    list-style: none;
    margin: 0;
    padding:0
}

#menu>li>ul>li>a {
    font-size: 12px;
    padding: 7px 45px;
    border: none;
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
    display: block;
    position: relative;
    padding: 8px 40px;
    background: #fff;
    color: #707070;
    font-weight: 400;
    text-decoration: none;
}
#menu li ul li a.active:after {
    content: "\f105";
    font-family: 'icons' !important;
    float: left;
    margin-left: -22px;
    line-height: 1em;
    padding-right: 15px;
    font-size: 16px;
}
#menu li ul li a:hover,
#menu li ul li a.active {
	background: #f0f5f8;
    color: #000;
}
/* переключатель 
#menu li.sub > a:before {
    content:'';
    height:6px;
    width:6px;
    display:block;
    border:1px solid #606060;
    border-right-width:0;
    border-top-width:0;
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    position:absolute;
    right:20px;
    top:14px
}
*/
/* активный переключатель 
#menu li.sub > a:hover:before,
#menu li.sub > a.active:before{
  border:1px solid #00a00c;
  border-right-width:0;
  border-top-width:0;
}
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="col-md-3 col-xs-12 col-sm-3 vertical-menu">
        <ul id="menu">
	<li class="sub">
	<a href="catalog/m">Молочная продукция</a>
	<i class="fa fa-angle-down" aria-hidden="true"></i>
		<ul style="display: none;">
			<li><a href="catalog/m/moloko">Молоко и сливки</a></li>
			<li><a  class="active" href="catalog/m/kislomolochnie">Йогурты, кефир, ряженка, простокваша</a></li>
			<li><a href="catalog/m/tvorog">Творог и творожные массы</a></li>
			<li><a href="catalog/m/smetana">Сметана</a></li>
			<li><a href="catalog/m/maslo">Масло сливочное</a></li>
			<li><a href="catalog/m/syr">Сыры</a></li>
		</ul>
	</li>
	<li class="sub">
	<a href="catalog/km">Колбасы и мясные изделия</a>
	</li>
	<li class="sub"><a href="catalog/yc">Яйца</a></li>
	<li class="sub">
	<a href="catalog/pf">Полуфабрикаты</a>
	<i class="fa fa-angle-down" aria-hidden="true"></i>
		<ul style="">
			<li><a href="catalog/pf/pelmeni">Пельмени, вареники, манты и фрикадельки</a></li>
			<li><a href="catalog/pf/blin">Блинчики замороженные</a></li>
		</ul>
	</li>
	<li class="sub"><a href="catalog/mr">Мороженое</a></li>
	<li class="sub">
	<a href="catalog/sl">Печенье и сладости</a>
	<i class="fa fa-angle-down" aria-hidden="true"></i>
		<ul style=""><li>
		<a href="catalog/sl/slad">Сладости</a>
		</li>
		</ul>
	</li>
	<li class="sub"><a href="catalog/var">Варенье и джемы</a></li>
	<li class="sub"><a href="catalog/med">Мёд и крем-мёд</a></li>
	<li class="sub"><a href="catalog/nap">Напитки</a></li>
	<li class="sub"><a href="catalog/ois">Орехи и сухофрукты</a></li>
	<li class="sub"><a href="catalog/chik">Чай и кофе</a></li>
	<li class="sub"><a href="catalog/mak">Макароны и крупы</a></li>
	<li class="sub"><a href="catalog/mu">Масло и уксус</a></li>
</ul>
      </div>

1
  • 1
    Если у вас страницы рендерятся на js (single page app), то запоминайте текущую страницу в какой-нибудь глобальной переменной или кеше. Если у вас реальные страницы, то задавайте активный пункт меню классом с помощью бекенда или парсите url страницы регулярным выражением, в зависимости от чего пройдясь по дереву менюхи назначьте класс соответствующему пунтку меню. 5 дек 2017 в 12:58

1 ответ 1

0

Можно с помощью GET-запроса.

Добавляем ссылке id и в адрес добавляем соответствующее значение.

<a href="m4.php?link=milk_cream" id="milk_cream">Молоко и сливки</a>

Далее, на страничке получаем это значение

<?php $link = $_GET["link"]; ?>

И с помощью JS делаем видимым подменю и делаем ссылку "активной"

$("#<?php echo $link; ?>").parents("ul").show();
$("#<?php echo $link; ?>").addClass("active");
3
  • использую cms modx revo дополнение pdomenu
    – Aslero
    5 дек 2017 в 13:16
  • как проверить, если пункт подменю активный a.active то ul сделать display:block ?
    – Aslero
    5 дек 2017 в 15:26
  • 1
    $("ul li a.active").parents("ul").show();
    – fanfer
    5 дек 2017 в 16:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.