Responsive Mobile Friendly Dropdown Menu in Pure CSS

Responsive Mobile Friendly Dropdown Menu in Pure CSS
Here I am going to share a simple dropdown navigation menu made with CSS Only coded by Andor Nagy. If you don’t want to use any third party plugin to create dropdown menu then this code snippet written for you in purely CSS only. It create fully responsive menu for your website without javascript. Dropdowns are marked with a plus sign ( + ) when ever you resize the screen you’ll see the new look if the screen is smaller then 768px.

CSS Dropdown Menu



Integrate Responsive Mobile Friendly Dropdown Menu

HTML

Create a native navigation menu with simple nested unordered list, Dropdowns are marked with a plus sign ( + ), If you click the same dropdown will display.

<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>



CSS

Now use following CSS to make your drowdown actionable and when ever you resize the screen you’ll see the new look if the screen is smaller then 768px.

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: ' +'; }

See live demo and download source code.

DEMO | DOWNLOAD



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.