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;
}
