How To Create Responsive CSS Navigation with Dropdown

How To Create Responsive CSS Navigation with Dropdown

Are you planning to start a new project? The first thing you need to develop a menu bar which should be clean and responsive.  If you start building each element of your website, It will take much time and you need to code each and everything from scratch, right?

Why not try out this responsive navigation which builds with CSS and also has the support of the dropdown menu. I wil guide you and show you demo how you can easily build it with only CSS and HTML.

To build this top navigation, I will follow standard HTML markup which includes nav, ul and li elements. Similar I will do while creating a dropdown menu.

To make them responsive, I will take the help of media queries and make the navbar mobile friendly. On small devices such as tablet and mobile, the navbar will convert into a toggle menu which can be accessed when the user clicks.

Just to mention here, I am not going to do something fancy here but will build a basic responsive navbar with pure CSS only.

Many menu bars including dropdown are created using a combination of HTML, CSS3, and Jquery. But here we will create it using only CSS. This method does not require adding any Javascript or jquery to make it mobile devices compatible.

The HTML/CSS code is very straightforward and we are going to use the most essential CSS necessary for structuring and stying the navigation.

It will make much easier to follow and understand the purpose of each line of code. The end product will be ready to use for your next project. This navbar also allows you to customize easily.

The top navbar will be the standard horizontal navigation bar which has the full-width background. The links will be central to its container for large devices such as the laptop.

When user access on mobile or tablet devices, It will turn into a toggle menu using Flexbox and all the links will be hidden.

Then the toggle button allows the user to click to see all the menu links in a vertical way.

The Markup

Let’s start with section Which we require for full-width background color. The div class name Responavigation is our main div which will hold all the markup.

In this main div, We have added a nested unordered list. But you can also see that we added a input type checkbox and a label.

These both will be active on small devices.

<section class="navwrapper">
    <div class="Responavigation">
        <nav>
          <input type="checkbox" id="nav" /><label for="nav"></label>
          <ul>
            <li><a href="#">Home</a></li>       
            <li>
              <a href="#">Work</a>
              <ul>
                <li><a href="#">Web</a></li>
                <li><a href="#">Print</a></li>      
              </ul>
            </li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
    </div>
</section>

The Style

First of all, We will add max-width to div class name .Responavigation. Next, we will do some basic styling to the anchor link, ul and li elements to remove bullet points.

The inline-block and float:left attributes make the list display horizontally.

.Responavigation {
	  max-width: 1000px;
	  margin: 0 auto;
	  padding: 0px 20px;
	  position: relative;
}
.Responavigation nav a {
    color: #fff;
    display: block;
}
.Responavigation nav > ul {
    margin: 0;
    padding: 0;
    text-align: center;
}
.Responavigation nav > ul > li {
    display: inline-block;
    list-style: outside none none;
}
.Responavigation nav > ul > li > a {
    cursor: pointer;
    display: block;
    outline: none;
    width: 100%;
    text-decoration: none;
    padding: 20px;
}

Now we need to hide the drop-down menus by default. What we need to do here to display: none; and position: absolute; for drop-down menus. We also need to set the fixed width of the drop-down menu and we do set it to 200px.

However, You can change the width of the text if the link text longer. You can also style the dropdown anchor link in different color or background.

.Responavigation nav > ul li ul {
	background:#8f7676;
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	width: 200px;
	z-index: 2000;
	margin:0;
	padding: 0;
}
.Responavigation nav > ul li ul li {
  width: 100%;
  list-style:none;
  text-align: left;
}
.Responavigation nav > ul li ul li > a {
   text-decoration: none;
   padding: 10px 20px;

}
.Responavigation nav ul li:hover {
   cursor: pointer;
   position: relative;
}
.Responavigation nav ul li:hover > ul {
    display: block;
}

Here we will also make sure that the input[type=”checkbox”] and the label should be displayed: none; so it wouldn’t show on large devices such as laptop or computer.

[type="checkbox"], label {
    display: none;
}

Now the menus are ready for the desktop to use, However, We should need to add some love for mobile friendly. We will use responsive media queries to make the navbar on mobile devices. We will target devices with a max width of 768px and make a few changes to the code.

You can see, We use display: none; property element for the desktop menus and then display: block; the [type=”checkbox”] and label.

With the help of Pseudo-elements :after we make the label a button for mobile devices and when user will click, it will show all anchor links.

In the normal position, all the anchor links become deactivate and only active when button clicked.

@media screen and (max-width: 768px) {
.Responavigation nav ul {
    display: none;
}
.Responavigation label {
    display: block;
    background: #da6b6b;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0px;
}
.Responavigation [type="checkbox"]:checked ~ ul {
    display: block;
    z-index: 9999;
    position: absolute;
    right: 0;
    left: 0;
    top:40px;
}
.Responavigation label:after{
    content:'';
    display: block;
    width: 30px;
    height: 5px;
    background: #8f7676;
    margin: 7px 5px;
    box-shadow: 0px 10px 0px #8f7676, 0px 20px 0px #8f7676
}
.Responavigation nav a {
    color: #fff;
}
.Responavigation nav ul li {
    display: block;
    float: none;
    width: 100%;
    text-align: left;
    background: #8f7676;
    text-indent: 20px;
}
.Responavigation nav > ul > li {
    margin-left: 0px;
}
.Responavigation nav > ul li ul li {
    display: block;
    float: none;
}
.Responavigation nav > ul li ul {
    display: block;
    position: relative;
    width: 100%;
    z-index: 9999;
    float: none;
}
}

As we know that the space on small devices is very limited, So how it would be cool if we had a button prompting mobile users to click a button before displaying the whole menu.

Due to insufficient space on smartphones, I try to make the navigation bar with one button click using only CSS. This code is working well in modern browsers so you don’t have to worry about it.

You don’t need to add any javascript because it can slow down web page load times. Check out the live demo for working example and don’t forget to share it. Also, Let me know your thoughts in below comment section.

Code ExamplesYou May Also Like