Для интеграции мобильного меню на jquery на свой сайт вставьте в вёрстку следующие коды соответственно. Также не забудьте подключить свежую версию jquery.
На стороне html:
|
1 2 3 4 5 6 7 8 9 10 |
<!-- Кнопка мобильного меню --> <div class="btn_mob_menu">Меню</div> <!-- Мобильное меню --> <div class="mob_plen"></div> <div class="mob_menu"> <ul class="menu"> <li><a href="#">Пункт меню</a></li> </ul> </div> |
css-стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/*Мобильное меню*/ body{ position: absolute; width:100%; margin:0; left:0; transition: left 0.3s; overflow-x: hidden; } .btn_mob_menu{ cursor: pointer; margin: 10px; width: 20px; } .btn_mob_menu img{ width: 25px; } .mob_menu{ width: 250px; background: white; position: fixed; left:-250px; top:0; bottom: 0; overflow: auto; z-index: 3000; transition: left 0.3s; } .mob_plen{ width: 100%; height: 100%; position: fixed; top:0; left: 0; background: rgba(0,0,0,0.5); display: none; z-index: 3000; } .mob_menu ul{ padding:0; margin:0; list-style: none; } .mob_menu li{ position: relative; } .mob_menu a{ display: block; padding: 10px 20px; border-bottom:1px solid lightgray; color:black; text-decoration: none; } .mob_menu>ul ul{ height: 0; overflow: hidden; } .hc_krug{ width: 15px; height: 15px; position: absolute; right: 5px; top: 13px; background: url(../img/krug.svg)no-repeat center center; background-size: 15px; transition:0.2s; } |
И javascript код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
//Объявляем состояние мобильного меню var menu; //Вызываем функцию скрытия мобильного меню при изменении размеров окна $(window).resize(function(){ var width = document.documentElement.clientWidth; if(width >= 768 && menu){ //481;768;992;1200; close_menu(); } }); //Функция закрытия мобильного меню function close_menu(){ $('body').css('left','0px'); $('.mob_menu').css('left','-250px'); $('body').css('overflow-y','auto'); $('.mob_plen').hide(); $('.btn_mob_menu img').attr('src','img/menu.png'); menu = false; } //Функция открытия мобильного меню function open_menu(){ $('body').css('overflow-y','hidden'); $('body').css('left','250px'); $('.mob_menu').css('left','0px'); $('.mob_plen').show(); $('.btn_mob_menu img').attr('src','img/close.png'); menu = true; } //Нажатие кнопки мобильное меню $('.btn_mob_menu').click(function(){ open_menu(); }); //Нажатие вне мобильного меню $('.mob_plen').click(function(){ close_menu(); }); //Нажатие на пункт мобильного меню $('.mob_menu a').click(function(){ $('ul').stop(true, true); element = $(this).parent(); sub = $(element).children('ul'); status = sub.css('height'); element.siblings('li').find('ul').animate({height: 0},200); if($('ul').is(sub)){ if(status=='0px'){ height = 0; $(sub).children().each(function(){ height += $('.mob_menu>ul>li').height(); }); sub.animate({height: height},200, function(){ $(this).css('height','auto'); }); }else{ sub.animate({height: 0},200); element.find('ul').animate({height: 0},200); } return false; } }); //Расставляем отступы в мобильном меню var vlog=''; while($('a').is('.mob_menu>ul>li>ul>li'+vlog+' a')){ $('.mob_menu>ul>li>ul>li'+vlog+' a').each(function(){ left = $(this).css('padding-left'); left = parseInt(left); $(this).css('padding-left',left+20); }); vlog +='>ul>li'; } |
Вы также можете скачать архив с файлами.
Комментарии и отзывы
Ещё нет комментариев к данной записи...