Navbar using HTML & CSS (Simple Navbar)

October 6, 2017 1:44 pm

We are creating a simple navigation with HTML & CSS with transition effect.We are creating a simple navigation with HTML & CSS with transition effect.

Here is the Files you can directly copy to your project

HTML

We have add html to our index file, so here is the code.


<!DOCTYPE html>
<html>
<head>
<title>Simple Navbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css"/>
</head>
<body>
<nav id="navbar">
<div class="container clearfix"><!--clearfix is added to just parent of a floating child-->
<div id="hamburger_icon" onclick="show()"><span></span><span></span><span></span></div>
<a href="" class="logo"><img src="images/logo.png"/></a>
<div id="overlay"></div>
<ul class=" nav_links clearfix" id="sliding_menu">
<li><span id="close" onclick="closeSlideMenu()"></span></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>

CSS

We have linked style.css to our html file and here is the code.

/*some common css*/

*{
	box-sizing:border-box;
}

body{
	margin:0;
	 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.container{
	max-width: 1170px;
	padding: 0px 15px;
	margin: 0 auto;
}
/*add some clearfix to nav so we have clearfix class*/
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}
/*some common css ends*/

nav{
	background: #f1f1f1;
	padding: 10px 0px;
}

nav .logo{
width: 40%;
float: left;
display: block;
}
nav .logo img{
	max-width: 217px;
}

nav .nav_links{
	float: right;
	width: 60%;
	margin: 5px 0;
}

nav .nav_links li{
	float: left;
	list-style: none;
}
nav .nav_links li a{
	display: block;
	text-decoration: none;
	padding: 5px 30px;
	color: #000;
	line-height: 32px;
	transition:all ease 0.5s;
	-webkit-transition:all ease 0.5s;
	-ms-transition:all ease 0.5s;
	-moz-transition:all ease 0.5s;
}
nav .nav_links li a:hover{
	background: #ccc;
}

If you want to know in detail, Please subscribe to our channel http://bit.ly/35lsaxQ