Hanging Menu

Navigation menu animation

by ajinkyax

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>

<div class="header no-js">
    
    <div class="main-menu">
        
        <div class="menu-main-container">
            <ul id="menu-main" class="menu">
                <li class="home current-menu-item"><a href="#" title="Home" >Home</a></li>
                <li class="about"><a href="#">About</a></li> 
                <li class="faves"><a href="#">Favorites</a></li> 
                <li class="contact"><a href="#">Contact</a></li>
            </ul>
        </div>     
        
    </div>
    
    
    
    <div id="search-area">
        <div id="search-reveal-container">
        </div> 
        
        <div id="search-reveal">
            
            <div id="search-bar">
                <form action="#" method="get" id="searchform"> 
                    <input type="text" name="query" id="query" class="searchbox" size="50" value="click here to search..." name="s" id="s" onfocus="if (this.value == 'click here to search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'click here to search...';}" /> 
                    
                    <input type="hidden" name="search" value="Search"> 
                </div>
                    
                    
                    
                    
                </div>
                    
                    <div id="search-handle"></div>
                    
                    
                    
                    
                    
                </div>

CSS

@charset "utf-8";
/* CSS Document */
@import url('reset.css');

body {background: white; margin: 0 auto;}

.header {background: #f5f5f5; height: 185px; width: 100%; border: 3px solid black; margin-top: -10px; padding-left: 10px;}


.main-menu {margin: 0 auto; float: left;}

#menu-main {list-style: none; margin: 0; padding: 0px; float: left; overflow: hidden}
#menu-main li {float: left;  font-size: 18px; margin: 0;}
#menu-main a {background-image: url(http://dev.aintyomamasblog.com/wp-content/themes/lefthanded/images/layout/menu-sprite7.png); background-repeat: no-repeat; color: black; display: block; height: 177px; text-indent: -9999px; position: relative; top: -36px}


#menu-main .home a {width: 87px; background-position: 0 -10px;}
#menu-main .about a {width: 99px; background-position: -87px -8px;}
#menu-main .faves a {width: 99px; background-position: -186px -8px;}
#menu-main .contact a {width: 121px; background-position: -289px -8px;}
#menu-main .search a {background-image: url(http://dev.aintyomamasblog.com/wp-content/themes/lefthanded/images/layout/menu-sprite7.png); width: 87px; background-position: 0 -15px;}

#menu-main .current-menu-item a {top: 0}

#menu-main .home.current-menu-item a {background-position: 0 -14px;}
#menu-main .about.current-menu-item a {background-position: -87px -8px;}
#menu-main .faves.current-menu-item a {background-position: -186px -8px;}
#menu-main .contact.current-menu-item a {background-position: -289px -6px;}

#menu-main .home.current-menu-item a:hover {background-position: 0 -284px;}
#menu-main .about.current-menu-item a:hover {background-position: -87px -277px;}
#menu-main .faves.current-menu-item a:hover {background-position: -186px -277px;}
#menu-main .contact.current-menu-item a:hover {background-position: -289px -277px;}


/* No JS*/
.no-js #menu-main .home a:hover {background-position: -0px -280px; }
.no-js #menu-main .about a:hover {background-position: -87px -278px; }
.no-js #menu-main .faves a:hover...

JavaScript

$('#menu-main').children(':not(.current-menu-item)').children().hover(function() {
    $(this).stop(true, false).animate({
        top: '0'
    }, 200);
}, function() {
    $(this).animate({
        top: '-36px'
    }, {
        duration: 800,
        easing: 'easeOutBounce'
    });
});

$('#menu-main .current-menu-item').children().hover(function() {
    $(this).stop(true, false).animate({
        top: '0'
    }, 100);
}, function() {
    $(this).animate({
        top: '-3px'
    }, 200);
});



$('#search-area').hover(function() {
    $('#search-reveal-container').slideDown(200);
}, function() {
    if (!$('#query').is(':focus')) {
        $('#search-reveal-container').slideUp({
            duration: 800,
            easing: 'easeOutBounce'
        });
    }
});

$('.header').removeClass('no-js');