javascript - Responsive Menu Issues -
ok have no near enough knowledge on js know possibly be.
my navigation menu has stopped working in mobile.
if resize browser mobile desktop mobile menu shows menu icon 3 times, if repeat keeps duplicating, open , doesnt close after first time..
you can see live here qubecatering.com
i have no idea code be..
any great! im using flexymenu plugin, , use on many sites , never have issues.
here html:
<div class="flexy-menu"><ul id="menu-primary" class="flexy-menu"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-20"><a href="http://qubecatering.com/">home</a></li> <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://qubecatering.com/about/">about</a></li> <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://qubecatering.com/case-studies/">case studies</a></li> <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://qubecatering.com/services/">services</a></li> <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://qubecatering.com/contact/">contact</a></li> </ul></div> but here css:
.nav-wrapper { background-color:#ffffff; width:100%; height:auto; } .nav-inner { width:100%; max-width:960px; height:60px; display:block; margin-left:auto; margin-right:auto; margin-bottom:0px; } .nav-logo { height:60px; width:auto; display:inline-block; } /******************************************************************************* default configuration *******************************************************************************/ .flexy-menu { width: auto; margin:0; padding: 0; height:60px; position:relative; float:right; list-style: none; z-index: 99999; display:inline-block; } .flexy-menu li { display:inline-block; padding:0; float:right; position:relative; } .flexy-menu > li > { padding:23px 15px 5px 15px; height:32px; text-decoration:none; display:block; -webkit-transition:color 0.2s linear, background 0.2s linear; -moz-transition:color 0.2s linear, background 0.2s linear; -o-transition:color 0.2s linear, background 0.2s linear; transition:color 0.2s linear, background 0.2s linear; font-family: 'latoregular'; font-size:14px; color:#32455c; text-transform:uppercase; } .flexy-menu > li > a:hover, .flexy-menu > li > a:focus, .flexy-menu > li > a:active { background-color:#835db1; color:#ffffff; } /*----------------------------- drop down configuration -----------------------------*/ .flexy-menu ul, .flexy-menu ul li ul { list-style: none; margin-left: 5px; padding: 0; display: none; position: absolute; z-index: 99999; width: 200px; } .flexy-menu ul { top: 100px; left: 0; } .flexy-menu ul li ul { top: 0; left: 100%; } .flexy-menu ul li { clear:both; width:100%; border: none; font-size:12px; } .flexy-menu ul li { padding:15px 20px; width:100%; color:#dedede; font-size:13px; text-decoration:none; display:inline-block; float:left; clear:both; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transition:color 0.2s linear, background 0.2s linear; -moz-transition:color 0.2s linear, background 0.2s linear; -o-transition:color 0.2s linear, background 0.2s linear; transition:color 0.2s linear, background 0.2s linear; border-bottom: 1px solid rgba(61, 71, 82, 0.8); } .flexy-menu ul li a:hover { } /*----------------------------- drop down indicators -----------------------------*/ .flexy-menu > li .indicator{ position: absolute; color: #7995a7; top: 39px; right: 8px; font-size: 17px; } .flexy-menu ul > li .indicator{ top: 10px; right: 8px; } /*------------------ preset sizes ------------------*/ .thin > li > a{ padding: 10px 22px; } .thin ul{ top: 40px; } .thin > li .indicator{ top: 10px; } .thick > li > a{ padding: 40px 22px; } .thick ul{ top: 100px; } .thick > li .indicator{ top: 40px; } /*------------------------------------ collapsible menu configuration ------------------------------------*/ .flexy-menu > li.showhide{ display: none; width: 30%; height: 60px; cursor: pointer; } .flexy-menu > li.showhide span.icon{ margin: 23px 30px; float: right; } .flexy-menu > li.showhide .icon em{ margin-bottom: 4px; display: block; width: 25px; height: 3px; background: #aad730; } /***************************************************************************** responsive design *****************************************************************************/ @media screen , (max-width: 768px) { .flexy-menu { width: 50%; margin:0; padding: 0; position:absolute; top:0px; right:0px; list-style: none; } .flexy-menu li{ display: block; width: 100%; background-color:#ffffff; } .flexy-menu > li > a{ padding-top:15px; padding-bottom:30px; padding-left: 25px; border-bottom:1px solid #d3d3d3; } .flexy-menu li:hover > a, .flexy-menu li.active { border-bottom:1px solid #d3d3d3; } .flexy-menu a{ width: 100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .flexy-menu ul { top: 60px; left: 0; } .flexy-menu ul, .flexy-menu ul li ul{ position: static; } .flexy-menu ul li ul, .flexy-menu ul li { border-left: none; border-right: none; } .flexy-menu ul li a, .flexy-menu.vertical ul li { padding-top:15px; padding-bottom:15px; } .flexy-menu ul > li > a{ padding-left: 40px !important; } .flexy-menu > li .indicator{ top: 15px; right: 25px; font-size: 17px; } .flexy-menu ul > li .indicator{ display: none; } } here javascript:
$.fn.flexymenu = function(options){ var settings = { speed : 300, // dropdown speed (ms) type : "horizontal", // menu type arrangement align : "right", // menu alignment (horizontal type) indicator : false // indicator indicates submenu } $.extend( settings, options ); var bigscreen = false; if(settings.type == "vertical"){ $(".flexy-menu").addclass("vertical"); if(settings.align == "right"){ $(".flexy-menu").addclass("right"); } } if(settings.indicator == true){ var num = 0; $(".flexy-menu").find("li").each(function(){ if($(this).children("ul").length > 0){ $(this).append("<span class='indicator'>+</span>"); } }); } $(".flexy-menu").prepend("<li class='showhide'><span class='icon'><em></em><em></em><em></em></span></li>"); screensize(); $(window).resize(function() { screensize(); }); function screensize(){ $(".flexy-menu").find("li").unbind(); $(".flexy-menu").find("ul").hide(0); if(window.innerwidth <= 768){ showcollapse(); bindclick(); if(bigscreen == true){ rightalignmenu(); bigscreen = false; } } else{ hidecollapse(); bindhover(); if(settings.type == "horizontal" && settings.align == "right" && bigscreen == false){ rightalignmenu(); bigscreen = true; } } } function bindhover(){ $(".flexy-menu li").bind("mouseover", function(){ $(this).children("ul").stop(true, true).fadein(settings.speed); }).bind("mouseleave", function(){ $(this).children("ul").stop(true, true).fadeout(settings.speed); }); } function bindclick(){ $(".flexy-menu > li").bind("click", function(){ if($(this).children("ul").css("display") == "none"){ $(this).find("ul").slidedown(settings.interval); } else{ $(this).children("ul").slideup(settings.interval); } }); } function showcollapse(){ $(".flexy-menu > li:not(.showhide)").hide(0); $(".flexy-menu > li.showhide").show(0); $(".flexy-menu > li.showhide").bind("click", function(){ if($(".flexy-menu > li").is(":hidden")){ $(".flexy-menu > li").slidedown(300); } else{ $(".flexy-menu > li:not(.showhide)").slideup(300); $(".flexy-menu > li.showhide").show(0); } }); } function hidecollapse(){ $(".flexy-menu > li").show(0); $(".flexy-menu > li.showhide").hide(0); } function rightalignmenu() { $(".flexy-menu > li").addclass("right"); var menuwidth = $(".flexy-menu").width(); var menuitems = $(".flexy-menu").children("li"); $(".flexy-menu").children("li:not(.showhide)").detach(); for(var = menuitems.length; >= 1; i--){ $(".flexy-menu").append(menuitems[i]); } } }
the problem have there because appending things ".flexy-menu"class, if check html, see added class in 2 places, that's way it's duplicationg
<div class="flexy-menu"> <li class="showhide right" style="display: none;"><span class="icon"><em></em><em></em><em></em></span> </li> <ul id="menu-primary" class="flexy-menu" style=""> try removing element
edit
great! anyway recommend use approach next time. can use javascript toggle class on navigation bar , using css show , hide menu. it's simple
(function () { var navbar = document.queryselector('.nav-bar'), togglebutton = document.queryselector('.toggle-button'); togglebutton.addeventlistener("click", function () { navbar.classlist.toggle('active'); }); })(); 
Comments
Post a Comment