CSS3 Menu Dropdowns

css3-menu-dropdowns.markdown

CSS3 Menu Dropdowns

Some pretty awful dropdown menu effects done with CSS

A Pen by Colin on CodePen.

License.

index.html

<header>
<nav id="nav" class="ry">
  <ul id="main-menu">
    <li>
      <a href="#"><i class="fa fa-home"></i> Home</a>
    </li>
    <li>
      <a href="#"><i class="fa fa-user"></i> About <i class="fa fa-caret-down"></i></a>
        <ul class="submenu">
        <li><a href="#0">Meet the Team</a></li>
        <li><a href="#0">Careers</a></li>
        <li>
          <a href="#0">More Items <i class="fa fa-caret-right"></i></a>
           <ul class="submenu">
            <li><a href="#0">A Sub-Item</a></li>
            <li>
              <a href="#0">A Sub-Item</a>
             </li>
            <li>
              <a href="#0">A Sub-Item</a>
             </li>
          </ul>  
         </li>
      </ul>  
    </li>
    <li>
      <a href="#"><i class="fa fa-briefcase"></i> Clients <i class="fa fa-caret-down"></i></a>
       <ul class="submenu">
        <li><a href="#0">Lorem</a></li>
        <li><a href="#0">Aliquam</a></li>
        <li><a href="#0">Vestibulum</a></li>
        <li><a href="#0">Ipsum</a></li>
        <li><a href="#0">Consectetur</a></li>
      </ul>  
    </li>
    <li>
      <a href="#"><i class="fa fa-comment"></i> Contact Us</a>
    </li>
  </ul>
</nav>  
</header>

<main id="main">
  
  <div class="menu-chks">
    
    <h3>Transforms:</h3>
    
     <label for="rt"><input name="efx" id="rt" type="radio" value="rt" checked/> <span>Rotate</span></label>
    <label for="ry"><input name="efx" id="ry" type="radio" value="ry" checked/> <span>Rotate Y</span></label>
    <label for="rx"><input name="efx" id="rx" type="radio" value="rx" /> <span>Rotate X</span></label>
    <label for="fd"><input name="efx" id="fd" type="radio" value="fd" /> <span>Fade Down</span></label>
    <label for="fu"><input name="efx" id="fu" type="radio" value="fu" /> <span>Fade Up</span></label>
    
     <label for="sc"><input name="efx" id="sc" type="radio" value="sc" /> <span>Scale</span></label>
    
    <label for="mv"><input name="efx" id="mv" type="radio" value="mv" /> <span>Slide Right</span></label>
    
    <label for="dc"><input name="efx" id="dc" type="radio" value="dc" /> <span>Door Close</span></label>
    
    <h3>Timing Functions:</h3>
    
    <label for="ln"><input name="ease" id="ln" type="radio" value="ln"/> <span>Linear</span></label>
    
    <label for="es"><input name="ease" id="es" type="radio" value="es" checked/> <span>Ease</span></label>
    
     <label for="ei"><input name="ease" id="ei" type="radio" value="ei"/> <span>Ease-In</span></label>
    
     <label for="eo"><input name="ease" id="eo" type="radio" value="eo"/> <span>Ease-Out</span></label>
    
     <label for="eiob"><input name="ease" id="eiob" type="radio" value="eiob" /> <span>Ease-In-Out-Back</span></label>
    
  </div>
  
  <div class="efx-info">
    <h1 id="efx-name">Rotate Y</h1> <h1>+</h1>
    <h1 id="efx-ease">Ease</h1>
  </div>
  
</main>

<footer>
  
</footer>

script.js

radioChange( $('input[name="efx"]'), $('#nav'), $('#efx-name') );
radioChange( $('input[name="ease"]'), $('#main-menu'), $('#efx-ease'));

function radioChange(inputs, addClassTo, appendTo) {
  inputs.hide();
  inputs.on( 'change', function() { 
    inputs.each( function() {
      if ( $(this).is(':checked') ) {
        addClassTo.attr('class', $(this).val() );
        var radioName = $(this).next('span').text(); 
        appendTo.text(radioName);
      }
  
    });
  }); 
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "bourbon";

$drk: #34495E;
$grn: #16A085;
$wht: #f5f5f5;

*{@include box-sizing(border-box);}

%fix {
  &:after {clear:both;content:"";display:table;}
  &:before { content:"";display:table;} }

ul {list-style: none;padding:0; margin: 0;@extend %fix;}

body {
  font-family: "Raleway";
  font-weight: 400;
  color: $drk;
  background: darken($wht,2%);
}

header {
  @extend %fix;
  background: darken($drk,4%);
  padding: 0 7%;
  @include transform-style(preserve-3d);
  box-shadow: 0 2px 5px rgba(#444,.3);
  @include perspective(1555px);
}

#main {
  @extend %fix;
  padding: 2.5em 7%;
  
  .efx-info {
    width: 49%;
    float: left;
    padding: 2em 1em;
    font-weight: 700;
    border-radius: .2em;
    
    h1 {
      line-height: 1;
      display: inline-block;
      padding: .1em .2em;
     font-size: 5em;
     margin: 0;
     background: darken($wht,7%);
    }
    
    p {
      margin: 0;
    }
  }
  
  #efx-name {
    color: $grn;
    font-weight: 900;
    border-bottom: 4px solid $wht
  }
  
  #efx-ease {
   color: $drk;
  }
  
  .menu-chks {
    position: relative;
    line-height: 1;
    font-size: .9em;
    width: 45%;
    float: right;
    
    input {
      margin-right: .5em;
      
      &:checked + span {
        color: $grn;
        
        &:before {
          content: "\f046";
          
        }
      }
    }
    
    span {@include transition(all .2s ease);}
    
    span:before {
      font-family: 'FontAwesome';
      position: absolute;
      left: 12px;
      top: 10px;
      color: lighten($drk,4%);
      content:"\f096";
      font-size: 1.4em;
    }
    
    label {
      color: darken($wht,5%);
      font-weight: 600;
      display: inline-block;
      position: relative;
      margin: .25em;
      background: darken($drk, 4%);
      padding: .8em 1.2em .8em 2.5em;
      border-radius: .4em;
      
      &:hover {
        cursor: pointer;
      }
    }
  }
}

nav {
  
  li {
    position: relative;
    display: inline-block;
    float: left;
  }
  
  a {
    position: relative;
    z-index: 599;
    color: $wht;
    background: darken($drk,4%);
    text-decoration: none;
    display: block;
    padding: 1.5em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    @include transition(all .2s ease);
    
    i[class*="caret"] {
      color: lighten($drk,4%);
      margin-left: .15em;
    }
    
    &:hover {
      color: $grn;
    }
    
    &:hover + .submenu {
      opacity: 1;
      @include transform(rotateX(0deg));
      visibility: visible;
    }
  }
  
  .eiob .submenu {
    @include transition(all .3s $ease-in-out-back, opacity .2s linear);
  }
  
  .ln .submenu {
    @include transition(all .3s linear);
  }
  
  .ei .submenu {
     @include transition(all .3s ease-in, opacity .2s linear);
  }
  
  .eo .submenu {
     @include transition(all .3s ease-out, opacity .2s linear);
  }
  
  .submenu {
    display: block;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: 499;
    width: 14em;
    top: 100%;
    left: 0;
    background: darken($drk,4%);
    box-shadow: 0 2px 5px rgba(#444,.3);
    @include transform-origin(top center);
    @include transform(rotateX(-90deg));
    @include transition(all .25s ease);
    
    li > .submenu {
      top: 0;
      left: 100%;
    }
    
    &:hover {
     opacity: 1;
     @include transform(rotateX(0deg));
     visibility: visible;
    }
    
    li {
      float: none;
      display: block;
    }
    a {
      width: 100%;
      display: block;
      font-weight: 300;
     // border-bottom: 2px solid darken($grn,4%);
      padding: 1.4em 2em;
      &:hover {
        color: $wht;
        background: darken($grn,2.5%);
      }
    }
    
  }
  
}

nav.rx {
  
  li {
     &:hover + .submenu {
     opacity: 1;
      @include transform(rotateY(0deg));
    }
  }
  
  .submenu {
    @include transform(rotateY(-90deg));
    
    &:hover {
     @include transform(rotateY(0deg));
    }
  }
  
}

/*=== Fade Dwn ===*/
nav.fd {
  li {
     &:hover + .submenu {
     opacity: 1;
      @include transform(translateY(0px));
     
    }
  }
  
  .submenu {
    @include transform-origin(center center);
     @include transform(translateY(-50px));
    
    &:hover {

       @include transform(translateY(0px));
    }
  }
  
}


nav.fu {
  
  li {
     &:hover + .submenu {
     opacity: 1;
      @include transform(translateY(0px));
     
    }
  }
  
  .submenu {
    @include transform-origin(center center);
     @include transform(translateY(20px));
    
    &:hover {

       @include transform(translateY(0px));
    }
  }
  
}

/*=== Scale ===*/
nav.sc {
  li {
     &:hover + .submenu {
     opacity: 1;
      @include transform(rotateY(0deg) scale(1));
     
    }
  }
  
  .submenu {
    @include transform-origin(center top);
     @include transform(scale(0));
    
    &:hover {
       @include transform(rotateY(0deg) scale(1));
    }
  }
}

/*==== Rotate ====*/
nav.rt {
  li {
     &:hover + .submenu {
      @include transform(rotate(0deg));
    }
  }
  .submenu {
    @include transform-origin(center center);
     @include transform(rotate(180deg));
    
    &:hover {
       @include transform(rotate(0deg));
       @include transform(scale(1));
    }
  }
  
}


/*==== Move/Skew In ====*/
nav.mv {
  li {
     &:hover + .submenu {
      @include transform(translateX(0px) skewX(0deg));
    }
  }
  .submenu {
    @include transform-origin(center center);
     @include transform(translateX(-40px) skewX(-7deg));
    
    &:hover {
       @include transform(skewX(0deg));
    }
  }
  
}

/*==== Door ====*/
nav.dc {
  li {
     &:hover + .submenu {
      @include transform(rotateY(0deg));
    }
  }
  .submenu {
    @include transform-origin(left top);
     @include transform(rotateY(-90deg));
    
    &:hover {
       @include transform(rotateY(0deg));
    }
  }
  
}