如何创建响应式导航栏？

我很难让网站响应，我已经完成了所有的页面，只需要完成我的导航。如何创建响应式导航栏？

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

基本上当调整窗口大小到635px的资产净值UL消失，出现一个菜单图标，在CSS在这点导航ul已被设置为显示：无。我需要在这里发生的是，当你点击菜单图标时，导航被设置为显示块并滑动整个页面以显示导航（我希望这是有道理的！）这种技术与很多响应站点现在，但我不能为我的生活弄清楚如何做到这一点！

我希望有人能帮助我！谢谢

来源

2014-04-12 user3527456

试试这个

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/文本可垂直居中对齐和horiziontaly请评论回该

来源

2014-04-12 18:35:30

你需要做两件事情 -

1.Hang上的菜单按钮的事件，打开/关闭导航（我看你”重新使用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; 
}

来源

2014-04-12 18:36:43 lyosef

添加的onClick前夕nt for #pull并使用jQuery slideUp/slideDown方法在＃nav-bg ul上切换显示。

来源

2014-04-12 18:36:44 slashsharp

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

您需要将显示设置为none，然后使用一个类，我们将其命名为“.hide”，然后使用jQuery点击功能切换到“.show”类将显示器设置为阻止。

CSS看起来像这样：

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

的jQuery：

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

这里是工作提琴：

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

来源

2014-04-12 18:55:51

您使用的变量未在页面加载中定义，您的页面加载时页面加载中不可见#pull，因为窗口大小大于635，所以未定义变量var pull = $('#pull');，并且更改了窗口宽度不会给你任何改变，除了你已经为酒吧的其他风格。

因此，我建议您尝试更改脚本，以便侦听窗口宽度，并仅在窗口宽度小于或等于636px时才会执行此功能。

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(); 
    } 
});

来源

2014-04-12 19:10:16 Michael

如何创建响应式导航栏？

回答

相关问题