1

Здравствуйте, хочу отредактировать код, чтобы меню при переходе на другую страницу не закрывалось. Вот код хтмл меню:

<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>

а вот сам css

.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;
}

Каким образом можно реализовать эту проблемку? Понимаю, что для каждой страницы нужно будет отдельное правило, предпологаю через ID. Прошу показать на примере

3
  • 1
    показывать это меню на другой странице
    – Grundy
    22 ноя 2015 в 17:01
  • Вам на каждой странице придется показывать меню и на каждоай странице анализировать, какие жлементы держать открытыми, а какие закрыть
    – cyadvert
    22 ноя 2015 в 17:51
  • 1
    да не возможно показать на примере. начнем с того, что у Вас не проставлено ни одного id. У вас должен быть css класс, который помечает, какое из меню открытое. При генерации страницы сравниваете id этого меню с id текущей страницы. Если совпадает - включаете css класс в html меню. Это в очень общих чертах...
    – cyadvert
    22 ноя 2015 в 18:11

1 ответ 1

1

Возможно это поможет:

$(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') 
       }
   });

});

Пример работы скрипта (только нужно нажать Run, чтобы увидеть результат, jsfiddle по своему генерирует ссылки).

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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