寻找类似Bonobos.com的菜单系统

我在寻找一个菜单系统，我可以建立类似于的网站导航。我需要它在每个下拉菜单中都有一个静态图像。寻找类似Bonobos.com的菜单系统

任何帮助或指针，将不胜感激。谢谢。

2011-03-08 tg4fsi

你到目前为止有什么？你有什么尝试？你在做什么标记？ – 2011-03-08 22:25:57

难道你不能只修改他们的代码来适应你的需求？ :) – drudge 2011-03-08 22:29:18

我会首先做一个定期的下拉菜单（可能是为了开发这个开源许多开源项目之一，例如http://vandelaydesign.com/blog/web-development/jquery-drop-down-menus/）然后调整CSS，使下拉内容的右侧有额外的空间，并根据设置的下拉选项将该空间设置为具有适当的背景图像。 – 2011-03-09 02:51:49

这不是奇迹，但没有Java脚本（歌剧，safari，firefox，chrome）。不需要jQuery代码，只是添加（尝试）一些效果，但效果不佳。

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

来源

2011-03-09 16:30:58 tenshimsm

非常好...非常感谢你！ – tg4fsi 2011-03-11 21:48:53

寻找类似Bonobos.com的菜单系统

回答

相关问题