CSS Navigation


Creating navigation bar using CSS

Step-1:

Create items of navigation bar as items of unordered list

<!DOCTYPE html>
<html>
<head>
<title>
CSS NAVIGATION
</title>
</head>
<body>
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>VIDEOS</li>
<li>TRENDING</li>
</ul>
</body>
</html>

Output:

Step-2:

Align list items in single line and remove disc symbol and add style to links.

<!DOCTYPE html>
<html>
<head>
<style>
ul.min{
list-style-type:none;
margin:0;
padding:0;
}
ul.min li{
float:left;
}
ul.min li a{
border:1px solid black;
display: block;
padding:10px;
background-color: blue;
color:white;
text-decoration: none;
}
</style>
<title>
CSS NAVIGATION
</title>
</head>
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">VIDEOS</a></li>
<li><a href="#">TRENDING</a></li>
</ul>
</body>
</html>
In place of # mention address of page that is to be opened after clicking this menu.

Output:





Step-3:

Making CSS links responsive when mouse cursor is placed over it

<!DOCTYPE html>
<html>
<head>
<style>
ul.min{
list-style-type:none;
margin:0;
padding:0;
}
ul.min li{
float:left;
}
ul.min li a{
border:1px solid black;
display: block;
padding:10px;
background-color: blue;
color:white;
text-decoration: none;
}
ul.min li a:hover{
background-color: yellow;
color:white;
}
</style>
<title>
CSS NAVIGATION
</title>
</head>
<body>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">VIDEOS</a></li>
<li><a href="#">TRENDING</a></li>
</ul>
</body>
</html>
In place of # mention address of page that is to be opened after clicking this menu.

Output: