Responsive Drop-down Menu Bar using HTML and CSS

Hey friends, today in this blog you'll learn how to create a Responsive Dropdown Menu Bar or Dropdown Menu using HTML and CSS only. In the earlier blog, I have shared how to create Sidebar Menu using HTML & CSS only and now it's time to create a responsive dropdown menu.

I'm sure that you know what is the dropdown menu and you may have seen it on different websites. A dropdown menu is a list of links or items that appears whenever the user clicks or hovers on it. Nowadays every website has a responsive navbar with a dropdown because with the help of dropdown we can easily organize listing by category and it is compulsory now for every website for the user conveniences.


In our dropdown menu, as you can see in the preview image, there is a horizontal navbar with a dropdown. At first, the drop menu or submenu are hidden but when you hover on the particular nav link then the dropdown menu appears on the hovered link. There is visible a pretty cool box-shadow effect when you hover on the particular nav link. This is a fully responsive navbar with a dropdown menu and it is created using only HTML & CSS. On the pc, this navbar is displayed horizontally but on mobile devices, this dropdown or navbar displayed vertically like a mobile menu. On mobile devices, you have to click on the nav link to show the dropdown menu but on pc, you have to hover.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this Responsive Navbar with Dropdown Menu.

Video Tutorial of Responsive Dropdown Menu CSS



In the video, you have seen the fully responsive dropdown menu and how it looks on mobile devices. I hope you have understood the codes behind creating this CSS dropdown menu. If you're a beginner in web design and you only know basic HTML & CSS then you can also create this type of navbar or dropdown menu bar.

If you like this dropdown menu and to get the source codes then you can easily copy the codes of this dropdown from the given copy boxes or you can also download the source code files of this dropdown from the given download button and I also recommend you to download the code files of this dropdown menu tutorial instead of copy codes.

Responsive Dropdown Menu CSS [Source Codes]

As always, before sharing the codes of this Responsive Dropdown Menu Bar. Let's a few talks about the main tags and codes of this program. As you already know, this program is <ul> and <li> based design, that’s why we can create menu or nav links easily. I've used <input type="checkbox"> and <label for=""> tag to toggle the menu bar for the mobile devices. I also used the Fontawesome for the hamburger menu icon and the cross icon. Generally, Fontawesome is a website where we can get thousands of free and paid icons for projects. Importantly, I've used CSS @media property to make this dropdown menu bar fully responsive.

To create this dropdown menu css. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this dropdown menu css design from the below download button.

HTML CODE:

CSS CODE:




41 Comments

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

  1. Hey,
    very nice Design.
    I can change the Design like i want.
    But when I want to open the Website on my phone or on a smaller Web Version.
    The Design is the old...
    Can anyone help me?

    ReplyDelete
  2. when i go to live server after write my code they told me
    Cannot GET /Side%20Navigation%20Menu%20Bar%20in%20HTML%20CSS%20%5E&%20JavaScript/index.html
    what is it mean ??

    ReplyDelete
    Replies
    1. first you need to install atom live server package then start it form you editor setting.

      Delete
  3. awesome project, thankyou.. :)

    ReplyDelete
  4. I am having a issue with all my Li tag elements on the rest of my webpage outside of the navigation disappearing when minimizing the screen. How can I fix this?

    ReplyDelete
    Replies
    1. Send me your codes on Instagram because without seeing your codes it's hard to tell you the solutions.

      Delete
    2. I have this issues too,
      all li on the rest of the page are unvisible.

      Delete
    3. ... when I delete: ul
      from
      .show + a, ul{
      display: none;
      }
      everything is oK.

      Delete
  5. I've looked around a lot of time for a good menue - You are THE BEST !

    ReplyDelete
  6. I've looked around a lot of time for a good menue - You are THE BEST !

    ReplyDelete
  7. I want to know about these two things in script tag . Why and how did you use these?


    ReplyDelete
  8. The two Script tags in the < head tag.

    ReplyDelete
    Replies
    1. Make sure you're connected with the Internet and those links are used for icons and jQuery.

      Delete
  9. Plz Start A CSS Tutorial Series On Your YouTube Chainal Step By Step Instructions. You Are The Best Coders In Whole World Sir. But Yes, Beginning To Master So Plz Start This Series On Your YouTube Channel. Plzzzzzzz

    ReplyDelete
  10. why can't i select any text in liveserver.is there something wrong with css object overlap .
    BTW website works fine.

    ReplyDelete
    Replies
    1. I've given user-select: none; inside * selector in the CSS file, so you can't select any text. You can remove that line to select the text.

      Delete
  11. Really great, I love your navigation bars! I am just wondering how to make the dropdown menu sticky...

    ReplyDelete
  12. how can i add sticky to the navbar?
    it somehow doesnt work. I need help pls
    lg

    ReplyDelete

Post a Comment

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

Previous Post Next Post
CodingNepal
Subscribe our YouTube Channel