寻找一个菜单系统像Bonobos.com [英] Looking for a Menu System like Bonobos.com
本文介绍了寻找一个菜单系统像Bonobos.com的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要找到一个菜单系统，我可以建立类似于 http：//www.bonobos .com / 。我需要它在每个下拉列表中都有一个静态图片。
I'm trying to find a menu system that I can build a website navigation similar to http://www.bonobos.com/. I need it to have drop downs with a static image within each drop down.
任何帮助或指针都将不胜感激。谢谢。
Any help or pointers would be appreciated. Thanks.
推荐答案
这不是工作奇迹，但没有java脚本（opera，safari，firefox，chrome）。
jQuery代码不需要，只是添加（尝试）一些效果，但是不能很好地工作。
It's not working wonders but works without java script (opera,safari,firefox,chrome). The jQuery code is not needed, is just to add (try to) some effect, but is not working well.
<!doctype html>
<html>
<head>
<title>Horizontal Dropdown CSS Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
text-decoration:none;
margin:0;
padding:0;
border:none;
list-style:none
}
html{background-color:#999}
body{
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color:#000;
text-align:center
}
#wrapper {
display:block;
margin:auto;
width:1024px;
height:100%;
background-color:#aaa;
border:#ccc groove 2px
}
#content {
width:auto;
height:auto;
background-color:#fff
}
#nav {
position:relative;
display:table;
text-align:left;
width:100%;
height:30px;
margin:auto;
background-color:#eee;
border-bottom:#eee groove 2px
}
#horizon-menu {
float:left;
clear:both;
width:800px;
height:30px;
font-weight:700;
background-color:#eee
}
#horizon-menu li {display:inline-block;height:30px}
#horizon-menu li a {display:block;padding:6px;text-decoration:none;color:#555}
#horizon-menu li ul li {display:none}
#horizon-menu li a:hover {padding:6px;background-color:#fff}
#horizon-menu li:hover ul {
display:inline-block;
position:absolute;
z-index:1000;
float:left;
clear:none;
min-width:200px;
width:auto;
min-height:160px;
height:auto;
margin:3px 0 0 -2px;
/*padding:2px;*/
border:#eee groove 2px;
background-color:#eee
}
#horizon-menu li:hover ul img {display:inline;float:left;clear:none}
#horizon-menu li:hover ul a img {background-color:transparent}
#horizon-menu li:hover ul li {
display:inline-block;
width:auto;
height:auto;
float:left;
clear:both;
/*padding:2px*/
}
#horizon-menu li:hover ul li a {display:block;color:#555;text-decoration:none}
#horizon-menu li:hover ul div a {display:block}
#horizon-menu li:hover div {
float:left;
clear:none;
margin-right:2px;
min-width:160px;
width:auto;
min-height:150px;
height:auto;
background-color:#ddd
}
</style>
<script type="text/javascript" src="lib/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').bind('click', function(){
alert('f!');
})
$('#nav, #horizon-menu li ul div').css('display','none');
$('#nav').fadeTo("slow", 1.0);
$('#horizon-menu li a').bind({
mouseenter: function(){
$('#horizon-menu li ul div').fadeTo("slow", 1.0);
},
mouseover: function(){
$('#horizon-menu li ul div').fadeTo("slow", 1.0);
}
});
$('#horizon-menu li ul').bind({
mouseleave: function(){
$('#horizon-menu li ul div').fadeTo("slow", 0);
},
mouseout: function(){
$('#horizon-menu li ul div').fadeTo("slow", 0);
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul id="horizon-menu">
<li><a href="#">MacBook Pro</a>
<ul>
<li>
<div>
<a href="#" title="">Link 1</a>
<a href="#" title="">Link 2</a>
<a href="#" title="">Link 3</a>
</div>
<div>
<a href="#" title=""><img src="http://images.apple.com/home/images/promo_macbookpro_20110302.png" alt="" /></a>
</div>
</li>
</ul>
</li>
<li><a href="#">MacBook Air</a></li>
<li><a href="#">MacBook</a>
<ul>
<li>
<div>
<a href="#" title="">MacBook</a>
<a href="#" title="">Wow!</a>
</div>
<div>
<img src="http://images.apple.com/home/images/promo_macbookpro_20110302.png" alt="" />
</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1><img src="http://images.apple.com/macbookair/images/performance_title20101020.png" alt="Might made light." height="46" width="333"></h1>
<p class="intro">Don’t be fooled by the sliver-thin profile of <a class="ml-smartlink" href="http://en.wikipedia.org/wiki/MacBook">MacBook</a> Air. This small wonder features powerful NVIDIA graphics, an Intel Core 2 Duo processor, lightning-fast flash storage, and long battery life. So while looks may be deceiving, performance doesn’t lie.</p>
<img src="http://images.apple.com/macbookair/images/bg_hardware_20101020.png" alt="" height="441" width="705" />
</div>
</div>
</body>
</html>
这篇关于寻找一个菜单系统像Bonobos.com的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
