How to create side navigation menu
How to create side navigation menu
Side navigation menu is menu which placed either on the
left side of the or on the right side on the page.
so today we are going to create it .
How to build
- First create a div and inside div create ul .
- Now add <li> you want and inside <li> add <a> tag.
- Add style and you will get this.
Here is the code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
padding :0;
margin :0;
font-family: Arial, Helvetica, sans-serif;
}
.side-nav
{
position :fixed ;
display :block;
width :300px;
height :100%;
box-shadow:0 0 8px 8px rgba(0,0,0,0.2);
overflow-x:hidden ;
}
.side-nav ul{
display :block ;
padding :0;
}
.side-nav ul li
{
list-style-type :none ;
margin-left :10px;
}
.side-nav ul li img{
position :relative ;
bottom:-5px;
width :20px;
height :20px;
padding-right :5px;
}
.side-nav ul li a{
display :block;
text-decoration :none;
width :100%;
height :40px;
line-height :40px;
background :#fff;
border-bottom :1px solid #ddd ;
color:#222;
font-weight :bolder;
}
.side-nav ul li a:hover{
background-color: beige;
}
</style>
</head>
<body>
<div class="side-nav">
<ul>
<li><a href="#" ><img src="https://static.thenounproject.com/png/108859-200.png">Posts</a></li>
<li><a href="#" ><img src="https://cdn0.iconfinder.com/data/icons/rounded-basics/24/rounded__menu-512.png">Pages</a></li>
<li><a href="#" ><img src="https://tse1.mm.bing.net/th?id=OIP.keyf0olDMGJi5Mo2YimGcwHaHa&pid=Api&P=0&w=300&h=300">Stats</a></li>
<li><a href="#" ><img src="https://tse4.mm.bing.net/th?id=OIP.rmw0t5FBAokjoO9k26TCmAHaHa&pid=Api&P=0&w=300&h=300">Setting </a></li>
<li><a href="#" ><img src="https://tse2.mm.bing.net/th?id=OIP.BKw-WDfDVAeZ6_ZtvnL6SgHaHa&pid=Api&P=0&w=300&h=300">About Us </a></li>
</ul>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Comments
Post a Comment