Интернет-студия W&M

Верстка: Выпадающее меню вправо по клику с обработкой cookie

 07-09-2016      Комментировать      ВСЕ ЗАПИСИ



Верстка: Выпадающее меню вправо по клику с обработкой cookie

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

 

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

 

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

 

Пример посмотреть можно здесь: http://adeniumboom.ru/shop.html

 


Подключем JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

 


Подключем COOKIE

<script type="text/javascript" src="./design/scripts/jquery.cookie.js"></script><script type="text/javascript">
        $(document).ready(function () {
          var checkCookie = $.cookie("sub-nav");
          if (checkCookie != "") {
            $('#menu > li.sub > a:eq('+checkCookie+')').addClass('active').next().show();
          }
          $('#menu > li.sub > a').click(function(){
              var navIndex = $('#menu > li.sub > a').index(this);
              $.cookie("sub-nav", navIndex);
              $('#menu li ul').slideUp();
               if ($(this).next().is(":visible")){
                   $(this).next().slideUp();
               } else {
               $(this).next().slideToggle();
               }
               $('#menu li a').removeClass('active');
               $(this).addClass('active');
          });
            var checkCookie = $.cookie("sub-link");
          if (checkCookie != "") {
            $('#menu > li.sub > ul li a:eq('+checkCookie+')').addClass('active');
          }
            $('.sub ul li a').click(function(){
                var subIndex = $('.sub ul li a').index(this);
              $.cookie("sub-link", subIndex);
           $('.sub ul li a').removeClass('active');
           $(this).addClass('active');
        });
        });
    </script>

 


Подключем СТИЛИ

.menu-container{
width: 100%;
max-width: 1010px;
z-index: 100000;
position:relative;
height: 100%;
min-height: 320px;
}

.menu{
width: 100%;
background: #E7DFD0;
text-align: center;
position: absolute;
background: url('../css/podlozhka.png') top right no-repeat;
}

#menu {
width: 100%;
margin:0 auto;
padding: 0;
list-style: none;
overflow: hidden;
position: relative;
box-sizing: border-box; margin-left: 3px;
font-size:16px;
background: #E7DFD0;
}

#menu li a {
display:block;
position: relative;
padding:10px 15px;
text-decoration:none;
text-shadow: 0px 1px 1px #ffffff;
color:#4A372B;    
}

#menu li a:hover,
#menu li a.active {
background: #DCD1BA;
text-shadow: 0px 1px 1px #ffffff;
color:#E82436;
}

#menu li  {
background: rgb(231, 223, 208) none repeat scroll 0% 0%;
margin: 0px;
width: auto;
text-align: left;
max-width: 280px;
border-right: 1px solid #D4CBBA;
}

#menu li ul {    
z-index: 99;
display:none;
list-style: none;
margin: 0;
padding:0;
position:absolute;
left:280px;
top:0;
width: 70%;
width: 726px;
max-height: 350px;
min-height: 350px;
overflow: hidden;
background: #DCD1BA;
padding-top: 10px;
}

#menu li ul li {
background: none;
float: left;
width: 23%;
border-bottom: 1px solid #E7DFD0;
text-align: center;
margin:0 3px;
}    
    
#menu li ul li a {
font-size: 105%;
padding:5px 10px;
border-bottom: 1px solid #E7DFD0;
color: #4A372B;
}

#menu li ul li a:hover,
#menu li ul li a.active {
color:#E82436;
}

#menu li ul li ul li a {
font-size: 90%;
padding:1px 10px;
border-bottom: 0px solid #E7DFD0;
color: #4A372B;
text-decoration:underline;
}

#menu li ul li ul{    
z-index: 99;
display: block !important;
list-style: none;
margin: 0;
padding:0;
position:relative;
left:0;
top:0;
overflow: hidden;
}

#menu li ul li ul li {
background: none;
float: none;
border-bottom: 0px solid #E7DFD0;
text-align:left;
padding-left:10px;
}    

#menu li ul li ul li a:hover,
#menu li ul li ul li a.active {
color:#E82436;
}

/* переключатель */
#menu li.sub > a:before {
content:'';
height:6px;
width:6px;
display:block;
border:1px solid #606060;
border-right-width:0;
border-top-width:0;
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
position:absolute;
right:20px;
top:14px
}

/* активный переключатель */
#menu li.sub > a:hover:before,
#menu li.sub > a.active:before{
border:1px solid #E82436;
border-right-width:0;
border-top-width:0;
}

 

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media only screen and (max-width: 1100px) {

#menu {
width:99%;
margin:0 auto;
padding: 0;
list-style: none;
overflow: hidden;
}

#menu li {
max-width: 1100px;
width: 100%;
border-bottom: 1px solid #D4CBBA;
border-right: 0px solid #D4CBBA;
}

#menu li a {
display:block;
position: relative;
}

#menu li a:hover,
#menu li a.active {
}


#menu li ul {    
position:relative;
left:0;
top:0;
width: 100%;
max-height: auto;
min-height: auto;
padding-top: 10px;
}

#menu li ul li {
background: none;
float: none;
width: 100%;
border-bottom: 1px solid #E7DFD0;
text-align: center;
 margin:0 3px;
}


#menu li ul {
display:none;
list-style: none;
margin: 0;
padding:0
}


Верстка меню

<div class="menu-container">
<div class="menu">
             
<ul id="menu">

<li class="sub"><a href="#"><img src="content/files/catalog1/i001_1471990086.png" />  Семена</a>

         <ul>
         <li><a href="shop_catalog.html?cid=7">Адениумы</a>

                 <ul>
                 <li><a href="shop_catalog.html?cid=9">Адениум 1</a></li>
                 <li><a href="shop_catalog.html?cid=10">Адениум 2</a></li>
                 <li><a href="shop_catalog.html?cid=11>Адениум 3</a></li>
                 </ul>
        </li>
        <li><a href="shop_catalog.html?cid=8">Плюмерии</a>

                <ul>
               <li><a href="shop_catalog.html?cid=12">Плюмерии 1</a></li>
               </ul>
       </li>
       </ul>

</li>
<li class="sub"><a href="#"><img src="content/files/catalog1/i002_1471990094.png" />  Сеянцы</a>

       <ul>
      <li><a href="shop_catalog.html?cid=13">Новая категория</a></li>
      <li><a href="shop_catalog.html?cid=16">Новая категория</a></li>

      </ul>

</li>

<li class="sub"><a href="#"><img src="content/files/catalog1/i003_1471990102.png" />  Взрослые растения</a></li>
<li class="sub"><a href="#"> <img src="content/files/catalog1/i004_1471990109.png" />  Сопутствующие товары</a></li>
<li class="sub"><a href="#"><img src="content/files/catalog1/i005_1471990116.png" />  Наборы</a></li>

 </ul>
      
</div>
 </div>





нет комментариев

Добавить комментарий





ЗАПИСИ ИЗ БЛОГА