试图让这样的菜单...一个

Question

http://www.antisweden.no/

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

感谢

Answer 1

我已经有了一些部分的解决方案，直到今天晚些时候我还有更多的时间来处理它。
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; 
} 

Answer 2

“查看源文件”始终是一个良好的开端。您也可以使用FireBug或IE 8+ Developer Tools等工具来查看网站的功能。