Qatar
info@sugaiinstitute.com
YouTube : Sugai Institute
Qatarinfo@sugaiinstitute.comYouTube : Sugai Institute
Navigation Bar contain links for the other page of the website. It plays an important role in website. It is represented as a horizontal bar in the top of the website. It helps the users to locate the other pages in the website.
In our example program we created menu bar by using anchor tag.
In the style section we mentioned "overflow:hidden" for div. Overflow is used when an element inside the block is too big to fit.
You can also change the background of the each menu when moving cursor on it. For that we used "hover" in style section.
Note:Watch our video for detailed explanation in Tamil
(Use Ctrl+c to copy this coding)
<html>
<head>
<title>Navigation Bar</title>
<style>
body
{
margin:0;
}
.nav
{
overflow:hidden;
background-color:red;
}
a
{
float:left;
text-decoration:none;
font-size:20px;
padding:20px 25px;
}
a.active
{
background-color:yellow;
color:black;
}
a:hover
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<div class="nav">
<a class="active" href="https://www.google.com">Home</a>
<a href="">About Us</a>
<a href="">Services</a>
<a href="">Contact Us</a>
</div>
</body>
</html>
Click output to view the output of the coding
Html and css use panni oru web page kudhuga naaga create panni paakurom.... And... Edupi mam... Vertical line poodhuradhu... And thank you mam...
very useful for me .Teaching is marvellous.
Thank you for spending time share your knowlege so good.
