jQuery / CSS - Slide Out Menu (Fixed Header)

Question

I am trying to come up with a creative way to use a fixed header nav menu, and came across a website that has something that would work perfectly for me: http://ishothim.com/

Does anyone have some insight as to how to go about mimicking this menu? Mostly just the button to slide out menu on hover. I think I would just leave it like that instead of have a full menu appear once you scroll down like this site does.

Answer 1

Ok so here is what I ended up doing:

HTML:

<div id="menuIcon" class="icon active"></div>
<div class="menu">
<ul>
<li><a href="home" class="active">Home</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Last Page</a></li>
</ul>   
</div>

CSS:

    nav{
    position:fixed;
    display:inline-block; 
    vertical-align:middle;
    right:40px;
    top:40px;
    padding:4px;
    height:40px;
    width: 40px;
    z-index:9999;
    overflow:hidden;

    text-align: right;
    font-family: 'Londrina Solid', cursive; font-weight: 400;

    background-color:rgba(255,255,255,1.0);
    border-radius: 50px;
    box-shadow: 1px 1px 1px #369;
}

nav .icon{
    position:absolute;
    right:4px;
    background: #FFF url("images/navigation/cog.png") center center no-repeat;
    display:block;
    width: 40px;
    height: 40px;
    cursor:pointer;
    z-index: 9999;
}
nav .menu{
    right:10px;
    position:absolute;
    width: 550px;
    overflow: hidden;
    z-index: 8888;
}
nav ul{
    list-style: none;
    padding:0;
    margin:0 40px;
}
nav ul li{
    float: left;
    margin: 7px 0;
    padding:0 20px;
    font-size: 18px;
}
nav ul li:first-child{
    padding-left:0; 
}
nav ul li:last-child{
    padding-right:0;    
}

JavaScript

    $("#menuIcon").live('click', function() {
        if($(this).hasClass('active')){
            $(this).transition({ rotate: '180deg' },1000,'ease').removeClass('active');
            $("nav").transition({width:'40px'},1000,'ease');
            return; 
        }
        $(this).transition({ rotate: '-180deg' },1000,'ease').addClass('active');
        $("nav").transition({width:'525px'},1000,'ease');
    });