Skip to content

Instantly share code, notes, and snippets.

@michaelparenteau

michaelparenteau/menubar.haml

Created June 20, 2012 21:11
Show Gist options
  • Save michaelparenteau/2962248 to your computer and use it in GitHub Desktop.
Save michaelparenteau/2962248 to your computer and use it in GitHub Desktop.
Download ZIP
compass menubar mixin
Raw
menubar.haml
// Here we follow a convention for the styles to apply
// to use the mixin and change markup, you will need to
// modify the scss for everything to work.
// You are free to use any of this, but really it is just an example.
%ul.menubar.black
%li= link_to "first item", "#"
%li
another item (hover me)
%ul
%li= link_to "menu item one", "#"
%li= link_to "menu item one", "#"
%li= link_to "menu item one", "#"
%li= link_to "menu item one", "#"
%li= link_to "menu item one", "#"
%li= link_to "item three", "#"
Raw
menubar.scss
// The Mixin (this should be it's own file and included as needed)
// ---------------------------------------------------------------
// * gradients are generated.. just add color.
// * Add font color, to go with the color you use
// * Then the height of the menubar. (font size is set where you call the mixin)
// * there is an option to put a radius on the menubar or you can leave it squared.
@mixin menubar($color, $font-color, $height, $radius: false) {
@include background-image(linear-gradient(lighten($color, 10%), darken($color, 20%)));
@if $radius != false {
@include border-radius($radius); }
height: $height;
a, li {
color: $font-color;
text-decoration: none;
position: relative;
padding: 0 10px;
display: block;
&:hover {
@include background-image(linear-gradient(darken($color, 35%), darken($color, 20%)));
ul {
display: block; } } }
li {
@include inline-block;
float: left;
line-height: $height;
border-right: 1px solid rgba(255,255,255,0.25);
border-left: 1px solid darken($color, 20%);
&:first-child {
border-left: none;
@if $radius != false {
@include border-left-radius($radius); } }
&:last-child { @include box-shadow(inset -1px 0 0 darken($color, 20%)); }
&:hover { cursor: default;}
ul {
@include border-bottom-radius(8px);
@include box-shadow(1px 1px 3px rgba(0,0,0,0.35));
display: none;
position: absolute;
top: 100%;
left: 0;
background: darken($color, 20%);
padding-bottom: 10px;
min-width: 100%;
z-index: 2;
li {
display: block;
float: none;
height: auto;
line-height: 1;
padding: 0;
white-space: nowrap;
&:hover { background: transparent; }
a {
padding: 5px 10px;
&:hover { background: rgba(255,255,255,0.25); } } } } }
}
// using the mixin...
// @include menubar($color, $font-color, $height, $optional-radius);
// There are some "extras" defined in the .menubar class. In this implementation
// the menubar mixin lives in color named classes
// (not ideal, just to show different colors like on the examples on
// http://menubar.herokuapp.com)
.menubar {
@include box-shadow(1px 1px 3px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5));
font-family: helvetica;
font-size: 14px;
z-index: 1;
margin-bottom: 20px;
&.black {
@include menubar(#333, #fff, 50px, 4px);
border: 1px solid #000;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment