This tutorial will be based on creating a navigation bar with full width mega menu

What will I learn?

You will learn how to create a navigation bar
You will learn how to link the navigation menu to an external link
You will learn how to create a full width mega menu
You will how to use more of Cascading style sheets (CSS)
You will learn how to link a style sheet to font awesome styles
You will learn how to use html tags

Requirements

A standard computer system (Personal computer or a desktop computer)

Notepad++ (or default System notepad)
A standard browser (Mozilla Firefox, Chrome or any)

Difficulty Level:

• Amateur / Intermediate
Description
Hi everyone, you are welcome to this tutorial lesson. I will be teaching you how to create navigation bar with full width mega menu using HTML and CSS. Also I make comments available for proper understanding, all the programs I used (Notepad++) are open source and are all included in the links section of the github repository

Let get started.

DESCRIPTION

Hi everyone, you are welcome to this tutorial lesson. I will be teaching you how to create navigation bar with full width mega menu using HTML and CSS. Also I make comments available for proper understanding, all the programs I used (Notepad++) are open source and are all included in the links section of the github repository
Let get started.

STEP 1:

I start by lunching my notepad++ (you can use any other editor) followed by saving it with an extension (.html). I began to type in the codes starting with HTML tag then the head tag, follow by linking the addresses we need between the head commands (linking to fontawesome cdn styles).

STEP 2:

I start with the body tag follow by the div commands were I created the class MegaNavbar. This section specify the links the navigation bar will hold, one of which I used fontawesome icon class fa fa-caret-down.

STEP 3:

In this section of the tutorial, I create a class called nav-dropdown and also class called header. I create a row and column class for the mega menu which has the links the mega navigation menu will hold

STEP 4:

In this session, content illustrating what we have done is written with use of h3 and p tag

STEP 5:

STYLING THE NAVIGATION BAR
In this session, we are going to start styling the navigation bar. Move your cursor below the tag ; this is where the class MegaNavbar will be styled. I made the Navigation menu background blue while the hover background color is red. You can view the above image for the codes

STEP 6:

STYLING THE MEGA MENU DROP DOWN
In this session, The dropdown class will be styled. You should continue from where I stopped in the STEP 5, refer to the above image for the codes

STEP 7:

STYLING THE MEGA MENU COLUMNS

In this session i style three equal columns that floats next to each other in the mega menu, You should continue from where I stopped in the STEP 6, refer to the above image for the codes.

NOTE: Do not forget to close the style (Style) tag and the head (head) tag. Also the last paragraph of the codes should close with body (body) and html closing tag (html)

OUTPUT:

This is the last step of this tutorial, Save the codes and run it on your browser (press ctrl+alt+shift+x to run in firefox if you’re using notepad++). You should get the same result with the above.

Below is My PC Operating System and System properties

CODES USED IN THIS TUTORIAL

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.MegaNavbar {
    overflow: hidden;
    background-color: #3333ff;
    font-family: Arial;
}

.MegaNavbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
}

.MegaNavbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.nav-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.nav-dropdown .header {
    background: red;
    padding: 16px;
    color: white;
}

.dropdown:hover .nav-dropdown {
    display: block;
}

/* i will Create three equal columns that floats next to each other in the mega menu */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    background-color: #ccc;
    height: 250px;
}

.column a {
    float: none;
    color: black;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.column a:hover {
    background-color: #ddd;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>

<body>

<div class="MegaNavbar">
  <a href="#home">Home</a>
  <a href="https://mobile.facebook.com/Holusesi?refid=12">Contact me</a>
  <div class="dropdown">
    <button class="dropbtn">Test Mega Menu 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="nav-dropdown">
      <div class="header">
        <h2>Below are the menu</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>CATEGORY 1</h3>
            <a href="#">LINK ONE</a>
            <a href="#">LINK TWO</a>
            <a href="#">LINK THREE</a>
        </div>
        <div class="column">
          <h3>CATEGORY 2</h3>
          <a href="#">LINK ONE</a>
            <a href="#">LINK TWO</a>
            <a href="#">LINK THREE</a>
        </div>
        <div class="column">
          <h3>CATEGORY 3</h3>
          <a href="#">LINK ONE</a>
            <a href="#">LINK TWO</a>
            <a href="#">LINK THREE</a>
        </div>
      </div>
    </div>
  </div> 
</div>

<div style="padding:16px">
  <h3>Above is an example of a Mega menu  with a Full width dropdown menu</h3>
  <p>Click on the Hover "Test Mega Menu" link to see the mega menu.</p>
</div>

</body>
</html>

USEFUL LINKS

• Github repository
• Notepadd++ Website!
• Website to learn CSS More!
• Notepadd++ download link for window 64bit!
• Notepadd++ download link for window 32bit!

Posted on Utopian.io - Rewarding Open Source Contributors

Sort:

Trending

[-]

mcfarhat (71) 8 years ago

Thank you for your contribution, but it cannot be accepted.
Using code from w3schools or other sources as such is unacceptable.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_mega_menu_responsive
Plagiarism is a serious offense and could lead to you being banned from using Utopian.

Need help? Write a ticket on https://support.utopian.io.
Chat with us on Discord.

[utopian-moderator]

$0.00

How To Create a Navigation Bar With Full Width Mega Menu