是否有任何jquery插件模仿amazon.com菜單佈局

我正在尋找創建一個菜單佈局類似於amazon.com的網頁，我可以有嵌套的菜單，幷包括每個菜單項下的小說明文本。是否有任何jquery插件模仿amazon.com菜單佈局

在我開始創建這個從頭開始，我想看看是否有一個jQuery插件，模仿這種佈局和功能 enter image description here

來源

2012-02-18 leora

您希望支持哪些瀏覽器？這可以很容易地使用CSS來完成。 – 2012-03-03 21:00:34

這裏是一個確切外觀類似http://jsfiddle.net/blackpla9ue/KHLgm/8/

快速CSS唯一的解決辦法我設法得到在幾分鐘內完成。懸停在下拉菜單的第二個項目上。

它非常簡單和直接，如果你需要任何修改添加到只是讓我知道。

來源

2012-03-03 18:54:22 blackpla9ue

不錯，它看起來就像亞馬遜上的那個，但它不是一個插件。 – 2012-03-04 08:29:39

很高興你喜歡它。它不是一個插件，但所有你需要做的就是包含css部分並將css類調用到你的'ul'中 – blackpla9ue 2012-03-04 08:42:14

你想要什麼見本

http://speckyboy.com/2011/07/04/15-fresh-jquery-menu-plugins-and-tutorials/

來源

2012-02-18 14:11:19 Prabhavith

哪一個特別..我沒有看到任何與該功能匹配的頁面 – leora 2012-02-18 15:58:31

嗨Leora，我有你的需求的解決方案。我怎麼能發送你的代碼它太大我不能粘貼在評論或答案。 – w3uiguru 2012-02-28 08:44:40

一下，我以爲你可以先創建一個下拉菜單，稍後再添加描述，稍微看看這個例子，它是非常基本的： http://webdesignerwall.com/tutorials/css3-dropdown-menu 或這裏： http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html

我已經檢查單元上亞馬遜和我發現，他們做同樣的方式，他們只是增加了一類風格吧：

<div class="navSaTagLine tiny">Vibrant color, movies, apps, and more</div>

只是做一個下拉菜單第一和補充說明你要！

來源

2012-03-02 06:50:40

有maaaaany jQuery插件已經做到這一點，但這裏有一個小插件，我裹在10分鐘內：

(function($,window,undefined){ 
    var o; 
    $.fn.amazonLikeMenu = function(data,options){ 
     o = $.extend({},options,$.fn.amazonLikeMenu.defaultOptions); 
     return this.each(function(){ 
      createMenu($(this).addClass(o.classPrefix + '_container'),data); 
     }); 
    }; 
    $.fn.amazonLikeMenu.defaultOptions = { 
     classPrefix : "menu", 
     eventPrefix : "menu" 
    }; 
    function createMenu(container,data,options){ 

     container.data('initial_data',data); 

     var ul = $('<ul />').addClass(o.classPrefix + '_ul').appendTo(container), 
      liTemplate = $('<li />').addClass(o.classPrefix + '_li'), 
      descTemplate = $('<span />').addClass(o.classPrefix + '_desc'), 
      linkTemplate = $('<a href="#"/>').addClass(o.classPrefix + '_link'), 
      hTemplate = $('<h3 />').addClass(o.classPrefix + '_link'); 

     $.each(data,function(i,el){ 
      var li = liTemplate.clone().appendTo(ul); 
      if(el.title && el.link) 
       if(typeof el.link === 'string') 
        linkTemplate 
         .clone() 
         .text(el.title) 
         .attr('href',el.link) 
         .appendTo(li); 

       else 
        { 
         createMenu(li.addClass(o.classPrefix + '_has_submenu').append(hTemplate.clone().text(el.title)),el.link,o); 
        } 
      if(el.desc) 
       descTemplate 
        .clone() 
        .text(el.desc) 
        .appendTo(li); 
     }); 
    }; 
})(jQuery,window)

你的菜單項包括對象的集合（有用的，如果你生成菜單動態地使用來自服務的數據）：

[ 
    { 
     title : 'link 1', 
     link : '#page1' 
    }, 
    { 
     title : 'link 2', 
     link : '#page2', 
     desc : 'this is an awesome link' 
    }, 
    { 
     title : 'link 3', 
     link : [ 
      { 
       title : "submenu link1", 
       desc : "sample description", 
       link : "#submenu_link_1" 
      }, 
      { 
       title : "submenu link2", 
       link : "#submenu_link_2" 
      }, 
      { 
       title : "submenu link3", 
       desc : "sample description", 
       link : "#submenu_link_3" 
      } 
     ], 
     desc : 'I have a submenu' 
    }, 
    { 
     title : 'link 3', 
     link : '#page3', 
     desc : 'I dont have a submenu :((' 
    } 
];

這裏是演示：http://jsfiddle.net/gion_13/6QXZt/。
它是可定製的，所以它可以調整到完全一樣的亞馬遜。

P.S. ：必須記住，在這種情況下，CSS角色比jquery/javascript更大。

來源

2012-03-02 09:18:21