Navbar
Demo: Navigation Bars
-----TABLE MUKAVU----
Navigation Bars
A website’s navigability is a critical component.
You can use CSS to make ugly HTML menus look nicer as navigation bars.
Navigation Bar = List of Links
The foundation of a navigation bar must be standard HTML.
We will use a typical HTML list to construct the navigation bar in our examples.
Since a navigation bar is essentially a list of links, it makes perfect sense to use the <ul> and <li> elements:
Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Let’s now clear the list of bullets, padding, and margins:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Example Explained:
- list-style-type: none; – Removes the bullets. A navigation bar does not need list markers
- Set margin: 0; and padding: 0; to remove browser default settings
As you will see in the upcoming chapters, the code in the sample above is the typical code used in both vertical and horizontal navigation bars.
