Hello, I want to edit the code so that the menu when switching to another page does not close. Here is the html menu code:

<div class="content"> <div class="wrap"> <div class="left-sidebar"> <ul class="main-menu"> <li><a href="index.html">Pagrindinis</a></li> <li> <a href="#">Stogo darbai</a> <ul> <li><a href="inner.html">Šlaitinių stogų dengimas</a></li> <li><a href="#">Stogo skardinimas</a></li> <li><a href="#">VELUX stoglangių montavimas</a></li> <li><a href="#">Kaminų skardinimas</a></li> <li><a href="#">Stogo šiltinimas</a></li> </ul> </li> <li><a href="#">Stogo danga</a></li> <li><a href="#">Stogų sistemos</a></li> <li><a href="#">Klausimai</a></li> <li><a href="#">Kontaktai</a></li> </ul> <a href="#" class="prices-button"> <img src="img/atliekamu-darbu-kainos.png" alt="abrakadabra"> </a> </div></div></div>

but css itself

 .content { margin: 41px 0 0 0; } .content .left-sidebar { float: left; margin: 0 0 0 20px; width: 185px; } .content .main-menu>li { position: relative; margin: 0 0 1px; width: 185px; } .content .main-menu>li>a { display: block; padding: 0 0 0 36px; font: 12px/34px 'Georgia'; width: 149px; height: 40px; color: #FEFDEC; text-transform: uppercase; background: url('../img/menu-button.png') 0 0 no-repeat; } .content .main-menu>li>a:hover { display: block; background: url('../img/menu-button.png') 0 -40px no-repeat; } .content .main-menu li ul { display: none; margin: 0 0 13px; } .content .main-menu li ul li { margin: 0px; padding: 11px 0px 11px 24px; border-bottom: 1px solid #260B03; font: 13px/16px 'Arial'; background: url("../img/main-menu-mark.png") no-repeat scroll 10px 14px transparent; } .content .main-menu li ul li a { display: block; font: 13px/16px 'Arial'; color: #2F0A04; } .content .main-menu li ul li a:hover { color: #B44C2C; } .content .left-sidebar .prices-button { display: block; margin: 31px 0 0 0; }

How can I implement this problem? I understand that for each page you will need a separate rule, I assume through the ID. Please show by example

  • one
    show this menu on another page - Grundy
  • On each page you will have to show the menu and analyze on each page which elements to keep open and which ones to close - cyadvert
  • one
    Yes, it is not possible to show an example. Let's start with the fact that you have not affixed a single id . You should have a css class that marks which menu is open. When generating a page, compare the id this menu with the id current page. If it is the same, enable the css class in the html menu. This is in very general terms ... - cyadvert

1 answer 1

Perhaps this will help:

 $(document).ready(function(){ var path = window.location.pathname; var datalink = $('li').data('link'); $('[data-link]').append('<div>Отображаем текущую ссылку, чтобы понять принцип работы скрипта: </div>' + path) $('[data-link]').each(function() { if (path == datalink ){ $(this).addClass('red') } }); });

An example of the script (just need to click Run to see the result, jsfiddle generates links in its own way).