Создать ответ 
Sos! Как сделать чтобы меню не схлопывалось при переходе
Автор Сообщение
vladdddq Не на форуме
Рядовой
*

Сообщений: 7
У нас с: Nov 2014
Сообщение: #1
Sos! Как сделать чтобы меню не схлопывалось при переходе
Помогите, пожалуйста, есть выпадающее меню, которое схлопывается при переходе по одному из его пунктов, как сделать так чтобы выбранный пункт сохранялся при переходе на другую страницу

Код:
<script type="text/javascript">
        $(document).ready(function () {
            $('#cssmenu li.has-sub > a').on('click', function(){
                $(this).removeAttr('href');
                var element = $(this).parent('li');
                if (element.hasClass('open')) {
                    element.removeClass('open');
                    element.find('li').removeClass('open');
                    element.find('ul').slideUp();
                else {
                    element.addClass('open');
                    element.children('ul').slideDown();
                    element.siblings('li').children('ul').slideUp();
                    element.siblings('li').removeClass('open');
                    element.siblings('li').find('li').removeClass('open');
                    element.siblings('li').find('ul').slideUp();
                }
            });
            $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
        });
    </script>

Код:
<div id="cssmenu1">
    <div id='cssmenu'>
        <ul>          
           <li class='has-sub'><a class="radius" href='#'><span>Кафе/1</span></a>
              <ul>
                 <li class='has-sub'><a href='#'><span>1-1</span></a>
                    <ul>
                       <li><a href='1.html'><span>1-1-1</span></a></li>
                       <li><a href='2.html'><span>1-1-2</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>1-2</span></a>
                    <ul>
                       <li><a href='3.html'><span>1-2-1</span></a></li>
                       <li><a href='#'><span>1-2-2</span></a></li>
                    </ul>
                 </li>
              </ul>
           </li>          
        </ul>
        <ul >          
           <li id="s" class='s'><a class="radius1" href='#'><span>2</span></a>              
        </ul>
    </div>
  </div>
  </div>

Код:
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {
    border: 0 none;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    line-height: 1;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    
}


#cssmenu {
    color: #ffffff;
    font-family: Helvetica,Arial,sans-serif;
    width: 232px;
}
#cssmenu ul ul {
    display: none;
}
#cssmenu > ul > li > a {
    background: rgb(54,170,231); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(102,205,193,1) 0%, rgba(102,205,193,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba102,205,193,1), color-stop(100%,rgba(102,205,193,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(102,205,193,1) 0%,rgba(102,205,193,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(102,205,193,1) 0%,rgba(102,205,193,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(102,205,193,1) 0%,rgba(102,205,193,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(89,125,205,1) 0%,rgba(89,125,205,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36aae7', endColorstr='#1fa0e4',GradientType=0 ); /* IE6-9 */
    border-left: 1px solid #7593d8;
    border-right: 1px solid #7593d8;
    border-top: 1px solid #7593d8;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 20px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
    background: rgb(31,160,228); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(89,125,205,1) 0%, rgba(89,125,205,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(89,125,205,1)), color-stop(100%,rgba(89,125,205,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,rgba(89,125,205,1) 0%,rgba(89,125,205,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,rgba(89,125,205,1); 0%,rgba(89,125,205,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(89,125,205,1) 0%,rgba(89,125,205,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(89,125,205,1) 0%,rgba(89,125,205,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fa0e4', endColorstr='#1992d1',GradientType=0 ); /* IE6-9 */
    color: #eeeeee;
    /*rgba(89,125,205,1) Синий цвет кнопки   (102,205,193,1)*/
}
#cssmenu > ul > li.open > a {
    border-bottom: 1px solid #7593d8;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
    border-bottom: 1px solid #7593d8;         /*РАмка кнопки*/
}
.holder {
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}

.holder:after, .holder:before {
    content: "";
    display: block;
    height: 6px;
    position: absolute;
    right: 20px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
    width: 6px;
    z-index: 10;
}
.holder:after {
    border-left: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    top: 17px;
}
#cssmenu > ul > li > a:hover > span:after,
#cssmenu > ul > li.active > a > span:after,
#cssmenu > ul > li.open > a > span:after {
    border-color: #eeeeee;
}
.holder:before {
    border-left-color: inherit;
    border-left-style: solid;
    border-left-width: 2px;
    border-top-color: inherit;
    border-top-style: solid;
    border-top-width: 2px;
    top: 18px;
}
#cssmenu ul ul li a {
    background:#49505a;
    border-bottom: 1px solid #32373e;
    border-left: 1px solid #32373e;
    border-right: 1px solid #32373e;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    color: #eeeeee;
    cursor: pointer;
    font-size: 13px;
    padding: 10px 20px;
    text-decoration: none;
    z-index: 1;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
    background: none repeat scroll 0 0 #424852;
    color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
    -webkit-box-shadow: none;
    box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
#cssmenu ul ul ul li a {
    padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
    border-bottom: 0 none;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
    border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
    border-bottom: 0 none;
}
#cssmenu ul ul li.has-sub > a:after {
    border-left: 2px solid #eeeeee;
    border-top: 2px solid #eeeeee;
    content: "";
    display: block;
    height: 5px;
    position: absolute;
    right: 20px;
    top: 11.5px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
    width: 5px;
    z-index: 10;
    
}
#cssmenu ul ul li.active > a:after,
#cssmenu ul ul li.open > a:after,
#cssmenu ul ul li > a:hover:after {
    border-color: #ffffff;
}[/quote]
22.11.2014 17:36:32
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #2
RE: Sos! Как сделать чтобы меню не схлопывалось при переходе
Посмотрите в теме Скрипт раздвижного меню как мы это уже делали на PHP и на JQuery.
23.11.2014 15:49:15
Найти все сообщения Цитировать это сообщение
vladdddq Не на форуме
Рядовой
*

Сообщений: 7
У нас с: Nov 2014
Сообщение: #3
RE: Sos! Как сделать чтобы меню не схлопывалось при переходе
В той теме описано 2 варианта
через php и через cooki , какой как вы считаете лучше реализовать?
23.11.2014 16:56:42
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #4
RE: Sos! Как сделать чтобы меню не схлопывалось при переходе
Через PHP надежнее, т.к. cookie могут быть отключены.
23.11.2014 16:58:24
Найти все сообщения Цитировать это сообщение
vladdddq Не на форуме
Рядовой
*

Сообщений: 7
У нас с: Nov 2014
Сообщение: #5
RE: Sos! Как сделать чтобы меню не схлопывалось при переходе
*** Какой способ позволит сделать следующее
- Развернуть меню
- Выбрать пункт (например 1-1-1)
- Откроется страница 1-1-1 .
- На этой странице открыть ссылку и перейти на другую ( страницу-описание которой нет в меню) чтобы меню все еще было в том же положении
- потом вернуться на страницу 1-1-1 ( меню все еще в том же положении)
23.11.2014 17:04:07
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #6
RE: Sos! Как сделать чтобы меню не схлопывалось при переходе
В данном случае разницы в способах абсолютно нет. Главное грамотная реализация, т.к. на PHP идентификатор открытого пункта меню мы будем хранить в переменной сессии, а при использовании cookie - в cookie.
23.11.2014 17:50:55
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)



Mail.ru LiveInternet

© Copyright 2011-2016 by UsefulScript.ru