Question

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

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

我真的很感激你的帮助！

我在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) {}

/ *桌面布局：769px到最大1232px。继承以下样式：移动布局和平板电脑布局。 * /

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

为移动视图制作隐藏菜单

1 个答案: