Tag Archives: animated navigation

[jQuery] animated navigation menu

454 Replies 
<html>
<head>
<script charset="utf-8" type="text/javascript" src="../../lib/jquery-1.4.min.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<style>
#container {
  position: relative;
}

#navigation {
  position:absolute;
  width: inherit;
  top: 0; 
  right: 0;
  margin: 0;
}

#navigation li {
  height:20px;
  float:left;
  list-style-type: none;
  width:70px;
  padding:3px;
  border-right:1px solid #3687AF;
  background-color: #015287;
  background-repeat: no-repeat;
  background-position: center 30px;
}

#navigation li a {
  color: #FFFFFF;
}


#navigation #home{
  background-image:url('icon_home.png');
}

</style>
</head>
<body>
<div id="container">
  <div id="navigation">
    <ul>
      <li id="home" style="height: 20px; display: block; overflow: hidden;">
        <a href="#">Home</a>
      </li>
      <li style="height: 20px; display: list-item;">
        <a href="#">Buy Now!</a>
      </li>
      <li style="height: 20px; display: block; overflow: hidden;">
        <a href="#">About Us</a>
      </li>
      <li style="height: 20px; display: block; overflow: hidden;">
        <a href="#">Gift Ideas</a>
      </li>
    </ul>
  </div>
</div>

<script>
(function($) {
  $('#navigation li').hover(
    function() {
      $(this)
      .stop(true)
      .animate(
        {height: '60px'},
        {duration: 500, easing: 'easeOutBounce'}
      )
    },
    function() {
    $(this)
    .stop(true)
    .animate(
      {height:'20px'},
      {duration: 500, easing: 'easeOutCirc'}
    )
    }
  )
})(jQuery);

</script>
</body>
</html>

[jQuery] animated navigation(Bouncy animated menu)

Leave a reply 
<div id="navigation">
  <ul>
    <li id="home" style="height: 20px; display: block; overflow: hidden;">
      <a href="#">Home</a>
    </li>
    <li style="height: 20px; display: block; overflow: hidden;">
      <a href="#">Buy Now!</a>
    </li>
    <li style="height: 20px; display: block; overflow: hidden;">
      <a href="#">About Us</a>
    </li>
    <li style="height: 20px; display: block; overflow: hidden;">
      <a href="#">Gift Ideas</a>
    </li>
  </ul>
</div>


<script type="text/javascript">
$(document).ready(function(){
  $( '#navigation li' ).hover(function(){
    $( this )
    .stop( true )
    .animate(
      {height: '60px'},
      {duration: 600, easing: 'easeOutBounce'}
      )
  },function(){
    $( this ) 
    .stop( true )
    .animate(
      {height:'20px'},
      {duration:600, easing: 'easeOutCirc'}
      )
  });
});
</script>

[jQuery] animated navigation

Leave a reply 
<div id="navigation">
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Buy Now!</a>
    </li>
    <li>
      <a href="#">About Us</a>
    </li>
    <li>
      <a href="#">Gift Ideas</a>
    </li>
  </ul>
</div>

<script src="script.js" type="text/javascript">
  $(document).ready(function(){
    $('<div id="navigation_blob"></div>').css({
      width: $('#navigation li:first a').width() + 10,
      height: $('#navigation li:first a').height() + 10
    }).appendTo('#navigation').hide();
    
    $('#navigation a').hover(function(){
      // Mouse over function
      $('#navigation_blob').animate(
        {width: $(this).width() + 10, left: $(this).position().left},
        {duration: 'slow', easing: 'easeOutElastic', queue: false}
      );
    }, function() {
      // Mouse out function
      var leftPosition = $('#navigation li:first a').position().left;
      $('#navigation_blob').animate(
      {width:'hide'},
      {duration:'slow', easing: 'easeOutCirc', queue:false}
      ).animate({left: leftPosition}, 'fast' );
    });
  });
</script>