It's tedious to build drop down functionality into navigation menus for every project. Menu is a simple Sass mixin that handles just the drop down functionality for a nested list. Not only does Menu handle a single drop down, it goes to the infinite level. Your sub-sub-sub-sub-sub-sub menu is safe.
Because every thing needs to be demonstrated. View the demo
- Internet Explorer 8+
- Firefox 3.6+
- Chrome 9+
- Safari 4+
In your HTML, create a navigation menu using an unordered list. For example:
<ul> <li><a href="#">Home</a></li> <li><a href="#">The Band</a> <ul> <li><a href="#">Dr. Teeth</a></li> <li><a href="#">Animal</a> <ul> <li><a href="#">Biography</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Reviews</a></li> <li><a href="#">Music</a> <ul> <li><a href="#">Animal Comes Alive</a></li> <li><a href="#">The Hits</a></li> <li><a href="#">Animal: Unplugged</a></li> </ul> </li> </ul> </li> <li><a href="#">Lips</a></li> </ul> </li> <li><a href="#">Gonzo</a></li> <li><a href="#">Miss Piggy</a></li> <li><a href="#">Fozzy</a></li> </ul>
In your scss or sass document, add the Menu and Clearfix mixin:
// Clearfix
@mixin clearfix {
&:before, &:after { content: ""; display: table; }
&:after { clear: both; }
zoom: 1;
}
// Menu
@mixin menu($parentLinkPadding: 10px 25px, $childLinkPadding: 8px 25px, $dropDownWidth: 180px) {
margin: 0;
padding: 0;
li {
float: left;
list-style: none;
position: relative;
a { display: block; padding: $parentLinkPadding; text-decoration: none; }
}
li:hover > ul { display: block; }
ul {
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: $dropDownWidth;
li { float: none; }
a { padding: $childLinkPadding }
ul { left: $dropDownWidth; top: 0; }
}
@include clearfix;
}
Next, apply the mixin to your containing unordered list and change the values for the parent links padding ($parentLinkPadding), child links padding ($childLinkPadding), and width of the drop down menus ($dropDownWidth). For example:
// Basic setup
ul {
@include menu;
}
// or specifying different values for paddings and widths
ul {
@include menu(10px 45px, 8px 45px, 220px);
}
Ta-da! This will give you basic drop down functionality. Feel free to add in styles for your lists, anchors, etc after the mixin call. For example:
ul {
// Initialize Menu
@include menu;
// Style anchors within drop down
a {
background: red;
color: #FFF:
}
}
- Initial release. Hooray!