Pure CSS Mobile-compatible Responsive Dropdown Menu

Category: CSS & CSS3 , Menu & Navigation | March 13, 2015
Author:
Views Total: 13,395
Official Page: Go to website
Last Update: March 13, 2015
License: MIT

Preview:

Pure CSS Mobile-compatible Responsive Dropdown Menu

Description:

A pure CSS responsive menu created by andornagy that automatically changes to a toggleable dropdown menu at a specified breakpoint based on CSS3 media queries.

How to use it:

Create a regular multi-level navigation menu using nested unordered list. It uses checkbox & label technique to toggle sub menus.

<nav>
  <div id="logo">Your Logo here</div>
  <label for="drop" class="toggle">Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li> 
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">Service +</label>
      <a href="#">Service</a>
      <input type="checkbox" id="drop-1"/>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li> 
      
      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">Portfolio +</label>
      <a href="#">Portfolio</a>
      <input type="checkbox" id="drop-2"/>
      <ul>
        <li><a href="#">Portfolio 1</a></li>
        <li><a href="#">Portfolio 2</a></li>
        <li> 
          
          <!-- Second Tier Drop Down -->
          <label for="drop-3" class="toggle">Works +</label>
          <a href="#">Works</a>
          <input type="checkbox" id="drop-3"/>
          <ul>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Python</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

The core CSS styles for the navigation menu.

nav {
  margin: 0;
  padding: 0;
  background-color: #254441;
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 20px;
  line-height: 60px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #254441;
}

nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

nav ul li ul li:hover { background: #000000; }

nav a:hover { background-color: #000000; }

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

li > a:after { content: ' +'; }
.toggle, [id^=drop] {
 display: none;
}
li > a:only-child:after { content: ''; }

The CSS3 media queries to define how the navigation menu works on mobile devices (screen size < 768px).

@media all and (max-width : 768px) {

#logo {
  display: block;
  padding: 0;
  width: 100%;
  text-align: center;
  float: none;
}

nav { margin: 0; }

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color: #254441;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color: #000000; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #000000; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #212121; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}

 

10 thoughts on “Pure CSS Mobile-compatible Responsive Dropdown Menu

  1. Fee

    I have issue when adding more additional item and sub menu no longer line up correctly when resize down to smaller device. Is there a way to add more items to the list without modify css every time? Thanks.

    Reply
  2. geotek

    This excellent menu was a very good starting point to create my own mobile navigation menu. Thanks a lot for sharing, Andor!

    Reply
  3. Daniel

    Hello! I was just wondering what the nav:after is supposed to achieve. I’ve been trying to follow line by line and I’m stuck here at the moment.

    Reply
  4. Dick Robinson

    I love the simplicity of your menu but could not get the mobile feature to work. The menu appears the same on my desktop and all mobile devices. Did I miss something?

    Reply
  5. Trino

    This menu is exactly what I’ve been looking for. But! On a mobile device when you click on a menu and it drops down, it will not close unless you click a link. How can I make it close by clicking outside the menu?

    Reply
  6. Roman

    Thank you so much for sharing. this is exactly what i want. unfortunately my skills are pretty basic and i dont know how to set it up always to start collapsed on mobile devices. i mean when i load the page on a device with narrow screen the menu is expanded and the user will not have a look at the content. i want the default initial position collapsed for narrow screens and always expanded for wide screens. can you advice me what to do?

    Reply
  7. Eyes Down Digital

    Hi. This is a great menu thanks. There is one thing it doesn’t do which I need.

    In the mobile version it doesn’t seem possible to have a link on a parent item. The parent item expands the relevant submenu but can’t actually link to a page. Is this something I could modify perhaps?

    Many thanks in advance.

    Reply
  8. chrisfromwa

    This all seems to work fine on desktop, even changes modes when you resize the browser. But I’ve tried this on an IPAD AIR and also a older galaxy3. Both cases, it displays the desktop view.

    What could I be doing wrong, or is this not compatible on all mobile devices?

    Reply

Leave a Reply