Navigation Bars

Navigation Bars:

• Having easy-to-use navigation is important for any web site.
• A navigation bar needs standard HTML as a base.

Example 1

<!DOCTYPE html>

<html>

<head>

<style>

ul

{

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;

border: 1px solid #555;

}

li

a

{

display: block;

color: #000;

padding: 8px 16px;

text-decoration: none;

}

li

{

text-align: center;

border-bottom: 1px solid #555;

}

li:last-child

{

border-bottom: none;

}

li a.active

{

background-color: #4CAF50;

color: white;

}

li a:hover:not(.active)

{

background-color: #555; color: white;

}

</style>

</head>

<body>

<h2>Vertical Navigation Bar</h2>

<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>

<li><a class=”active” href=”#home”>Home</a></li>

<li><a href=”#news”>services</a></li>

<li><a href=”#contact”>Contact</a></li>

<li><a href=”#about”>About</a></li> </ul>

</body>

</html>

 

 

Example 2

<!DOCTYPE html>

<html>

<head>

<style>

body {margin:0;}

ul { list-style-type: none; margin: 0;

padding: 0; overflow: hidden;

background-color: #333; position: fixed; top: 0;

width: 100%; }

li { float: left; }

li a { display: block; color: white; text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover:not(.active)

{

background-color: #111;

}

.active { background-color: #4CAF50; }

</style>

</head>

<body>

<ul>

<li><a class=”active” href=”#home”>Home</a></li>

<li><a href=”#news”>News</a></li>

<li><a href=”#contact”>Contact</a></li>

<li><a href=”#about”>About</a></li>

</ul>

<div style=”padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;”>

<h1>Fixed Top Navigation Bar</h1> <h2>Scroll this page to see the effect</h2>

<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

<p>Add some text here.</p>

</div>

</body>

</html>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *