Create A Pure CSS Responsive Menu

10 Dec 2012

First, create your HTML structure. In this example we're just using a basic unordered list inside a <div>.

<div class="content">
  <ul class="nav">
    <li class="active">
      <a href="#">
        <span class="text">home</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="text">about</span>
      </a>
      </li>
    <li>
      <a href="#">
        <span class="text">portfolio</span>
      </a>
     </li>
    <li>
      <a href="#">
        <span class="text">bob</span>
      </a>
     </li>
    <li>
      <a href="#">
        <span class="text">lob</span>
      </a>
     </li>
    <li>
      <a href="#">
        <span class="text">law</span>
      </a>
     </li>
  </ul>
</div>

Next, create your basic CSS. Not all browsers support media queries, so make sure that the menu is set up well and looks good without them.

body {
  width:100%;
  font-family:"Open Sans", sans-serif;
  font-size:1em;
}

a {
  text-decoration:none;
  color:#ffffff;
}

.content {
  width:100%;

}

.nav {
  list-style-type:none; 
  width:80%;
  margin-right:auto;
  margin-left:auto;
}

.nav li {
  color:#8C3432;
  text-align:center;
  background-color:#BF7655;
  float:left;
  padding:10px;
  border:1px solid #000000;
  width:15%;
}

.nav li:hover {
  background-color:#8C3432;
}

Now we'll add our media queries to make our menu responsive. There are different theories about exactly what resolution to add your queries. The goal is to give everyone the most optimal experience, without making the screen change back and forth constantly for those that have a borderline resolution.

First, we'll add a query for the screen resolution going below 860px. Again, feel free to change your exact resolution as it fits your content and target audience. The first one doesn't seem to need much of a change, but it would be nice if the font size got a little smaller to accomodate the change in list item size.

@media only screen and (max-width : 860px){
  .nav li {
    font-size:.8em;
  }

}

Now we're going to make this menu readable for those on smartphones and smaller tablets. The problem with a horizontal menu created with floated list elements many times is that once the screen gets below a certain resolution, the menu starts to collapse around itself. To combat that, we'll make sure that when the screen gets around that breaking point, that we switch the menu up to a flexible vertical menu.

To do this, we'll turn off the list item floats and make sure they're cleared, lessen the padding to accomodate this change, and make sure it's centered on the site.

@media only screen and (max-width : 550px){
  .nav li {
    width:80%;
    float:none;
    clear:both;
    margin-right:auto;
    margin-left:auto;
    padding:1px;
  }

}

Now you can test it yourself. Open it up in your browser (or view my sample in the Codepen example below) and slowly decrease the browser size and watch as your menu adjusts.

Of course there is more functionality and aesthetics that you could add with Javascript, but if you can get creative and confine your responsive code to only CSS, you can decrease the load on mobile users and increase the page speed for everyone.