A CodePen by Joshua P. Larson.

Fixed-Nav-HoverIntent-Example.markdown

Fixed Nav HoverIntent Example

I ended up building a funky bottom-fixed nav which had a full-width submenu. This example includes the "slide-up" CSS3 animation as well as the inclusion of the HoverIntent plugin.

A Pen by Joshua P. Larson on CodePen.

License.

index.html

<nav role="navigation">
  <div class="wrapper">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a>
        <ul>
          <div class="wrapper">
            <li>Company Name</li>
            <li>Company Name</li>
            <li>Company Name</li>
            <li>Company Name</li>
            <li>Company Name</li>
            <li>Company Name</li>
            <li>Company Name</li>
            <li>Company Name</li>
            <li>Company Name</li>
          </div>
        </ul>  
      </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>

<div class="main">
  <div class="wrapper">
    <h1>Fixed Nav HoverIntent Example</h1>
    
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores perspiciatis ab ex aut inventore eaque!
    </p>
    
    <p>
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>  
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis amet consequuntur ab explicabo atque voluptas a assumenda et tenetur placeat deserunt repudiandae ea quos totam minima vel reiciendis! Inventore quibusdam quidem autem recusandae modi neque laboriosam eveniet nostrum commodi magnam tenetur dolorum debitis dignissimos. Nisi nesciunt libero molestias odio maxime laboriosam animi consequatur nulla eaque cumque eos voluptatem suscipit numquam qui quo officiis illo. Debitis nulla dicta in soluta fugit nobis quas ipsam quia fuga reprehenderit molestiae inventore? Inventore molestiae cum aperiam dignissimos laboriosam totam quod delectus nemo nam molestias ullam asperiores itaque labore quasi iure quia tempore qui accusamus.
    </p>
    
    <p>
      <img src="http://placehold.it/1000x400" alt="Image" />
    </p>
    
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores perspiciatis ab ex aut inventore eaque!
    </p>
    
    <p>
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>  
    
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis amet consequuntur ab explicabo atque voluptas a assumenda et tenetur placeat deserunt repudiandae ea quos totam minima vel reiciendis! Inventore quibusdam quidem autem recusandae modi neque laboriosam eveniet nostrum commodi magnam tenetur dolorum debitis dignissimos. Nisi nesciunt libero molestias odio maxime laboriosam animi consequatur nulla eaque cumque eos voluptatem suscipit numquam qui quo officiis illo. Debitis nulla dicta in soluta fugit nobis quas ipsam quia fuga reprehenderit molestiae inventore? Inventore molestiae cum aperiam dignissimos laboriosam totam quod delectus nemo nam molestias ullam asperiores itaque labore quasi iure quia tempore qui accusamus.
    </p>
    
  </div>
</div>

script.js

/* HOVERINTENT PLUGIN AT TOP, PAGE SCRIPT AT BOTTOM */

/*!
 * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
 * http://cherne.net/brian/resources/jquery.hoverIntent.html
 *
 * You may use hoverIntent under the terms of the MIT license.
 * Copyright 2007, 2013 Brian Cherne
 */
(function(e){e.fn.hoverIntent=function(t,n,r){var i={interval:100,sensitivity:7,timeout:0};if(typeof t==="object"){i=e.extend(i,t)}else if(e.isFunction(n)){i=e.extend(i,{over:t,out:n,selector:r})}else{i=e.extend(i,{over:t,out:t,selector:n})}var s,o,u,a;var f=function(e){s=e.pageX;o=e.pageY};var l=function(t,n){n.hoverIntent_t=clearTimeout(n.hoverIntent_t);if(Math.abs(u-s)+Math.abs(a-o)<i.sensitivity){e(n).off("mousemove.hoverIntent",f);n.hoverIntent_s=1;return i.over.apply(n,[t])}else{u=s;a=o;n.hoverIntent_t=setTimeout(function(){l(t,n)},i.interval)}};var c=function(e,t){t.hoverIntent_t=clearTimeout(t.hoverIntent_t);t.hoverIntent_s=0;return i.out.apply(t,[e])};var h=function(t){var n=jQuery.extend({},t);var r=this;if(r.hoverIntent_t){r.hoverIntent_t=clearTimeout(r.hoverIntent_t)}if(t.type=="mouseenter"){u=n.pageX;a=n.pageY;e(r).on("mousemove.hoverIntent",f);if(r.hoverIntent_s!=1){r.hoverIntent_t=setTimeout(function(){l(n,r)},i.interval)}}else{e(r).off("mousemove.hoverIntent",f);if(r.hoverIntent_s==1){r.hoverIntent_t=setTimeout(function(){c(n,r)},i.timeout)}}};return this.on({"mouseenter.hoverIntent":h,"mouseleave.hoverIntent":h},i.selector)}})(jQuery)

/* END HOVERINTENT PLUGIN */

$('nav').hoverIntent(function() {
  
  // Check to see if a timer was set
  var timer = $(this).data('timer');
  if (timer) {
    clearTimeout(timer);
  }
  
  $(this).addClass('active');
  
},function(){
  var li = $(this);
  
  // Set a timer to remove the active class
  li.data('timer', setTimeout(function() {
    li.removeClass('active');
  }, 500)); 
}, 'li');

style.scss

@import "compass";
/* Reset */
nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

nav {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  padding: 0 1em 1em;
  background: #dddddd;
  
  a {
    color: #333;
    text-transform: uppercase;
    text-decoration: none;
    
    &:hover {
      color: #f16477;
    }
  }
  
  > .wrapper {
    padding-top: 0;
  }
  
  ul {
    li {
      @include inline-block;
      padding-top: 1em;
      margin-right: 1em;
      
      &.active ul {
        max-height: 7em;
        opacity: 1;
      }
    } 
  }
  
  ul li ul {
    // Hide by default
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: #efefef;
    bottom: 4em;
    
    @include box-shadow(0 0 5px rgba(0, 0, 0, 0.25));
    @include transition(all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275));
    @include transition-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1.275));
    
    .wrapper {
      @include columns(3);
    }
    
    li {
      display: block;
      padding-top: 0.5em;
    }
  }
}

.wrapper {
  padding: 1em;
  max-width: 1000px;
  margin: 0 auto;
}

.main {
  padding-bottom: 4em;
}