New navigation, the detail element rocks!

Today I worked on the design of Mirage and looked at how to improve the header and main navigation. In previous iterations the navigation was mostly a bootstrap-esque navbar which scrolled horizontally on smaller screens. I liked the approach because of its simplicity.

At some point I came across the 100Rabbits homepage. Their navigation uses the detail element and a few different list to build more of a block navigation that can be toggled whenever needed.

I’m a big fan of the detail element since I found out about it and I used it to build a navigation before, and I decided to try using it again. What really inspired me was the navigation on Jim Nielsen’s Blog, which does not use a details element but a tiny bit of js to toggle the navigation.

So my current navigation uses the detail element and a few lists. I’m not 100% happy with it because I am hiding the chevron of the details element which looks like some mystery meat to me but as a first iteration it’s cool.

One more thing I added were these quick fixes for the detail element by CSS Tricks. These went right into my reset.css file.