Jquery Finder-подобное меню

Question

Мне нужно сделать так, чтобы меню сайта перемещалось как Finder OSX в представлении столбцов, где каждый уровень отображается рядом с его родителем в вертикальном столбце.

Уже несколько часов гуглим это, и этот плагин Jquery, похоже, ближе всего подходит (здесь есть демо )

Начиная с первого испытания, кажется, что его сложно настроить. Мне нужно, чтобы он вел себя и выглядел по-разному несколькими способами:

• Нет свитков, ни вертикальных, ни горизонтальных. он должен действовать скорее как веб-меню, чем как поле выбора
• при нажатии на последнюю ссылку, после навигации по подпрограммам, вся страница должна быть перенаправлена ​​на URL, а меню должно сохранять состояние.
• последняя ссылка должна быть кликабельной, как в демонстрационной версии. в моем тесте он загружает еще один столбец с дубликатом ссылки, которая, в свою очередь, кликабельна.

Кто-нибудь знает, как сделать это с помощью этого плагина, или может указать мне на более простые реализации, которые ближе к этим спецификациям?

Вот структура HTML меню:

<ul id="nav">
    <li class="current" id="nav-o-que-estamos-fazendo">
        <a href="/o-que-estamos-fazendo/">O que estamos fazendo</a>
        <ul id="nav-o-que-estamos-fazendo-children">
            <li id="nav-o-que-estamos-fazendo-children-ficcao">
                <a href="/o-que-estamos-fazendo/ficcao/">Ficção</a>
            </li>
            <li class="current" id="nav-o-que-estamos-fazendo-children-documentario">
                <a href="/o-que-estamos-fazendo/documentario/">Documentário</a>
                <ul id="nav-o-que-estamos-fazendo-children-documentario-children">
                    <li class="current" id="nav-o-que-estamos-fazendo-children-documentario-children-josephine-king">
                        <a href="/o-que-estamos-fazendo/documentario/josephine-king/">Josephine King</a>
                    </li>
                </ul>
            </li>
            <li id="nav-o-que-estamos-fazendo-children-televiso">
                <a href="/o-que-estamos-fazendo/televiso/">Televisão</a>
            </li>
            <li id="nav-o-que-estamos-fazendo-children-museus">
                <a href="/o-que-estamos-fazendo/museus/">Museus</a>
            </li>
        </ul>
    </li>
    <li id="nav-o-que-ja-fizemos">
        <a href="/o-que-ja-fizemos/">O que já fizemos</a>
    </li>
    <li id="nav-o-que-somos">
        <a href="/o-que-somos/">O que somos</a>
    </li>
    <li id="nav-quem-somos-contato">
        <a href="/quem-somos-contato/">Quem somos | contato</a>
    </li>
    <li id="nav-mirabolancias">
        <a href="/mirabolancias/">Mirabolâncias</a>
    </li>
</ul>

Как генерируется тегом nav для жидкости на Harmonyapp )

Answer 1

Это довольно простое решение. все, что вам нужно представить, это то, что столбцы как обычный выпадающий список (опускаться в нашем случае слева). Просто скройте все дочерние элементы и запустите их 'show ()' при нажатии на родительский элемент.

базовый css:

div#finderMenu{width: 800px}
ul{overflow: auto} /* will deal with your scrollbar issue */
ul li ul{float: left; height: 200px; width: 100px;} /* will layout all child uls */
li.current{background: blue} /* will make current parent button blue */

Основной JQuery:

$(function(){
    $('ul>li').click(function(){
        //hide all initial menu blocks
        $('ul ul').hide();

        //this will deal with the clickables and current states
        $('.active').removeClass('current');
        $(this).addClass('current');

        //now for the menu items
        $('.showing').removeClass('showing').hide();
        $(' ul', this).addClass('showing').show();
    });
});

очевидно, вы бы добавили CSS, чтобы он выглядел красиво и содержали все в div. но я думаю, вы поняли:)

надеюсь, это поможет.