Question

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

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

基本上当窗口调整到635px时，导航ul消失并出现一个菜单图标，此时CSS中的nav ul已设置为display：none。我需要在这里发生的是，当你点击菜单图标时，导航设置为显示块并向下滑动整个页面以显示导航（我希望这是有意义的！）这种技术用于很多响应式网站如今，但我不能为我的生活弄清楚如何做到这一点！

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

Answer 1

试试这个＆gt;＆gt;＆gt;

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/文字可以垂直居中对齐，请注意回复

Answer 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;
}

Answer 3

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

Answer 4

你需要加载一个设置为none的显示器，就像你现在所做的那样但使用一个类，让它命名为＃34; .hide＆＃34;，然后使用jQuery点击功能切换到了＃34; .show＆＃34;将显示设置为阻止的类。

CSS如下所示：

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

<强> jQuery的：

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

这是一个工作小提琴：

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

Answer 5

您使用未在页面加载中定义的变量#pull在页面加载期间不可见，窗口大小大于635，因此变量var pull = $('#pull');不是＆＃ 39; t定义，窗口宽度的变化除了你为酒吧所拥有的其他风格外，不会给你任何改变。

所以我建议您尝试更改脚本以便它会监听窗口宽度，并且只有在窗口宽度小于或等于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();
    }
});

如何创建响应式导航栏？

5 个答案: