worldofitech
In this tutorial, you will learn-
Contents
CSS Navbar: A Navigation bar or navigation system comes under GUI that helps the visitors in accessing information. It is the UI element on a site page that includes links for different segments of the site.
Having simple to-use navigation is significant for any site.
With CSS you can change boring HTML menus into good-looking bars.
A navigation bar needs standard HTML as a base.
In our example we will build the navigation bar from a standard HTML list.
A navigation bar is essentially a list of links, so using the <ul> <li> elements makes perfect sense:
Note: We use href=”#” for test links. In a real web site this would be URLs.
Example
<!DOCTYPE html> <html> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#css-tutorial">CSS Tutorial</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p> </body> </html>
Now let’s remove the bullets and the margins and padding from the list:
In this example, we remove the bullets from the list, and its default padding and margin.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#css-tutorial">CSS Tutorial</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Example explained:
• list-style-type: none; – Removes the bullets. A navigation bar needn’t need list markers
• Set margin: 0; and padding: 0; to eliminate browser default settings
The code in the example above is the standard code used in both vertical, and horizontal bars, which you will learn more about in the next chapters.
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
