Skip to content

Instantly share code, notes, and snippets.

@tcmulder

tcmulder/nav-mixin.scss

Last active December 20, 2023 15:44
Download ZIP

Revisions

  1. tcmulder renamed this gist Dec 20, 2023. 1 changed file with 0 additions and 0 deletions.
    0 snippet.scss → nav-mixin.scss
    View file
    File renamed without changes.
  2. tcmulder created this gist Jan 3, 2017.
    128 changes: 128 additions & 0 deletions snippet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,128 @@
    /*------------------------------------*\
    //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;
    }
    }
    }
    }
    }
    }