Lesson 3: Part 1 - Designing Widgets: Main Navigation

When we talk about a web application, below are the common components, present in almost every web applications:

Main Navigation
Tabs
Popup Ups
Search Bar
Side Navigation
Form Control

In this lesson, we see how to design a main navigation for a web page or a web application.

Main Navigation or Main Menu

Main navigation is a component through which one can navigate to through the pages of websites or web applications. In this lesson, we are going to create the main menu as it is in the above image. Here is the example link: Main Navigation

How to build main navigation as shown in the above image?

Write HTML code
There is no particular rule to follow while writing HTML code, you can write the code in your own way but the best way to make navigation is to use an unordered list, as the menu items are list of pages that a user can navigate to.
Logically, there are three levels of this navigation as shown below:
So, the first level can be written as:
As Menu Item 4 is having a sub navigation, we will add an unordered list inside the Menu Item 4's container li element as shown in the below code:
Similarly, as the third sub navigation is inside the Menu Item 2 of the second level navigation, an unordered list is added inside the 2nd menu item's li as shown below:
Write CSS
The best way to make an unordered list to look like the level 1 navigation is to use CSS properties like display table and table-cell. So, the CSS code for the first level navigation would be as below:
The second level ul lies absolutely below its parent li and is in alignment with the parent li. This can be achieved by making second level ul's position absolute with respect to its parent li i.e by making the parent li's position relative. So, now the code would be:
To remove the bullet points add property list-style-type:none to ul. We have to write the same code for the third level ul. The only difference is with the left and top property. The code to be added is:
After making this change the navigation should look like below:
Second and third level navigation has some white border and the third level navigation has a box-shadow. Border can be added commonly to the second and third level li.
Now, the only thing left is the arrow and the lines seperating the first-level navigation items. For this I have used the before and after pseudo selectors with the first level lis. I have added a class to identify the li elements having children, to add the arrows. Here is the code for that:

CSS Code for the line of separation in the first level navigation