响应菜单发出

（首先我想道歉，如果我的英语不好，有时，我是法国人，所以它有点难以解释一切细节）响应菜单发出

我工作的一个个人网站，但我的响应式导航遇到了问题。

我做了1024像素以下屏幕尺寸的媒体查询。

当我超过1024像素，我有我的常规导航栏列表。当我在1024像素以下时，我得到了出现的小菜单徽标，并且点击事件使整个菜单出现并消失。

但问题是，如果我的菜单关闭，我扩大我的窗口超过1024像素，列表不可见，我不知道如何处理这个问题。

这里是我的代码：

 <nav class="fixed_nav"> 
     <div id="nav_left"> 
      <img id="logo_nav" src="img/mini_trombi.png" alt="logo"/> 
      <p id="txt_nav">123</p> 
     </div> 
     <ul class="topnav"> 
      <div id="show_n_hide_nav" class="responsive_link_bg"> 
       <li><a id="top_nav_link" class="nav_links" href="#">ITEM 1</a></li> 
       <hr class="responsive_separator"> 
       <li><a class="nav_links" href="#">ITEM 2</a></li> 
       <hr class="responsive_separator"> 
       <li><a class="nav_links" href="#">ITEM 3</a></li> 
      </div> 
      <li class="icon"> 
       <a div id="button_nav" class="menu_icon" href="javascript:void(0);">&#9776;</a> 
      </li> 
     </ul> 
    </nav>

jQuery的为点击：

$(function(){ 
    $("#button_nav").click(function() { 
     if(!$("#show_n_hide_nav").is(":visible")){ 
      $("#show_n_hide_nav").slideDown("slow"); 
     } else { 
      $("#show_n_hide_nav").slideUp("slow"); 
     } 
    }); 
});

在我的CSS，我隐藏下1024个像素的原始列表，并使用jQuery时的帮助下表现出来用户点击菜单标志。

再一次，很抱歉，如果它很难理解。

来源

2016-07-06 mnX_87

除此之外......你的HTML无效'ul'元素只允许'li'作为直接子元素 – DaniP

包括你的css也是一个好主意;-) – empiric

Woops，没有看到！感谢DaniP！ –

后您解决无效的HTML，你可以试试这个：

的问题是从jQuery的的slideUp/Down功能设置内嵌的display属性元素本身，那么当你slideUp和调整浏览器的元素仍然是隐藏与内联样式：

<li id="show_n_hide_nav" class="responsive_link_bg" style="display: none;">

你可以解决它增加这个mediaquerie给力的元素是块超过1024：

@media (min-width:1025px) { 
    #show_n_hide_nav { 
    display: block !important; 
    } 
}

Check this example Fiddle

来源

2016-07-06 19:28:25 DaniP

哦，完美！非常感谢你！ :) –

很高兴帮助U @ mnX_87 – DaniP

您最好切换类并添加css转换以进行幻灯片效果，如果您高于1024，则忽略show类。

$("#button_nav").click(function() { 
    $("#show_n_hide_nav").toggleClass("show"); 
});

如果你仍然想使用slideDown()/slideUp()，你必须绑定$(window).resize()事件，并检查窗口高于/ 1,024像素下。

来源

2016-07-06 19:23:20

谢谢，我会尽力的！ :) –

$(function(){ 
    $("#button_nav").click(function() { 
     if(!$("#show_n_hide_nav").is(":visible")){ 
      $("#show_n_hide_nav").slideDown("slow"); 
     } else { 
      $("#show_n_hide_nav").slideUp("slow"); 
     } 
    }); 
}); 
$(window).resize(function(){ 
    if($(window).width() > 1024){ 
     $("#show_n_hide_nav").show(); 
    } 
});

在窗口调整大小，你必须检查窗口的大小和显示导航。

来源

2016-09-05 11:43:02

响应菜单发出

回答

相关问题