<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "Width=750,user-scalable=no"/>
<title> Navigation bar </title>
<link rel= "stylesheet" href= "Css/nav.css"/>
<body>
<nav class= ' nav-sub ' >
<ul>
<li><a href= "" >></a></li>
<li><li>
<div class= "btn Show" >
<span></span>
<span></span>
<span></span>
</div>
</li>
</ul>
<section class= "Sub-nav-list" >
<ul>
<li>
<a href= "" > Home 1</a>
</li>
<li>
<a href= "" > Home 2</a>
</li>
<li>
<a href= "" > Home 3</a>
</li>
<li>
<a href= "" > Home 4</a>
</li>
<li>
<a href= "" > Home 5</a>
</li>
<li>
<a href= "" > Home 6</a>
</li>
</ul>
</section>
</nav>
<script src= "Js/jquery-2.1.0.js" type= "Text/javascript" charset= "Utf-8" ></script>
<script type= "Text/javascript" >
$ (". Btn"). Click (function () {
$ (". Sub-nav-list"). Slidetoggle (100);
$ (this). Toggleclass (' show ');
})
</script>
</body>
Style
*{
margin:0;
padding:0;
border:0;
}
ul,li{
List-style:none;
}
nav{
Overflow:hidden;
Background:gold;
Why Display:inline-block; set li.33.33% also extrusion, is because no UL font set 0;
>ul{
width:100%;
padding:0px 20px;
Box-sizing:border-box;
font-size:0px;
>li{
Display:inline-block;
width:33.33%;
height:100px;
line-height:100px;
Text-align:center;
font-size:30px;
Color:white;
>a{
Float:left;
Text-decoration:none;
}
>div.btn{
Float:right;
margin-top:20px;
width:50px;
position:relative;
>span{
Display:block;
width:50px;
height:3px;
Background:darkgoldenrod;
margin-top:10px;
Transition:all 0.4s;
}
}
>div.show{
margin-top:40px;
>span:first-child{
Transform-origin:center Center;
Position:absolute;
left:0;
right:0;
top:0;
bottom:0;
Margin:auto;
Transform:rotate (45DEG);
}
>span:nth-child (2) {
Display:none;
margin:0;
}
>span:last-child{
Position:absolute;
left:0;
right:0;
top:0;
bottom:0;
Margin:auto;
Transform:rotate ( -45DEG);
}
}
}
}
>section{
>ul{
font-size:0px;
>li{
width:33.33%;
margin-bottom:20px;
Display:inline-block;
border:1px solid red;
font-size:16px;
Text-align:center;
Box-sizing:border-box;
}
}
}
}
Mobile Nav nav Bar