About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done Btech Computer engineering from Sigma Institute of Engineering & Technology that comes under GTU (Gujarat Technological University). I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their careers as a fullstack .NET developers.

Lesson 3: Part 1 - Designing Widgets: Main Navigation

Main naivgation design
When we talk about a web application, below are the common components, present in almost every web applications: 
  1. Main Navigation
  2. Tabs
  3. Popup Ups
  4. Search Bar
  5. Side Navigation
  6. 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?

  1. 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:

    Levels of main navigation

    So, the first level can be written as: 

    HTML code for first level navigation

    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:

    HTML code for second level navigation

    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:

    HTML code for navigation
  2. 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: 

    CSS code for main navigation

    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:

    CSS code for main navigation

    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: 

    CSS code for main navigation

    After making this change the navigation should look like below:

    Main navigation output

    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 to add line of separation to the first level li
    CSS Code for the line of separation in the first level navigation

  3. CSS code for arrows in the main navigation
    CSS code to create arrows for the li elements having children

To hide show the navigation, we have to write some lines of javascript. We will be doing it once we go through the basics of javascript.

For any queries or feedback, write to [email protected]

Subscribe to Be a full stack .NET developer by Email