Responsive Mega Menu and Dropdown Menu using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create Responsive Mega Menu and Dropdown Menu using only HTML & CSS. Earlier I have shared a blog on how to create a Responsive Dropdown Menu but now I'm going to create Mega Menu which is based on HTML & CSS only.

A mega menu is a drop-down menu with multi-level nav links that allows you to carry your website's navigation into a single menu. A mega menu lets the user or content viewers to get information about website content through the main menu.

In this program [Responsive Mega Menu and Dropdown Menu], there is navigation or navbar on the top of the webpage and it contains a logo on the left side and five nav items/links on the right side. One nav link has a dropdown menu and another one has a mega menu and it only shows when you hover on the parent nav link. If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Responsive Mega Menu].

Video Tutorial of Responsive Mega Menu



In the video, you have seen the responsive mega and dropdown menu and in this video, I have only created the static mega and dropdown menu means I didn't code of responsive part but in part 2 of this video I've made this mega menu fully responsive for any devices, Click here to watch part 2 video of this tutorial.

As you know, this is a pure CSS program that means only HTML & CSS are used to create this mega menu. If you're a beginner and difficult to understand how I toggled the menu bar to show or hide then understand the concept of <input type="checkbox"> and <label> tag. In the label tag, there is a for attribute and we have to pass the id name of checkbox inside for attribute to control the checkbox from the label. And to make this mega menu responsive I used CSS @media property.

You might like this:


Responsive Mega Menu and Dropdown Menu [Source Codes]

To create this program (Responsive Mega Menu and Dropdown Menu). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes into your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.


24 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. Pls do not put the music in background , rather guide with commentary while doing the things. It will help the learner to grasp fast.

    ReplyDelete
  2. Plz try to create a slider like in the youtube that you can see at home page

    ReplyDelete
    Replies
    1. Is there an estimation how long I should stay tuned before this is going to happen?

      Delete
  3. did anybody has a problem when using this?, when i try it is not rendering properly.
    Excelent work !!

    ReplyDelete
    Replies
    1. Can you send screenshot of the problems on my Instagram account?

      Delete
  4. Can I use this code, or any copyright required

    ReplyDelete
  5. Can I use this code for my site ? Or I have to purchase copyright

    ReplyDelete
    Replies
    1. Yes you can use it without any copyright issues

      Delete
  6. Hello! I have one question, when I click on one of the navbar option, the navbar don´t dissapear, I don´t know if I could do this whith JavaScript or CSS removing or adding one class. Thanks for all.

    ReplyDelete
  7. can you make a tutorial of responsive mega menu with logo and search bar?

    ReplyDelete
  8. This is exactly what I want, but it is not working for me. The hamburger menu icon does not appear at all. I have Windows 10; I have tried FireFox, Chrome, Opera, and Edge. I made no changes to your code. Any ideas what could be wrong?

    ReplyDelete
  9. It's exactly what I want, but the code does not work for me. No hamburger menu icon appears when the window is resized. I'm using Windows 10 with Wampserver running. I tried all the major browsers with the same result. I did not change your code at all. Any ideas what could be wrong?

    ReplyDelete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
CodingNepal

Don't forget to Subscribe to our YouTube Channel.

Subscribe To CodingNepal