Horizontal navigation bar Web designing
Horizontal navigation bar
The horizontal navigation bar is a most common type of the navigation menu bar. It list the major page side-by-side and is placed in the website header.
Horizontal navigation bar Example
<!DOCTYPE html>
<html>
<head><style>
ul{
list-style-type: none;
margin: 0; padding: 0;
overflow: hidden;
background-color: #f09d28;}
li {
float: left;
border-right:1px solid #bbb; }
li:last-child { border-right: none;}
li a{ display: block;
color: white;
text-align: center;
padding: 14px 16px; text-decoration: none;
background-color:#f09d28;
color: yellow;}
li a:hover:not(.active) { background-color: #111;}
.active {background-color: #2BE40; color:red;}
</style>
<h1> College of computer </h1>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#About">About us</a></li>
<li><a href="#courses">Courses</a></li>
<li style="float: right"><a href="download">download</a></li>
</ul></body>
</head></html>
Horizontal navigation bar Output
Create CSS Navigation Bar
Program
<!DOCTYPE HTML>
<html>
<head>
<title>Example shows </title>
<style>
body {
margin: 0px; }
ul{
list-style-type: none;
margin: 0px; padding: 0px;
width: 25%;
background-color:#f1f1f1;
position: fixed; height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px; text-decoration: none;
}
li a.active {
background-color: #f09d28;
color:white; }
li a:hover:not(.active) {
background-color:#555; color:white;
}
</style>
</head>
<body>
<h2 style="text-align:center;"> Welcome ClassRoom </h2>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#meditation">Meditation</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div style="margin-left:25%; padding:1px 16px; height:1000px;">
<h2>This is my Own Earth</h2>
<h4>The happiness of your life depends upon the quality of your thoughts: therefore, guard accordingly, and take care that you entertain no notions unsuitable to virtue and reasonable nature.<br></h4>
<p>I am not a Handsome guy, but I can give my hand-to-some one who needs help. <br></p>
</div>
</body>
</html>
Create CSS Navigation Bar
output
Related post :-
Comments
Post a Comment