How to Create a Navigation Menu Without Bootstrap

Menu is the most important part of the every website and every web programmer & designer firstly create menu for website so today i will create the navigation menu without bootstrap and js query & you have the basic knowledge of html and css for making navigation menu.

In html external css use and also use <nav> element instead of <div> element (tag) because <nav> tag is newer in html 5 than <div> tag but you have write <!doctype html> tag at the top of the website or webpage without this you can’t use nav tag in website.

HTML CODE
Index.html
Download
<?!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation Menu</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">PYTHON</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">JS</a></li>
</ul>
</nav>
</body>
</html>
CSS CODE
Style.css
Download
@charset "utf-8";
/* CSS Document */

nav{
		display:block;
		background-color:steelblue;
		width: 60%;
		height: 4rem;
		text-align: center;
		border-radius: 20px;
}
nav ul{
		display:flex;
		width:auto;
		height: 100%;
		list-style: none;
	    margin-right: auto;
		align-items:center;
/*		justify-content:space-between;*/
}
	
nav ul li
 {
		width: 120px;
		margin: 15px;
		padding: 15px;

 }
	
li:before
{
  display: flex;
  right: 50%;
  bottom: 0;
  width: 0px;
  height: 2px;
  background-color:white;
    -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; 

}
li:after
{
  display: flex;
  width: 0px;
  left: 50%;
  content: "";
  bottom: 0;
  height: 2px;
  background-color:white;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; 
 }
li:hover {
   background-color:slategray;
   border-radius: 5px;
   opacity: 0.9;
 }
li:hover:before,	
li:hover:after
{
  width: 100%;
}
nav ul li a {
 color:whitesmoke;
 text-decoration: none;
 font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
 font-size: 18px;
 }

Leave a Reply