A Navigation Bar is Important to build up a website. Today I will say how to make a nave bar. At first, you need 2 files like below:
- index.html
- style.css
You should copy the blow code and past it on your style.css file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>A simpal drop-down nav bar</title>
</head>
<body>
<!--Start of Main Menu Bar-->
<div class="manu-bar">
<ul>
<li><a class="active" href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#"><i class="fa fa-user"></i>About</a>
<!--Start of Sub menu bae-->
<div class="sub-manu-l">
<ul>
<li><a href="#">Mession</a></li>
<li><a href="#">Vesion</a></li>
<li><a href="#"></i>Teem</a></li>
</ul>
</div></li>
<!--End of Sub menu bae-->
<li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
<li><a href="#"><i class="fa fa-inr"></i>Privecy</a></li>
<li><a href="#"><i class="fa fa-clone"></i>Services</a>
<!--Start of Sub menu bae-->
<div class="sub-manu-l">
<ul>
<li><a href="#">Web-degin</a></li>
<li><a href="#">Tutarial</a></li>
<li><a href="#">Coding</a></li>
<li class="hover-me"><a href="#">Marketing<i style="margin-left: 5px;" class="fa fa-angle-right"></i></a>
<!--End of Sub menu bae-->
<!--Start of Sub-Sub menu bae-->
<div class="sub-manu-2">
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#"></i>E-mail Marketing</a></li>
</ul>
</div></li>
<!--Start of Sub-Sub menu bae-->
</ul>
</div></li>
<!--End of Sub menu bae-->
<li><a href="#"><i class="fa fa-edit"></i>Traning</a></li>
<li><a href="#"><i class="fa fa-users"></i>Clients</a></li>
</ul>
</div>
<!--End of Main Menu Bar-->
</body>
</html>
You should copy the blow code and past it on your style.css file.
/*Style of body*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-image: url(image.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
/*Style Of Nav bar*/
.manu-bar{
background-color: green;
text-align: center;
}
.manu-bar ul{
display: inline-flex;
list-style: none;
color: #fff;
}
.manu-bar ul li{
padding: 15px;
}
.manu-bar ul li a{
text-decoration: none;
color: #fff;
padding: 15px;
}
.active, .manu-bar ul li a:hover{
background-color: #2bab0d;
}
/*Style of Nav icon*/
.manu-bar .fa{
margin-right: 8px;
}
/*Style of Sub-Menu*/
.sub-manu-l{
display: none;
}
.manu-bar ul li:hover .sub-manu-l{
display: block;
position: absolute;
background: rgb(0,100,0);
margin-top: 15px;
margin-left: -15px;
}
.manu-bar ul li:hover .sub-manu-l ul{
display: block;
margin: 10px;
}
.manu-bar ul li:hover .sub-manu-l ul li{
padding: 10px;
border-bottom: 1px solid gray;
background: transparent;
border-radius: 0;
text-align: left;
}
.manu-bar ul li:hover .sub-manu-l ul li:last-child{
border-bottom: none;
}
.manu-bar ul li:hover .sub-manu-l ul li a:hover{
color: #b2ff00;
background-color: transparent;
}
/*Style of Sub-Sub-Menu*/
.sub-manu-2{
display: none;
width: 200px;
}
.hover-me:hover .sub-manu-2{
position: absolute;
display: block;
margin-top: -40px;
margin-left: 130px;
background: rgb(0,100,0);
}
Now it is time to just enjoy.
){kind=link}
0 Comments
Thanks for your important comments. If this is your problem I will try to sloved this.