// Variables
$baseMenuBackground: transparent; // Base color theme
$secondaryMenuBackground: #0186ba; // Secondary color (highlights, triangles...)
$gutter: 10px; // Base gutter
// Latest CSS box model
*, *:after, *:before {
box-sizing: border-box;
}
// The classic hamburger icon
//
.animenu__toggle {
display: none;
cursor: pointer;
background-color: $baseMenuBackground;
border: 0;
padding: 10px;
height: 40px;
width: 40px;
&:hover {
background-color: $secondaryMenuBackground;
}
}
.animenu__toggle__bar {
display: block;
width: 20px; height: 2px;
background-color: #fff;
transition: .15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
&+.animenu__toggle__bar {
margin-top: 4px;
}
}
.animenu__toggle--active {
.animenu__toggle__bar {
margin: 0;
position: absolute;
&:nth-child(1) {
transform: rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: rotate(-45deg);
}
}
}
// Clear some defaults
.animenu {
display: block;
ul {
padding: 0;
list-style: none;
font: 0px 'Open Sans', Arial, Helvetica;
}
li, a {
display: inline-block;
font-size: 15px;
}
a {
color: lighten($baseMenuBackground, 60%);
text-decoration: none;
}
}
// First level -> main menu items
//
.animenu__nav {
background-color: $baseMenuBackground;
> li {
position: relative;
border-right: 1px solid lighten($baseMenuBackground, 20%);
> a {
padding: $gutter 3 * $gutter;
text-transform: uppercase;
// http://bit.ly/SkmL1T & currentColor keyword
&:first-child:nth-last-child(2):before {
content:"";
position: absolute;
border: 4px solid transparent;
border-bottom: 0;
border-top-color: currentColor;
top: 50%;
margin-top: -2px;
right: 10px;
}
}
&:hover {
> ul {
opacity: 1;
visibility: visible;
margin: 0;
}
> a {
color: #fff;
}
}
}
}
// Second level
//
.animenu__nav__child {
min-width: 100%;
position: absolute;
top: 100%; left: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
margin: 2 * $gutter 0 0 0;
background-color: lighten($baseMenuBackground, 15%);
transition: margin .15s, opacity .15s;
> li {
width: 100%;
border-bottom: 1px solid lighten($baseMenuBackground, 25%);
&:first-child > a:after {
content: '';
position: absolute;
height: 0; width: 0;
left: 1em;
top: -6px;
border: 6px solid transparent;
border-top: 0;
border-bottom-color: inherit;
}
&:last-child {
border: 0;
}
}
a {
padding: $gutter;
width: 100%;
border-color: lighten($baseMenuBackground, 15%);
&:hover {
background-color: $secondaryMenuBackground;
border-color: $secondaryMenuBackground;
color: #fff;
}
}
}
// The main breakpoint is 767px
// Adjust the first and second levels display
@media screen and (max-width: 767px) {
.animenu__toggle {
display: inline-block;
}
.animenu__nav,
.animenu__nav__child {
display: none;
}
// First level -> main menu items
//
.animenu__nav {
margin: $gutter 0;
> li {
width: 100%;
border-right: 0;
border-bottom: 1px solid lighten($baseMenuBackground, 25%);
&:last-child {
border: 0;
}
&:first-child > a:after {
content: '';
position: absolute;
height: 0; width: 0;
left: 1em;
top: -6px;
border: 6px solid transparent;
border-top: 0;
border-bottom-color: inherit;
}
> a {
width: 100%;
padding: $gutter;
border-color: $baseMenuBackground;
position: relative; //dropdown caret
}
}
a:hover {
background-color: $secondaryMenuBackground;
border-color: $secondaryMenuBackground;
color: #fff;
}
}
// Second level
//
.animenu__nav__child {
position: static;
background-color: lighten($baseMenuBackground, 15%);
margin: 0;
transition: none;
visibility: visible;
opacity: 1;
> li:first-child > a:after {
content: none;
}
a {
padding-left: 2 * $gutter;
width: 100%;
}
}
}
// Expanding the animenu
//
.animenu__nav--open {
display: block !important;
& .animenu__nav__child {
display: block;
}
}