How To Create A Responsive Nav Bar Without Using JavaScript


Can you make a responsive navigation bar without Javascript? Is it actually possible?

Have you ever liked those responsive navigation bars at the top of some sites and wanted to know how to create your own? Want to do it without needing to write any fancy-pants JavaScript? Well in this post we look at writing some fancy navigation bar in pure HTML and CSS only!

When I first ventured into the responsive navigation bar space I used the popular Javascript plugin Responsive Nav which many people similarly use and love – and I certainly enjoyed using it on several sites.

However, I wanted to push the boundaries of known space, and I wondered if it were even possible to design a simple nav bar which was purely responsive and only required CSS (assuming the HTML was already in place).

But I didn’t want it to be just “another” nav bar wrapped in 100 different @media queries everywhere. I wanted:

  • Something that grew with the changing of the screen size automatically;
  • Something that required the user to push a button/link to open the nav bar menu – and then conversely another (or the same button) to collapse that same menu;
  • And something that didn’t obscure the content of the page – I wanted it to push itself into the page thereby moving all content underneath it further down the page.
  • Could such a thing be possible with pure CSS?

Sure. Why not?

Did you also want fries with your new nav bar too??

Well, surprisingly (at least to me) such a thing was possible. And in the end after surfing the web and trying to harness the power of CSS with good structured HTML I was able to find such a solution. In fact, I was so impressed with it that I decided to permanently leave it on this current site – you would need to apply those @media queries to your CSS file if you only wanted it to apply within a certain screen size.

Anyway, here it is:

HTML5 raw body code:

[gist]fa5f44c74a7e83abe7d0[/gist]

CSS:

[gist]c96b1d22fc576541acd4[/gist]

And as one file (CSS inline):

[gist]f34015cf3b22b5d28fdc[/gist]

Conclusion

If you want to see it in action – see this jsFiddle here.

The only disadvantage I can see with this type of responsive structure is that it will append the id tags to the URI: #showMenu and #hideMenu – you can rename these id tags as you see fit, but do be mindful they will be added when clicked.

Anyway, hopefully this can help structure your site in using a responsive nav bar without resorting to Javascript libraries and scripts.

Recent Posts