如何为移动设备制作导航栏

Question

我需要使按钮显示导航栏并在不需要时隐藏它的代码，例如 apple.com 中的代码。到目前为止，这是我的代码，请指出任何错误或改进！我可以补充一点，这是针对移动设备的！

.nav {
background: -webkit-linear-gradient(top left, #3c8dbc 0%, #307196 100%);
background: linear-gradient(to bottom right, #3c8dbc 0%, #307196 100%);
width:150%;
height:14%;
position:fixed;
left:0;
top:0;
list-style-type:none;
text-decoration:none;
}

.nav ul li {
list-style-type:none;
text-decoration:none;
color:white;
padding:2%;
font-size:80%;
list-style-position: inside;
display:inline-block;
background-color:#63A4C9;
border:2px solid white;
width:10%;
width:60%;
top:14%;
left:0;
}

.nav a:link {
color:white;
padding:1%;
padding-left:2%;
text-decoration:none;
list-style-position: inside;
list-style-type:none;
}
.nav a:hover {
background-color:white;
color:#3c8dbc;
}
.nav a:active {
color:white;
background-color:#3c8dbc;
}
.nav a:visited {
color:white;
background-color:#3c8dbc;
}

谢谢:)

Answer 1

您可以写一些 JQuery 来做到这一点。看看这个例子

.nav{display:none;} /*Add these in your CSS */
.stacked{
   position:relative;
   z-index:9999;
   border:1px solid #ccc;
   color:#ccc;
   padding:5px;
   width:36px;
   background:#000
}

小 JQuery :

<script>
$(document).ready(function(){
  $(".stacked").click(function(){
    $(".mobile").toggle(100);
  });
});

最后 HTML

<div class="stacked">Menu</div>
<div class="nav mobile">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

添加 JQuery（如果还没有）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

如何为移动设备制作导航栏

how to make a navigation bar for a mobile device

javascript

css

navigation

web