| Viewed 64 times

how to create menu in html


how to create menu in html

1 Answer
Mikdam Qandeel
Answered
6

The menu is a very important section of any website and Having easy-to-use menu is a critical thing for any web site.

In addition menu, 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 menu 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 Menu.

If we want to make it Horizontal Menu. 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: