Jquery 试着做一份这样的菜单…一份

我喜欢菜单，我想能够做到……有什么想法吗

---

谢谢

“查看源代码”总是一个很好的起点。你也可以使用FireBug或IE 8+开发者工具等工具来查看网站的功能。

我这里有一个部分解决方案，直到今晚晚些时候我有更多的时间来处理。

可能需要在mouseleave事件上设置一个超时，并在再次鼠标悬停时将其清除

---

更新示例

html

---

现在似乎不想为我加载页面。我建议你拍一张截图，然后剪下你想要的部分。这可能会让其他人更容易，因为有些人不喜欢访问另一个网站只是为了找到你正在谈论的内容。另外，解释一下你已经尝试过或正在考虑尝试的东西也很好。@Blender:那也是。对不起，我不熟悉Chrome及其工具。就像Firebug一样，只有Chromy。哈哈，我喜欢提到IE8+开发者工具，但你没有提到Chrome上帝。；）这真是太棒了……请代我向你脱帽致敬。谢谢：）还有一点工作要做，但因为我在工作，我以后还要看。

$(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);
});

});

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

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