Creates a dropdown or nested navigation.

nav-mixin.scss

/*------------------------------------*\
    //Navigation
\*------------------------------------*/

// Use this mixin to add basic nav styling.
// Just add the following code within your styles.
//
//
//      @include nav(
//          $type: 'dropdown',          //nav type: dropdown or nested
//          $nav-container: '.nav',     //.nav by default
//          $fade: .3s,                 //fade speed (take out for no animation)
//          $easy-hover: 50px,          //amount of invisible overflow for sub menu (take out to not use)
//          $easy-hover-top: 0          //set top easy-hover value (you can also set $easy-hover-right, -bottom, and -left separately)
//      );

@mixin nav(
    $type: 'dropdown',
    $nav-container: '.nav',
    $fade: false,
    $easy-hover: false,
    $easy-hover-top: false,
    $easy-hover-right: false,
    $easy-hover-bottom: false,
    $easy-hover-left: false
){
    @if $type == dropdown {
        #{$nav-container} {
            position: relative;
            z-index: 10;
            ul {
                li {
                    display: block;
                    float: left;
                    list-style: none;
                }
                ul {
                    visibility: hidden;
                    padding: 0;
                    @if $fade {
                        @include transition-property(#{opacity, visibility, background-color});
                        @include transition-duration(#{$fade, 0s});
                        @include transition-delay(#{0s, $fade});
                    }
                    @if $easy-hover {
                        &:after {
                            content: "";
                            position: absolute;
                            @if $easy-hover-top {
                                top: -1 * $easy-hover-top;
                            } @else {
                                top: -1 * $easy-hover;
                            }
                            @if $easy-hover-bottom {
                                bottom:  -1 * $easy-hover-bottom;
                            } @else {
                                bottom:  -1 * $easy-hover;
                            }
                            @if $easy-hover-left {
                                left:  -1 * $easy-hover-left;
                            } @else {
                                left:  -1 * $easy-hover;
                            }
                            @if $easy-hover-right {
                                right:  -1 * $easy-hover-right;
                            } @else {
                                right:  -1 * $easy-hover;
                            }
                            background-color: #000;
                            filter: alpha(opacity=0);
                            opacity: 0;
                            z-index: -1;
                        }
                    }
                }
            }
            //local nav
            li {
                ul {
                    display: block;
                    position: absolute;
                    opacity: 0;
                }
                &:hover {
                    ul {
                        opacity: 1;
                        visibility: visible;
                        @if $fade {
                            -webkit-transition-delay: 0s, 0s;
                            -moz-transition-delay: 0s, 0s;
                            -o-transition-delay: 0s, 0s;
                            transition-delay: 0s, 0s;
                        }
                    }
                }
            }
        }
    }
    @if $type == 'nested' {
        #{$nav-container} {
            li {
                float: left;
                list-style: none;
                ul {
                    padding: 0;
                }
                li {
                    clear: both;
                }
                a {
                    display: block;
                    text-decoration: none;
                }
            }
            //global nav
            ul {
                //local nav
                ul {
                    padding:0;
                    li {
                        float: left;
                        clear: both;
                    }
                }
            }
        }
    }
}