// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group menu
////
/// Margin of a menu.
/// @type Number
$menu-margin: 0 !default;
/// Left-hand margin of a nested menu.
/// @type Number
$menu-margin-nested: 1rem !default;
/// Padding for items in a menu.
/// @type Number
$menu-item-padding: 0.7rem 1rem !default;
/// Text color of an active menu item.
/// @type Color
$menu-item-color-active: $white !default;
/// Background color of an active menu item.
/// @type Color
$menu-item-background-active: get-color(primary) !default;
/// Spacing between an icon and text in a menu item.
/// @type Number
$menu-icon-spacing: 0.25rem !default;
/// Background color for an hovered menu item.
/// @type Color
$menu-item-background-hover: $light-gray !default;
/// Color for bordered menu
/// @type Color
$menu-border: $light-gray !default;
/// Creates the base styles for a Menu.
@mixin menu-base {
margin: $menu-margin;
list-style-type: none;
@if $global-flexbox {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 100%;
}
// List items are table cell to allow for vertical alignment
> li {
@include disable-mouse-outline;
@if $global-flexbox {
flex: 0 0 auto;
}
@else {
display: table-cell;
vertical-align: middle;
}
}
// Reset line height to make the height of the overall item easier to calculate
> li > a {
display: block;
padding: $menu-item-padding;
line-height: 1;
}
// Reset styles of inner elements
input,
select,
a,
button {
margin-bottom: 0;
}
}
/// Expands the items of a Menu, so each item is the same width.
@mixin menu-expand {
@if $global-flexbox {
> li {
flex: 1 1 0px; // sass-lint:disable-line zero-unit
}
}
@else {
display: table;
width: 100%;
table-layout: fixed;
}
> li:first-child:last-child {
width: 100%;
}
}
/// Sets the direction of a Menu.
/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
@mixin menu-direction($dir: horizontal) {
@if $dir == horizontal {
@if $global-flexbox {
flex-wrap: nowrap;
> li {
flex: 0 0 auto;
}
}
@else {
> li {
display: table-cell;
}
}
}
@else if $dir == vertical {
@if $global-flexbox {
flex-wrap: wrap;
> li {
flex: 0 0 100%;
max-width: 100%;
}
> li > a {
justify-content: flex-start;
align-items: flex-start;
}
}
@else {
> li {
display: block;
}
}
}
@else {
@warn 'The direction used for menu-direction() must be horizontal or vertical.';
}
}
/// Creates a simple Menu, which has no padding or hover state.
@mixin menu-simple {
li {
display: inline-block;
margin-#{$global-right}: get-side($menu-item-padding, $global-right);
line-height: 1;
}
a {
padding: 0;
}
}
/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
/// @param {Keyword|Number} $padding [auto] - Length of the margin.
@mixin menu-nested($margin: $menu-margin-nested) {
margin-#{$global-left}: $margin;
}
/// Adds support for icons to Menu items.
/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
@mixin menu-icons($position: side, $base: true) {
@if $base {
@if $global-flexbox {
> li > a {
display: flex;
}
}
@else {
> li > a {
img,
i,
svg {
vertical-align: middle;
+ span {
vertical-align: middle;
}
}
}
}
}
@if $position == side {
> li > a {
@if $global-flexbox {
flex-flow: row nowrap;
}
img,
i,
svg {
margin-#{$global-right}: $menu-icon-spacing;
@if not $global-flexbox {
display: inline-block;
}
}
}
}
@else if $position == top {
> li > a {
@if $global-flexbox {
flex-flow: column nowrap;
}
@else {
text-align: center;
}
img,
i,
svg {
@if not $global-flexbox {
display: block;
margin: 0 auto $menu-icon-spacing;
}
@else {
align-self: stretch;
margin-bottom: $menu-icon-spacing;
text-align: center;
}
}
}
}
}
@mixin menu-text {
padding-top: 0;
padding-bottom: 0;
padding: $menu-item-padding;
font-weight: bold;
line-height: 1;
color: inherit;
}
@mixin foundation-menu {
.menu {
@include menu-base;
@include menu-icons;
// Default orientation: horizontal
&, &.horizontal {
@include menu-direction(horizontal);
}
// Even-width modifier for horizontal orientation
&.expanded {
@include menu-expand;
}
// Vertical orientation modifier
&.vertical {
@include menu-direction(vertical);
}
@include -zf-each-breakpoint($small: false) {
&.#{$-zf-size}-horizontal {
@include menu-direction(horizontal);
}
&.#{$-zf-size}-expanded {
@include menu-expand;
}
&.#{$-zf-size}-vertical {
@include menu-direction(vertical);
}
}
// Simple
&.simple {
@include menu-simple;
}
// Align right
&.align-#{$global-right} {
@if $global-flexbox {
justify-content: flex-end;
}
@else {
@include clearfix;
> li {
float: $global-right;
}
}
}
// Vertical icons
&.icon-top {
@include menu-icons(top, $base: false);
// Make vertical menu with icons on top work
&.vertical {
a > span {
margin: auto;
}
}
}
// Nesting
&.nested {
@include menu-nested;
}
// Active state
.active > a {
background: $menu-item-background-active;
color: $menu-item-color-active;
}
// Menu with border
&.menu-bordered {
li {
border: 1px solid $menu-border;
&:not(:first-child) {
border-top: 0;
}
}
}
// Menu with background hover
&.menu-hover {
li:hover {
background-color: $menu-item-background-hover;
}
}
}
.menu-text {
@include menu-text;
}
// Align center
.menu-centered {
text-align: center;
> .menu {
display: inline-block;
}
}
// Prevent FOUC when using the Responsive Menu plugin
.no-js [data-responsive-menu] ul {
display: none;
}
}
|
Download
