试图制作这样的菜单......一个

Question

http://www.antisweden.no/

我喜欢菜单，我希望能够做到这一点......任何想法？

感谢

Answer 1

“查看来源”始终是一个好的开始。您还可以使用FireBug或IE 8+开发人员工具等工具来查看网站的工作方式。

Answer 2

我在这里得到了一些局部解决方案，直到今晚我有更多的时间来处理它 http://jsfiddle.net/nickywaites/jVDUX/

可能需要在mouseleave事件上设置超时并在它们再次鼠标悬停时清除它。

---

更新了示例

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;
}