如何创建响应式导航栏？答案

【问题标题】：How do I create a responsive navigation bar?如何创建响应式导航栏？
【发布时间】：2014-04-13 03:10:16
【问题描述】：

我无法让我的网站响应，我已经为所有页面完成了它，只需要完成我的导航。

可以在 www.christierichards.co.uk/gcc_website/index.php 看到

基本上，当窗口缩小到 635px 时，nav ul 会消失并出现一个菜单图标，此时在 CSS 中，nav ul 已设置为 display:none。我需要在这里发生的是，当您单击菜单图标时，导航设置为显示块并向下滑动整个页面以显示导航（我希望这是有道理的！）这种技术用于许多响应式站点如今，但我一生都无法弄清楚该怎么做！

我希望有人可以帮助我！谢谢

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

试试这个>>>

CSS:
ul > li { 
width: 24.5%; /*important*/
height: 50px;
background-color:#000;
color:orange;
float: left;
margin-left: 0.5%; /*important*/
list-style-type: none;
}
ul{margin:0px;padding:0px;} /*important*/

HTML:
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
<li>NAV4</li>
</ul>

这会根据浏览器大小调整大小。请回复评论。 http://jsfiddle.net/S4TcF/ 文字可以垂直居中，也可以水平居中，请回复评论

【讨论】：

【解决方案2】：

你需要做两件事 -

1.在菜单按钮上挂一个事件来打开/关闭导航（我看到你使用的是jQuery，所以你可以设置

$("#pull").on("click", function(){
  $("#nav-bg").toggleClass("vertical")});

2.设置 CSS 定义以匹配您要添加的类 - 类似于：

div#nav-bg.vertical {
    height: auto;
    background: blue;
}
.vertical ul {
    display: block;
}
.vertical nav li {
    display: block;
    float: none;
}
.vertical nav li a {
    display: block;
}
.vertical nav {
    background: blue;
}

【讨论】：

【解决方案3】：

为#pull 添加onClick 事件并使用jQuery slideUp/slideDown 方法在#nav-bg ul 上切换显示。

【讨论】：

欢迎来到 StackOverflow。您会发现显示编码细节的答案（通常至少几行）会得到更好的响应。

【解决方案4】：

您需要像现在一样将显示设置为 none 来加载它，但是使用一个类，我们将其命名为“.hide”，然后使用 jQuery 单击功能切换到具有显示设置为阻止。

CSS 如下所示：

.show {display:block;}
.hide {display:none;}

jQuery：

$("#pull").click(function(){
$("#nav-menu").toggleClass('show');
});

这是一个有效的小提琴：

http://jsfiddle.net/22sSj/6/

【讨论】：

【解决方案5】：

您使用未在页面加载中定义的变量 #pull 在窗口大小大于 635 的页面加载期间不可见，因此未定义变量 var pull = $('#pull');，并且除了您为栏设置的其他样式之外，更改窗口宽度不会给您带来任何变化。

所以我建议您尝试更改脚本，使其能够监听窗口宽度，并且仅当窗口宽度小于或等于 636 像素时才会执行此函数。

var winWidth = $(window).width();
$(window).rezise(function(){
    if(winWidth <= 635){
    addPull();
    }
});

function addPull(){
    menu        = $('nav ul');
    menuHeight  = menu.height();

    $(document).on('click','#pull' function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
}
$(document).ready(function(){
    if(winWidth <= 635){
    addPull();
    }
});

【讨论】：