Рецидивные проблемы с меню

Хорошо, у меня нет, где достаточно знаний о JS, чтобы даже знать, что это может быть.Рецидивные проблемы с меню

Мое навигационное меню перестало работать на мобильных устройствах.

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

Вы можете видеть, что здесь живут qubecatering.com

Я понятия не имею, какой код это может быть ..

Любая помощь будет здорово! Я использую плагин flexymenu и использую его на многих сайтах и никогда не испытываю проблем.

Вот 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>

Но вот моя 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 > a { 
    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 a { 
    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 only screen and (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 a { 
     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 a { 
     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; 
    } 
}

Вот мой 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 that indicates a 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 i = menuItems.length; i >= 1; i--){ 
      $(".flexy-menu").append(menuItems[i]); 
     }  
    } 
}

источник

2015-04-22 lbollu

Вы могли бы показать свой html? –

Честно говоря, я не вижу необходимости в целом плагине для такой простой задачи. возможно, просто css и немного js для класса togglin сделают трюк. Я сделаю для вас скрипку –

@ DanielOrtiz Я обновил html для вас. – lbollu

Проблема у вас там происходит потому, что ваш добавляющим вещи в класс «.flexy-menu», но если вы проверите свой html, я вижу, что вы добавили этот класс в два места, это как это 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="">

попробуйте удалить его из элемента

Edit

Отлично! в любом случае я настоятельно рекомендую вам использовать другой подход в следующий раз. Вы можете просто использовать javascript для переключения класса на панели навигации и использования css для отображения и скрытия меню. Это так просто, как

(function() { 
    var navBar = document.querySelector('.nav-bar'), 
     toggleButton = document.querySelector('.toggle-button'); 


    toggleButton.addEventListener("click", function() { 
     navBar.classList.toggle('active'); 
    }); 
})();

источник

2015-04-22 15:47:05

Я поставил старое статическое html-меню на место и его работу отлично .. Не объясняет, почему его не так, как на других моих сайтах. Спасибо, что помогли мне :) – lbollu

Отлично! проверить обновление –

Рецидивные проблемы с меню

ответ

Смежные вопросы