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:
And as one file (CSS inline):
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:
#hideMenu – you can rename these id tags as you see fit, but do be mindful they will be added when clicked.