CODEWITHSUNDEEP
jquerycss
webb
webb

Reputation: 215

Trying to make a menu like this...one

http://www.antisweden.no/

I love the menu and i want to be able to do it...any ideas?

ThanksHere's the menu, with the sub menu

Upvotes: 1

Views: 118

Answers (2)

Nicky Waites
Nicky Waites

Reputation: 2428

I've got a bit of a partial solution here until I have some more time to work on it later tonight.
http://jsfiddle.net/nickywaites/jVDUX/

Will probably need to set a timeout on the mouseleave event and clear it if they mouse over again.

Updated example

http://jsfiddle.net/nickywaites/jVDUX/5/

$(function() {

var timeout;
var menucontent = $("#menucontent");
$('#menu').mouseenter(function() {
    clearTimeout(timeout);
    menucontent.animate({
        marginLeft: '-550px'
    }, 1000);
});

menucontent.mouseenter(function() {
    clearTimeout(timeout);
});

menucontent.mouseleave(function() {
    timeout = setTimeout(function() {
        menucontent.animate({
            marginLeft: '50px'
        }, 1000);
    }, 3000);
});

});

html

<div id="body">
<div id="menu">
    <div id="menucontent">
        <ul>
            <li><a href="#content1">Link1</a></li>
            <li><a href="#content2">Link2</a></li>
            <li><a href="#content3">Link3</a></li>
            <li><a href="#content4">Link4</a></li>
            <li><a href="#content5">Link5</a></li>
            <li><a href="#content6">Link6</a></li>            
        </ul>        
    </div>
</div>

css

#body {
   height:800px;
   width:600px;   
   border:1px solid black;
   overflow:hidden;
}

#menu {
   position:relative;
   top: 100px;   
   float:right;
   background-color:black;
   width:50px;
   height:50px;
   color:white;
}

#menucontent {
   width:550px;
   height:100%;
   margin-left:700px;
   background-color:black;
}

#menucontent ul{
   margin: 0;
   padding: 0;
   height:100%;
   float: left;}

#menucontent ul li{
   display: inline;
   height:100%;
}

#menucontent ul li a{
   color:white;
   float: left;
   text-decoration: none;
   padding: 10px 10px;
   height:30px;
}

#menucontent ul li a:visited{}

#menucontent ul li a:hover {
   background-color:#0b75b2;
}

Upvotes: 0

Andrew Cooper
Andrew Cooper

Reputation: 32596

"View Source" is always a good place to start. You could also use a tool like FireBug or the IE 8+ Developer Tools to see how the site does what it does.

Upvotes: 3

Related Questions