Скрипт раздвижного меню

[Pilot]

Приветствую всех. Есть вопрос по скрипту раздвижного меню на jQuery, который я нашел на вашем проекте. Подскажите пожалуйста. Возможно ли сделать так чтоб при выборе пункта меню и при соответствующем переходе на новую страницу, меню не сворачивалось обратно? Или в данном скрипте это не возможно? Если не возможно то может ли кто-то подсказать похожий скрипт но чтоб данная функция присутствовала? На форуме не нашел.
Заранее спасибо за ответ.

[Admin]

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

[Pilot]

(15.01.2014 22:05:09)Admin писал(а):  Думаю, что возможно, но сегодня делать уже некогда...
Потом как-нибудь попробую сделать, а так идею реализации выложил в ответе на комментарий в теме скрипта.

Спасибо большое. Жаль что это не простое оказалось дело. Если получится в ближайшее время сделать выложи решение пожалуйста. Очень горит.

[Admin]

Вроде получилось. Работать корректно будет только в том случае, когда одновременно открыт только один пункт меню.

Итак, для начала нам понадобится какой-нибудь php файл, например 1.php (если название будет другое, то не забудьте изменить его и в функции jQuery.post). В него помещаем вот такой код:

PHP код:

<?php
if (session_id()=='') session_start();
if (isset($_POST["menu_id"])) $_SESSION["menu_id"]=$_POST["menu_id"];
?>

Весь остальной код (тот, который будет на каждой страничке или в шаблоне):

PHP код:

<?php if (session_id()=='') session_start(); ?>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
ul#menu, ul#menu ul {
  list-style-type:none;
  margin: 0px;
  padding: 0px;
  width: 250px;
}

ul#menu a,ul#menu span { display: block; text-decoration: none; }

ul#menu li { margin-top: 1px; }

ul#menu li a,ul#menu li span {
  background: #333333;
  color: #FFFFFF;
  padding: 7px;
}

ul#menu li a:hover,ul#menu li span:hover { background: #000000; }

ul#menu li ul li a {
  background: #CCCCCC;
  color: #000000;
  padding-left: 20px;
}

ul#menu li ul li a:hover {
  background: #AAAAAA;
  border-left: 5px #000000 solid;
  padding-left: 15px;
}
</style>


<ul id="menu">
 <li><span>Скрипты</span>
    <ul id="1">
     <li><a href="log_info.php">Скрипт записи логов</a></li>
     <li><a href="current_time.php">Текущая дата и время</a></li>
     <li><a href="slide_show_jquery.php">Слайд-шоу на jQuery</a></li>
     <li><a href="scroll_to_top.php">Кнопка вверх</a></li>
    </ul>
 </li>
 <li><span>Онлайн-сервисы</span>
    <ul id="2">
        <li><a href="csscompressor.php">Сжатие CSS кода онлайн</a></li>
        <li><a href="javascriptcompressor.php">Сжатие JavaScript кода</a></li>
        <li><a href="opennet.php">Калькулятор диапазонов IP</a></li>
        <li><a href="qrcoder.php">Онлайн генератор QR кодов</a></li>
        <li><a href="gtmetrix.php">Анализ скорости сайта</a></li>
    </ul>
 </li>
 <li><a href="http://usefulscript.ru/support.php">Поддержка</a></li>
 <li><a href="http://usefulscript.ru/forum/">Форум</a></li>
 <li><span>Хитрости</span>
    <ul id="3">
        <li><a href="csssprites.php">Использование CSS спрайтов</a></li>
        <li><a href="rgb_cod_color.php">HEX и RGB коды цветов</a></li>
        <li><a href="no_www.php">Убрать www из адреса сайта</a></li>
    </ul>
 </li>
</ul>


<script type="text/javascript">
function init_menu() {
<?php
 if (isset($_SESSION["menu_id"])) echo "$('#menu ul[id!=\"".$_SESSION["menu_id"]."\"]').hide();";
 else echo "$('#menu ul').hide();"
?>
$('#menu li span').click(
 function() {
    var checkElement=$(this).next();
    jQuery.post("1.php",{menu_id:$(this).next().attr("id")});
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; }
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
    }
 }
);
}
$(document).ready(function() {init_menu();});
</script> 


Как видно из приведенного кода, изменения минимальны: первой строчкой добавилось <?php if (session_id()=='') session_start(); ?>
Если сессии на Вашей страничке уже стартовали ранее, то данную строчку можно удалить.

Далее, каждому элементу ul мы присваиваем уникальный id (например, <ul id="1"> и т.д.).

Ну и в конце небольшие изменения коснулись функции init_menu().

[Pilot]

Спасибо за внимание к данному посту. Пока у меня проблема с созданием php файла. Сайт на Blogger, поэтому файл надо на стороннем хостинге создавать. Создал на Google Drive. Но никак не пойму как там взять ссылку на этот файл. Может кто подскажет?

[Admin]

Если Ваш хостинг не поддерживает PHP, то ничего не выйдет, т.к. для нормальной работы функции init_menu() тоже необходима поддержка PHP.
Сторонний хостинг тоже не поможет, т.к. необходима работа с сессиями, в которых при переходе на новые странички хранится id открытого пункта меню.
Так что в Вашем случае данная модификация скрипта работать не будет.

[Pilot]

(16.01.2014 21:03:42)Admin писал(а):  Если Ваш хостинг не поддерживает PHP, то ничего не выйдет, т.к. для нормальной работы функции init_menu() тоже необходима поддержка PHP.
Сторонний хостинг тоже не поможет, т.к. необходима работа с сессиями, в которых при переходе на новые странички хранится id открытого пункта меню.
Так что в Вашем случае данная модификация скрипта работать не будет.

Вот не хорошо то как... Это получается, на Blogger вообще с такой функцией ни один вид меню работать не будет? Или просто этот скрипт не подойдет?

---

А с таким эффектом меню по принципу древа будет работать на таком блоге? И нет ли у вас в загашнике такого скрипта?

[Admin]

Не подойдет именно этот скрипт.

Думаю можно как-то при помощи Cookies обойтись без PHP, но это уже не сегодня, т.к. реализация будет сложнее.

[Pilot]

Понял. С нетерпением жду. Спасибо большое)

[Admin]

У меня для Вас хорошие новости. Теперь можно обойтись совсем без PHP.
Итак, для начала Вам понадобится скачать и распаковать файл jquery.cookie.rar

Он не обходим для работы с кукисами, в которые мы будем записывать открытый на данный момент пункт меню. Распакуйте его и не забудьте подключить сразу после подключения библиотеки JQuery:

Код:

<script type="text/javascript" src="jquery.cookie.js"></script>

Не забываем присвоить каждому элементу ul уникальный id (<ul id="2"> и т.д.).

Вместо JavaScript кода с функцией init_menu() используйте вот такой JavaScript код:

Код:

<script type="text/javascript">
$(document).ready(function() {
if ($.cookie('menu_id')>0) { $('#menu ul[id!='+$.cookie('menu_id')+']').hide(); }
else $('#menu ul').hide();

$('#menu li span').click(
function() {
    var checkElement=$(this).next();
    $.cookie('menu_id',$(this).next().attr("id"));
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; }
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
    }
}
);
});
</script>