| Viewed 112 times

how to create navigation bar in html


how to create navigation bar in html

1 Answer
Mikdam Qandeel
Answered
7

Navigation Bar is a very important section of any website and Having easy-to-use navigation bar is a critical thing for any web site.

In addition Navigation bar it's like a list of links.

We will start by creating this list of links using <ul> tag and it's related to (Unordered List) which contain the group of items or links.

Then the <li> tag that related to (List Item) means the item and it defines a single item.

And for sure because the Navigation bar is a list of links so we will use <a> tag to link the items.

Example:

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About Us</a>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
  </ul>

Output:

 

So now we have the list of items but it doesn't look pretty so let's start using CSS for styling it.

We will remove the bullets (Big Dots) and the margins and padding from the list & add background-color and make the width 300px and other CSS styles like this:

Example:

ul {
  list-style-type: none;               <!-- removing-the-bullets -->  
  margin: 0;                               <!-- removing-the-margin -->  
  padding: 0;                             <!-- removing-the-padding -->
  width: 300px;                          <!-- adding-the-width-300px -->
  background-color: #ccc;        <!-- adding-the-background-color -->
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

Output:

So now it's a Vertical Navigation Bar.

If we want to make it Horizontal Navigation. We will just replace the display: block; to display: inline;

Example:

ul {
  list-style-type: none;               <!-- removing-the-bullets -->  
  margin: 0;                               <!-- removing-the-margin -->  
  padding: 0;                             <!-- removing-the-padding -->
  width: 300px;                          <!-- adding-the-width-300px -->
  background-color: #ccc;        <!-- adding-the-background-color -->
}

li a {
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li {
  display: inline;
}

Output: