javascript - 为移动 View 制作隐藏菜单

Question

我做了一个单页样式布局的网站导航，希望有人能帮我做导航的移动布局。

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

非常感谢您的帮助!

我的 fluid.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) {}

/* 桌面布局:769 像素到最大 1232 像素。从以下位置继承样式:移动布局和平板电脑布局。 */

@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', '');
    }
  });