为移动视图制作隐藏菜单

Question

我已经为单页样式布局制作了一个网站导航，我希望有人可以帮助我进行导航的移动布局。

导航在更大的屏幕上看起来不错，但我想隐藏移动视图的所有菜单项，除非您单击它。单击（也在触摸屏中）后，所有菜单项都会显示。

非常感谢您的帮助！

我的流体.css 中有这个

#nav {
background-color:#fff;
clear: both;
float: left;
margin-left: 0;
width: 100%;
min-height:40px;
display: block;}

#nav ul {
    padding-top:8px;
    margin:auto;
    text-align:center;
    list-style-type:none;
}
#nav ul li {
    display: inline;
    border-right: 1px solid #e6e6e6;
    padding: 6px 26px 8px 26px;
    margin: 0;
}
#nav ul li:first-child {
border-left: 1px solid #e6e6e6;
}

#nav a {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
color: #515151;
font-weight: 300;
text-decoration: none;
text-transform: uppercase;
}

#nav a:visited {
color: #515151;
}

#nav a:hover {
color: #000;
}

/从移动布局继承样式/

@media only screen and (min-width: 481px) {}

/* 桌面布局：769px 到最大 1232px。继承样式：Mobile Layout 和 Tablet Layout。 */

@media only screen and (min-width: 769px) {}

我还使用来自http://labs.anthonygarand.com/sticky 的粘性导航 它也需要最新的

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Answer 1

$(window).on('load resize', function(){
    if($(window).width() <= 480 ){
        $("#nav").sticky({topSpacing:0}); //do stuff for mobile screens here
    }
    else{
        $("#nav").attr('style', '');
    }
  });