Есть ли плагин jquery, который имитирует расположение меню amazon.com - PullRequest
7 голосов
/ 18 февраля 2012

Я хочу создать веб-страницу с макетом меню, похожим на amazon.com, где я мог бы разместить вложенные меню и включить небольшой текст описания под каждым пунктом меню.

Прежде чем я начну создавать это с нуля, я хотел посмотреть, есть ли плагин jquery, который имитирует этот макет и функциональность enter image description here

Ответы [ 8 ]

16 голосов
/ 03 марта 2012

Вот точный аналог http://jsfiddle.net/blackpla9ue/KHLgm/8/

Быстрое решение только для CSS, которое мне удалось сделать за несколько минут. Наведите на 2-й пункт меню для выпадающего.

Это довольно просто и понятно, и если вам нужны какие-либо изменения, просто дайте мне знать.

5 голосов
/ 10 марта 2013

Бен Камен реализовал хороший, который работает как оригинал.Смотрите код на Github здесь .Он написал интересное сообщение в своем блоге на эту тему.

5 голосов
/ 02 марта 2012

Существуют подключаемые модули jQuery maaaaany, которые уже делают это, но вот небольшой плагин, который я обернул за 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/.
Это настраивается, поэтому его можно настроить так, чтобы он выглядел точно так же, как на Amazon.

PS: следует иметь в виду, что роль css в этом случае больше, чем роли jquery / javascript.

2 голосов
/ 03 марта 2012

Вот один из них - http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/.

Или для чего-то простого - http://qrayg.com/experiment/cssmenus.

Я не думаю, что есть много основных (например, amazon) плагинов вертикального меню с 'всплывающие надписи, потому что их довольно легко создавать только с помощью html / css.Амазонское меню, вероятно, можно было бы сделать вообще без какого-либо javascript.

После того, как вы создали красивое css-меню (бонусные баллы за доступность), вы можете легко конвертировать действие наведения CSS

, напримерli:hover > ul {display:block}

в некоторый jquery

$('li').hover(function(){ $(this).children('ul').show(200); }).

1 голос
/ 04 марта 2012

Не слушайте этих клоунов.Вы хотите, чтобы он был протестирован на многих сайтах и ​​ отлажен и является кросс-браузер Сколько из этих «смотри на меня» меню управляют вспышкой или выбором элементов позади меню?У скольких есть плавная анимация и open-on- hover , но не onmouseover?Сколько можно легко переключиться на горизонтальный в другом проекте без изучения еще большего числа классов CSS и нового API?

В любом случае, ответ суперфиш:

http://users.tpg.com.au/j_birch/plugins/superfish/#examples (вертикальный стиль)

1 голос
/ 18 февраля 2012
0 голосов
/ 04 марта 2012
0 голосов
/ 02 марта 2012

о том, что вы хотите, я думаю, вы можете сначала создать выпадающее меню и добавить описание позже, просто взгляните на этот пример, он очень прост: http://webdesignerwall.com/tutorials/css3-dropdown-menu или здесь: http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html

Я проверил элемент на amazon и обнаружил, что они делают то же самое, просто добавляют класс со стилем для него:

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

Сначала создайте выпадающее меню и добавьте описание, которое вы хотите!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...