0

Всем привет. Есть раскрывающееся меню:

<ul id="menu">
  <li>
        <a href="#">Weblog Tools</a>
        <ul>
            <li><a href="http://www.pivotx.net/">PivotX</a></li>
            <li><a href="http://www.wordpress.org/">WordPress</a></li>
            <li><a href="http://www.textpattern.com/">Textpattern</a></li>
            <li><a href="http://typosphere.org/">Typo</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Programming Languages</a>
        <ul>
            <li><a href="http://www.php.net/">PHP</a></li>
            <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
            <li><a href="http://www.python.org/">Python</a></li>
            <li><a href="http://www.perl.org/">PERL</a></li>
            <li><a href="http://java.sun.com/">Java</a></li>
            <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
        </ul>
    </li>
            <li>
        <a href="#">Cool Stuff</a>
        <ul>
            <li><a href="http://www.apple.com/">Apple</a></li>
            <li><a href="http://www.nikon.com/">Nikon</a></li>
            <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
            <li><a href="http://www.nintendo.com/">Nintendo</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Search Engines</a>
        <ul>
            <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
            <li><a href="http://www.google.com/">Google</a></li>
            <li><a href="http://www.ask.com/">Ask.com</a></li>
            <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
        </ul>
    </li>
            <li>
        <a href="#">Search Engines</a>
        <ul>
            <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
            <li><a href="http://www.google.com/">Google</a></li>
            <li><a href="http://www.ask.com/">Ask.com</a></li>
            <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
        </ul>
    </li>
</ul>

CSS-стили к нему:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.9em;
}
p {
    line-height: 1.5em;
}
ul#menu,
ul#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 15em;
}
ul#menu a {
    display: block;
    text-decoration: none;
}
ul#menu li {
    margin-top: 1px;
}
ul#menu li a {
    background: #333;
    color: #fff;
    padding: 0.5em;
}
ul#menu li a:hover {
    background: #000;
}
ul#menu li ul li a {
    background: #ccc;
    color: #000;
    padding-left: 20px;
}
ul#menu li ul li a:hover {
    background: #aaa;
    border-left: 5px #000 solid;
    padding-left: 15px;
}
.code {
    border: 1px solid #ccc;
    list-style-type: decimal-leading-zero;
    margin: 0px;
    padding: 5px;
}
.code code {
    display: block;
    margin-bottom: 0px;
    padding: 3px;
}
.code li {
    background: #ddd;
    border: 1px solid #ccc;
    margin: 0px 0px 2px 2.2em;
}
.indent1 {
    padding-left: 1em;
}
.indent2 {
    padding-left: 2em;
}

И ЯваСкрипт:

function initMenu() {
    $('#menu ul').hide();
    $('#menu li a').click(function () {
        $(this).next().slideToggle('normal');
    });
}
$(document).ready(function () {
    initMenu();
});

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

2
  • @laboomba, Чтобы отформатировать код, выделите его мышью и нажмите на кнопку {} редактора. 15 ноя 2012 в 7:05
  • Хорошо. Просто мало на форуме.
    – Frontender
    15 ноя 2012 в 7:24

2 ответа 2

2

Дополню ответ @Deonis. Используйте сразу комбинацию из Local Storage и Cookie. Перед установкой можно проверять поддержку Storage - если отсутствует устанавливать Cookie.

Коротенький пример:

установка значения:

typeof(localStorage) != 'undefined' ? localStorage['Info'] = someVal : setCookie('Info', someVal , 1);

получение значения:

  typeof(localStorage) != 'undefined' ? localStorage['Info'] : getCookie('Info');

Это решит проблему с ИЕ.

Альтернативный подход к решению задачи - используем hash.

К пунктам меню дописываем хеш в url (например #menu1, #menu2, #menu3). Соответственно страница будет открываться с url вида www.somesite.com/url#menu1. Дальше используя javascript получаешь window.location.hash при загрузке страницы и в соответствии с hash открываешь нужный раздел меню.

2
  • Вариант с хешем наболее красивый. По поводу сохранения инфы при переходе между страницами - есть window.name. Сюда можно засунуть любую строку и работает во всех браузерах (ie6+)
    – BGoode
    15 ноя 2012 в 13:40
  • Что-то я не въехал про способ с хэшем. Можно где-то увидеть мини-пример?
    – zloctb
    1 дек 2012 в 22:04
1

Раз в тегах вы указали javascript, то будем рассматривать решение в этом направлении. Для вашей задачи, можно использовать Local Storage. По клику, на определенную ветку меню, вы записываете в LS её индекс. На других страницах, остается просто проверить значение в LS и изменить состояние нужной ветки на "открытое"

7
  • А не подскажите, как это в коде отобразить? Я просто не совсем понимаю. И локалстораж вроде HTML5. Во всех ли браузерах будет работать?
    – Frontender
    15 ноя 2012 в 6:43
  • А можно это сделать не через яваскрипт?
    – Frontender
    15 ноя 2012 в 6:45
  • @laboomba, нет, не во всех браузерах. В осле ниже восьмой работать не будет. Если учитываете пользователей, у которых хотя бы IE7, то этот вариант отпадает
    – Deonis
    15 ноя 2012 в 6:46
  • А как тогда можно сделать, минуя локалстораж?
    – Frontender
    15 ноя 2012 в 6:50
  • > А можно это сделать не через яваскрипт? Конечно можно. Куки никто не отменял. Только и в этом случае, вы не застрахованы от того, что пользователь их отключит. Есть один очень жесткий способ, который поможет добиться результата, но не буду его даже озвучивать, т.к. это уже способ "радикального хирургического вмешательства". ))
    – Deonis
    15 ноя 2012 в 6:51

Ваш ответ

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

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