Skip to content

Instantly share code, notes, and snippets.

@jakecraige
Created July 11, 2013 15:11
Show Gist options
  • Save jakecraige/5976315 to your computer and use it in GitHub Desktop.
Save jakecraige/5976315 to your computer and use it in GitHub Desktop.
Nice menu reset and configuration for a sass setup.
/**
* Reset and setup for customizing Nice Menus
* by Jake Craige with Poetic Systems
* on July 11, 2013
*/
/* ------EXAMPLE CSS FILE---------
@import "base";
@import "nice-menu-config";
#block-nice-menus-1 {
@include nice-menu-reset;
$nice-background: gray;
$nice-color: red;
$nice-hover: blue;
$nice-padding-top-bot: 15px;
$nice-padding-left-right: 30px;
$nice-font-size: 15px;
$nice-line-height: 20px;
$nice-center: true;
position: absolute;
top: 40%;
right: 12%;
@include nice-menu-setup($nice-background, $nice-color, $nice-hover,
$nice-padding-top-bot, $nice-padding-left-right,
$nice-font-size, $nice-line-height, $nice-center);
}
*/
@mixin center-dropdown($center) {
@if $center {
ul.nice-menu ul {
left: -50%;
ul {
left: 100%;
}
}
}
}
@mixin nice-menu-reset($global: 'false') {
@if($global == 'all') {
.block-nice-menus {
ul,
ul li,
ul ul,
ul ul li {
border: 0;
a {
text-decoration: none;
color: black;
&:hover {
text-decoration: underline;
}
}
&.nice-menu-down {
li.menuparent {
background: #eee;
&:hover {
background: #eee;
}
}
}
}
}
}
@else {
ul,
ul li,
ul ul,
ul ul li {
border: 0;
a {
text-decoration: none;
color: black;
&:hover {
text-decoration: underline;
}
}
&.nice-menu-down {
li.menuparent {
background: #eee;
&:hover {
background: #eee;
}
}
}
}
}
}
@mixin nice-menu-setup($nice-background, $nice-color, $nice-hover,
$nice-padding-top-bot, $nice-padding-left-right,
$nice-font-size, $nice-line-height, $nice-center) {
@include center_dropdown($nice-center);
ul {
&.nice-menu-down {
li.menuparent {
background: $nice-background;
&:hover {
background: $nice-hover;
}
}
}
}
ul li,
ul ul li {
background: $nice-background;
&:hover {
background: $nice-hover;
}
a {
color: $nice-color;
padding: $nice-padding-top-bot $nice-padding-left-right;
font-size: $nice-font-size;
line-height: $nice-line-height;
}
}
ul.nice-menu ul {
top: $nice-padding-top-bot * 2 + $nice-line-height;
ul {
top: 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment