导航是前端开发中避免不了的一个区域,今天就来写写导航栏。
导航栏(一)
<div id='menu'>
<a href="#">链接</a>|
<a href="#">链接</a>|
<a href="#">链接</a>|
<a href="#">链接</a>|
<a href="#">链接</a>
</div>
*{margin:0;padding:0}
#menu{
min-width:400px;
height:2rem;
background:#06f;
text-align:center;
line-height:2rem;
font-size:1rem;
}
#menu a{
padding:0 1rem;
color:#000;
text-decoration:none;
font-weight:bold
}
#menu a:hover{color:#FFC0CB}
导航栏(二)
<ul id="menu">
<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>
<li><a href="#">首页</a></li>
</ul>
*{margin:0;padding:0}
body{min-width:500px;}
li{list-style:none}
body{text-align:center}
a{text-decoration:none}
a:hover{color:#BA2636}
#menu{ width:100%; height:3.75rem; background:#00A2CA;}
#menu li{display:inline; height:3.75rem}
#menu li a{display:inline-block; padding:0 1.25rem; height:3.75rem; line-height:3.75rem;
color:#FFF;font-weight:bold;font-size:1rem}
#menu li a:hover{background:#0095BB}
移动端底部滑动导航栏(三)
测试时候需要调成移动端
<div id="nav">
<footer id="footer">
<div class="flex">
<div class="top" ></div>
<div class="bottom" >首页</div>
</div><div class="flex">
<div class="top" ></div>
<div class="bottom" >首页</div>
</div><div class="flex">
<div class="top" ></div>
<div class="bottom" >首页</div>
</div><div class="flex">
<div class="top" ></div>
<div class="bottom" >首页</div>
</div><div class="flex">
<div class="top" ></div>
<div class="bottom" >首页</div>
</div><div class="flex">
<div class="top" ></div>
<div class="bottom" >首页</div>
</div><div class="flex">
<div class="top" ></div>
<div class="bottom" >首页</div>
</div>
</footer>
</div>
*{ margin: 0;padding: 0;}
#nav{
width: 100%;
height: 4rem;
position: fixed;
bottom: 0;
margin: 0 0 0.625rem 0;
}
#footer
{
width: 100%;
white-space: nowrap;
overflow-x: auto;
cursor: pointer;
}
/*将容器分为上下2部分*/
#footer .flex
{
width: 5rem;
height: 4rem;
display: inline-block;
border: 1px solid #808080;
}
.top{
width: 100%;
height: 3rem;
background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4075723771,1234971875&fm=27&gp=0.jpg") center center no-repeat;
background-size: 100% 100%;
}
.bottom{
width: 100%;
height: 1rem;
line-height: 1rem;
text-align: center;
}
响应式导航栏
<header>
<nav class="nav">
<input type="checkbox" id="toggle" class="toggle"/>
<label for="toggle">
<span class="menu-icon">
<svg viewBox="0 0 18 15" width="18px" height="15px">
<path fill="white" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
<path fill="white" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
<path fill="white" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
</svg>
</span>
</label>
<ul class="list">
<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>
</div>
</nav>
</header>
*{margin:0;padding:0}
.nav{background:#abc;height:3rem;display:block}
.list{z-index:0;display:block;}
li{list-style:none;float:left;margin-left:2rem;}
a{text-decoration:none;color:#fff;line-height:3rem;}
a:hover{color:#FFC0CB}
input:checked~.list{
position:absolute;
padding:0 0.3rem 0.3rem 0.3rem;
display:block;
background: #abc;
z-index:0;
margin-top:3rem;
}
input:checked~.list li{clear:both;background: #abc;}
label{display:none}
.toggle{display:none}
@media screen and (max-width:500px) {
.toggle{display:none}
label{display:block;z-index:4}
.list{display:none;margin-left:0;}
li{margin-left:0;}
.meun-icon{display: block;float: left; }
.menu-icon>svg path{fill: white; }
label[for="toggle"] {
display: block;
float:left;
z-index:2;
cursor:ponter;
line-height:3rem;
margin-left:1rem
}
}