自适应手机端下拉导航设置代码

在我们做网站移动端(手机端)页面自适应匹配的时候，页面头部的导航栏部分大多数情况下是和电脑端不一样的，尤其是在样式方面，为了更好的提高用户在手机端的体验，我们不妨来做一个兼容手机端和电脑端或者单独兼容手机端浏览的下拉式导航。

制作方法一：

1. 首先，在页面头部做移动端适配声明，代码如下：

   <meta name="viewport" content="width=device-width, initial-scale=1">

2. 然后，相关的CSS代码，如下：

   #nav {
width:100%;
margin:0px auto;
}
.close-nav {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
visibility: hidden;
transition: 0.5s;
z-index: 88;
}
.nav-open {
transform: translate(0);
}
.close-open {
opacity: 0.5;
visibility: visible;
}
#nav .nav-button {
width: 35px;
height: 35px;
border-radius: 3px;
background: #333;
color: #fff;
position: absolute;
right: 10px;
top: 10px;
line-height: 35px;
text-align: center;
font-size: 20px;
}
#nav .nav-button {
display: none;
}
nav li {
float: left;
position: relative;
list-style:none;
}
nav li>a {
padding:43px 20px;
margin:0 10px;
text-transform: uppercase;
display: block;
font-weight: 600;
text-align: center;
transition:0.5s;
}
nav li:hover>a {
color: rgb(69, 155, 216);
}
@media screen and (max-width: 480px) {
.warper {
padding:0 0px;
height:55px;
}
nav {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 240px;
box-shadow: 0 3px 5px #666;
z-index: 99;
overflow: auto;
background: #e5e5e5;
transform: translate(-300px);
transition: 0.3s;
margin-right: 0;
float: none;
}
.nav-open ul {
margin:0px;
padding:0px;
}
nav li {
float: none;
}
nav li>a {
margin:0;
padding: 15px;
text-align: left;
}
nav li>a:hover {
background: #189851;
color: #fff;
}
#nav .nav-button {
display: block;
top: 18px;
}
}


3. 接着，编写相应的html代码。

   <div id="nav">
<div class="warper">
<div id="nav-button" class="nav-button"><b>三</b></div>
<nav>
<ul>
<li ><a href="/">导航1</a></li>
<li ><a href="/">导航2</a></li>
<li ><a href="/">导航3</a></li>
<li ><a href="/">导航4</a> </li>
<li ><a href="/">导航5</a> </li>
<li ><a href="/">导航6</a></li>
</ul>
</nav>
<div id="close" class="close-nav"></div>
</div>
</div>


4. 最后，加入相应的js代码调试预览，预览地址：https://www.dajianbiji.com/test/Navigation-adaptation/Navigation-adaptation.html，这里的js代码有两个，都是通过调用的方式，具体js代码可以在预览页面中获取，该方法的优点是用一个导航内容就可以同时适配手机端和电脑端，样式和内容根据自己需要修改，缺点是需要引进额外的js。

制作方法二：

1. 首先，在页面头部做移动端适配声明，代码同第一种方法。
2. 然后，相关的CSS代码，如下：(重要的部分已做注释)

   <style type="text/css">
.menuflod {
display: block;
width: 20%;
float: right;
}/*下拉导航标识位置设置*/
.menuflodh {
float: right;
font-size: 1rem;
margin: 32px 5px 0px 0px;
}/*下拉导航整体标识大小设置*/
.menuflod span {
display: block;
background-color: #666;
width: 1.2em;
height: 0.15em;
border-radius: 1px;
margin: 0.3em;
}/*下拉导航标识样式设置*/
.flodmenu {
display: none;
width: 100%;
height: auto;
float: left;
}/*下拉导航整体内容样式设置*/
.flodmenu ul {
list-style: none;
margin:0px;
padding:0px;
}
.flodmenu ul li {
width: 100%;
height: auto;
float: left;
border-bottom: 1px solid #eee;
}
.flodmenu ul li a {
display: block;
width: 98%;
font-size: 0.875rem;
line-height: 34px;
color: #333333;
padding-left: 2%;
}/*下拉导航文字链接内容样式设置*/
</style>


3. 接着，编写相应的html代码，根据需要写出相应导航名称等。

   <!--下拉导航标识代码-->
<div class="menuflod">
<div id="menuflodh" class="menuflodh"> <span></span> <span></span>
<span></span> </div>
</div>
<!--下拉导航菜单代码-->
<div id="flodmenu" class="flodmenu" style="display: none;">
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单五</a></li>
</ul>
</div>


4. 最后，通过js，控制用户点击图标时弹出下拉菜单。

   <script type="text/javascript">
document.getElementById("menuflodh").onclick=function(){
if(flodmenu_display=document.getElementById('flodmenu').style.display=='block') {
document.getElementById('flodmenu').style.display='none';
}
else{
document.getElementById('flodmenu').style.display='block';
}
}
</script>


通过以上代码设置，我们就可以实现适配手机端的下拉导航菜单，这种方法代码比较简单，不用额外加载其它Js代码，也更加灵活，可以单独设置电脑端和手机端导航内容，缺点是不兼容电脑端，电脑端需要另外重新再建一个导航，会出现导航内容重复的情况，所以大家根据需要选择。