Create a pure CSS menu button

Part 1 of a series looking at progressively enhanced, mobile first, reponsive navigation

If you've followed me on the twitters for some time, you'll know my thoughts on the best solution for mobile navigation. In short. I hate the idea of using a <select> to 'fix' your navigation. Although it's a great idea that's been created. I feel that the extra 'tap' to select the link, the inherent difference in styling and implementation across devices make me believe that -

Using <select> for mobile navigation is a developer's answer to a designer's problem.

Now, I've also been thinking about how much we should be thinking about what we're actually giving the person with their (insert any handheld mobile device but) iPhone.

Some options.

You see, creating a new image for the menu icon could create another http request (although you could (and should) create a css sprite of  'ALL THE THINGS' like that, but you would still have that extra kb to download).

You could use a icon font, but again this would create another http request and also a file of which you don't use all of it's parts. Although it can scale nicely (or not) for a menu button for your handheld touch device it's a little overkill.

Door number 3.

I think, one way of creating your 3 line mobile navigation menu button is to use CSS. Pure CSS. It'll add a few lines of code to your CSS file but would be a little nicer for your user to not have to download more stuff just for one button.

So to create a simple 3 line menu button you'd need to write something akin to this -

HTML


<div id="lines"></div>

CSS


#lines { 
    border-bottom: 17px double black; 
    border-top: 6px solid black; 
    content:"";
    height: 5px; 
    width:30px;
}​

Result

Now, the only issue with creating something like this is an empty div, that's pretty crappy but I'll get to that in a later post. Let's just concentrate on creating cool CSS only menu buttons.

Maybe for this we want to add a border around it to make it 'look' more like a button. We can do this by adding a class to the <div> and changing around the CSS to include a :before rule.

HTML


<div id="lines" class="btn"></div>


CSS


.btn { 
    position: relative;         
    margin-top:2%; 
    border: 2px solid black;
    border-radius: 2px; 
    height: 36px; 
    width:36px;  
}
#lines:before { 
    border-bottom: 17px double black;
    border-top: 6px solid black;    
    content:"";
    height: 5px; 
    position: absolute; 
    right:3px;  
    top: 4px; 
    width:30px; 
}

Result

Here you can see we've added a border around the lines with the class .btn. Doing it this way means that any css rules for #lines would overide them. Therefore we've used the :before pseudo selector to achieve a nice result.

There's more?

Of course there's more. Although I love the 3 lines menu, after a recent discussion on twitter, it won't really work if you're having sub navigation within the main navigation. Lots of 3 line icons all stack on each other it can get confusing . So I created some more buttons out of CSS. 

Build it, Break it, Make More

As you can see the CSS icons are up on jsfiddle. Have a look, take them apart, make them better, make them sexier and add them to the comments.