Some words on this project
Some of the decisions I had to take on this new improved dropdown navigation were on the browser support and number of levels this menu will support. All these, considering that my previous versions support IE6 and until three levels of dropdown navigation.
But, this time the accent is put on responsiveness.
The browser support for this dropdown navigation is IE8+, so it uses the new box model triggered by
box-sizing: border-box and the shortest clearfix ever. With less effort, I know this could be updated to work on IE7 too, but at this time I think that if you still need support for IE7 and below, you should try my previous versions.
One dropdown level
For a better user experience and to avoid usability issues, in my opinion one dropdown level is more than enough for a navigation menu. If you theoretically would need more levels, you may try considering another implementation of that content or/and other navigation techniques like tabs and breadcrumbs.
Also, an important factor on choosing just one dropdown level was the ability of using this type of navigation on touch devices like iPad, while on iPhone for example, the navigation dropdowns rearrange into a stack.
As you may have guessed, there’s nothing complicated here. The only thing worth mentioning is the advanced checkbox hack, which is used to simulate the toggle effect.
SASS and Compass
With all these being said, here are some quick thoughts on how I SASSified my animated dropdown menu:
For a better look and consistency, I use
$subMenuItemWidth as a minimum width for the dropdown lists. The reason why this value is stored into a variable is so that in the future to be easily updated without having to search for it too much.
The above lines contain some pretty self explanatory stuff like basic colors that will be used to style this dropdown navigation, a default gutter that will help building paddings and margins and a selector shortcut for the checkbox input.
The Animenu SASS code uses functions like
lighten() with the above variables as parameters so it’s quite easy to customize the entire appearance by just changing the variable’s values. Also, most of included CSS3 stuff like
box-shadow is based on the above predefined variables.
Animenu customization example
Mixins and silent classes
Beside the above variables, I’m using helpers like mixins and silent classes as well.
In the following mixin, when
$menu-gradient argument value is equal to false, the background will contain no gradient. This is helpful when defining both main menu and dropdowns backgrounds using the
$baseMenuBackground as parameter.
Silent classes like the next one, differentiated by the percent sign, will not be generated in the resulted CSS output. Their purpose is to be used with
@extend whenever needed.
On iPhone, with using the checkbox hack, the whole navigation becomes stacked and is triggered once the checkbox’s state is checked.
On large displays, the dropdowns lists reveal on hover by using a smooth transition but we all know the hover event is not available on touch devices. Still, to make it work on tablets, the trick is to use
<a href="#"> for the navigation elements that trigger the adjacent dropdowns.
In the past, I experimented it with writing SASS just on quick demos. Basically, this is my first SASS project I’m showing to the world so be gentle with me if you’re spotting things that could have been made much better. :)
This is it, also I hope you dig the “Animenu” name I chose for this new responsive navigation and I’m looking forward to read your thoughts. Thanks for reading!