learn programming language: Horizontal navigation bar Web designing

Friday, December 2, 2022

Horizontal navigation bar Web designing

Horizontal navigation bar

The horizontal navigation bar is the most common type of navigation menu. It lists the major pages side-by-side and is placed in the website header.

Horizontal navigation bar Example

<!DOCTYPE html>

<html>

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

<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>Believe in yourself when everything seems to be wrong. Believe in tomorrow will be another day</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>