"Dropdown" menu with sliding effect

"Dropdown" menu with sliding effect.markdown

"Dropdown" menu with sliding effect

• Added fadein effect
• Removed the fade effect
• Added a new transition for the submenu

A Pen by Frederik Jensen-Petersen on CodePen.

License.

index.html

<div class="page__wrapper">
  <nav class="page__nav">
    <ul>
      <span class="page__logo">
        <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/100289/profile/profile-512_5.jpg" alt="" />
      </span>
      <li class="nav__active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a>
        <ul class="nav_sub">  
          <li><a href="#">Templates</a></li>
          <li><a href="#">Photos</a></li>
          <li><a href="#">Wallpapers</a></li>
          <li><a href="#">Merchandise</a></li>
        </ul> 
      </li>
      <li><a href="#">Gallery</a>
        <ul class="nav_sub"> 
          <li><a href="#">Weddings</a></li>
          <li><a href="#">Family</a></li>
          <li><a href="#">Nature</a></li>
          <li><a href="#">Abstract</a></li> 
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  
  <div class="page__content">
    <h1>"Dropdown" menu with sliding effect</h1>
    <pre>
      <code class="javascript">
$(document).ready(function() {    
  //variables
  var nav = $(".page__nav");
  var nav_item = $(".page__nav ul li")
  var sn = $(".page__nav ul ul");
  var pc = $(".page__content");
  
  //get the navigations width and set the "left" for the "dropdown"
  sn.css("left", nav.width());
  
  //Bind the different events for the items
  nav_item.bind("mouseover", open_sub);
  nav_item.bind("mouseout", close_sub);
  
  //Open the submenu
  function open_sub() {
    var this_offset = $(this).offset().top;
    $(this).find("ul").css("padding-top", this_offset);
    $(this).find("ul").css("min-width", "200px");
  }
  
  //Close the submenu
  function close_sub() {
    $(this).find("ul").css("min-width", "0");
  }
});
      </code>
    </pre>
  </div>
</div>

script.js

$(document).ready(function() {    
  //variables
  var nav = $(".page__nav");
  var nav_item = $(".page__nav ul li")
  var sn = $(".page__nav ul ul");
  var pc = $(".page__content");
  var nav_sub = $(".nav_sub");
  
  //get the navigations width and set the "left" for the "dropdown"
  sn.css("left", nav.width());
  
  //set the padding-top equal to parrent of submenu
  nav_sub.each(function() {
    $(this).css("padding-top", $(this).parent().offset().top);
  });
    
  //Bind the different events for the items
  nav_item.bind("mouseover", open_sub);
  nav_item.bind("mouseout", close_sub);
  
  //Open the submenu
  function open_sub() {
    $(this).find("ul").css("min-width", "200px");
  }
  
  //Close the submenu
  function close_sub() {
    $(this).find("ul").css("min-width", "0");
  }

//----------------------------------
  //Ignore this
  $('pre code').each(function(i, e) {
      hljs.highlightBlock(e);
  }); 
});

scripts

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

style.css

$mc: #EF4F41
$mcd: #C63D32
$lw: #efefef
$white: #fff
$black: #272727

*, *::before, *::after
  box-sizing: border-box

html, body
  margin: 0
  padding: 0
  
body
  background-color: $lw
  
.page__wrapper
  display: flex
  justify-content: row

.page__nav
  order: 1
  display: block
  height: 100vh
  
  background-color: $white
  
  -webkit-transition: all .20s ease
  -moz-transition: all .20s ease
  -o-transition: all .20s ease
  transition: all .20s ease
  
  .nav__active
    box-shadow: inset 3px 0px 0px $mc
  
  ul
    margin: 0
    padding: 0
  
  //Start dropdown menu
  ul ul
    display: block
    position: absolute
    top: 0
    width: 0
    height: 100vh
    overflow: hidden
    
    background-color: $mc
    
    -webkit-transition: all .20s ease
    -moz-transition: all .20s ease
    -o-transition: all .20s ease
    transition: all .20s ease
    
  ul ul li:hover
    background-color: $mcd
    box-shadow: inset 0px 0px 0px $mc
    
  ul ul li a
    color: $white
    
  ul li:hover > ul
    min-width: 200px
    
  //end dropdown menu
    
  span
    display: block
    padding-top: 25px
    width: 100%
    height: 150px
    
    color: $white
    font-family: sans-serif
    font-size: 24px
    text-align: center
    
    background-color: $mc
  
  span img
    width: 100px
    
  ul li
    display: block
    list-style: none
    
    &:hover
      box-shadow: inset 3px 0px 0px $mc
    
  ul li a
    display: block
    padding: 24px 52px
    
    color: $black
    font-family: sans-serif
    font-size: 16px
    text-align: center
    text-decoration: none
    
    box-shadow: 0px 1px 0px 0px rgba(150,150,150,.1)
    
.page__content
  order: 2
  
  margin: 0 auto
  padding: 16px
  width: 70vw
  height: 100vh
  z-index: -2
  
  h1
    margin: 0
    padding: 16px 0px
    
    color: $black
    font-family: sans-serif
    font-weight: 300
  
    border-bottom: 1px solid rgba(0,0,0,.1)

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai_sublime.min.css" rel="stylesheet" />