JQuery-roll menu

3. 12. 2011 17:49:22

Ahoj,

zkouším z jednoho tutorialu rolovací menu s jQuery:

html:

Problém je v tom, že po výběru nějaké podkategorie se zase zaroluje. Nevíte někdo, jak to vyřešit aby zůstalo rozbalené?

3. 12. 2011 17:49:22

https://webtrh.cz/diskuse/jquery-roll-menu#reply704173

Ján Fajčák

(4 hodnocení)

3. 12. 2011 18:53:45

Tu: http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html to funguje (viď zdrojový kód). Medzi nami, menu =

3. 12. 2011 18:53:45

https://webtrh.cz/diskuse/jquery-roll-menu#reply704172

Tomáš Večeřa

(3 hodnocení)

3. 12. 2011 19:32:04

Jo to je přesně ono.. jj

vidím jako menu taky poprvé..

ale mě de právě o to, když bych chtěl proklikávat mezi podkategoriemi, abych nemusel pokaždé rozbalit stejnou kategorii, ale aby zůstala po includu stránky už rozbalená..

už nevím co googlit, tipuju že se tam přidá nějak jen selected nebo něco..

asi se to budu muset spíš pořádně naučit:/

3. 12. 2011 19:32:04

https://webtrh.cz/diskuse/jquery-roll-menu#reply704171

800XE

(8 hodnocení)

3. 12. 2011 21:25:27

To se dá pohodlně řešit přes cookies. Tady máš skript pro menu s libovolným počtem úrovní(z toho důvodu je tam i plugin $.getPath(), kterým se zjistí selektor poslední otevřené větve pro uložení do cookies):

<!doctype html><html xmlns='http://www.w3.org/1999/xhtml'>    <head>        <title>            Menu        </title>        <meta charset='utf-8' />        <script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>        <script>            // Práce s cookies            cookies = {                              /**                 * Nastaví cookie                 *                 * @param name       Jméno                 * @param value      Hodnota                 * @param expiration Počet dní pro uchování cookie(nepovinný)                 */                set: function(name, value, expiration) {                    var date = new Date();                    date.setDate(date.getDate() + expiration);                    expiration = !expiration ? '' : ';expires=' + date.toUTCString();                    document.cookie = name + '=' + escape(value) + expiration;                },                              /**                 * Vrací hodnotu cookie                 *                 * @param name Jméno                 */                get: function(name) {                    if (document.cookie.length) {                        var start = document.cookie.indexOf(name + '=');                        if (start != -1) {                            start += name.length + 1;                            end = document.cookie.indexOf(';', start);                            if (end == -1)                                end = document.cookie.length;                            return unescape(document.cookie.substring(start, end));                        }                    }                    return null;                }            };            /**             * Vrací selektor prvku             */            jQuery.fn.getPath = function () {                if (this.length != 1)                    throw '$.getPath: Musí být předán přesně jeden element.';                var path, node = this;                while (node.length) {                    var                        realNode = node                        name = (                            realNode.localName ||                            realNode.tagName ||                            realNode.nodeName                        );                    if (!name || name == '#document')                        break;                    name = name.toLowerCase();                    if (realNode.id)                        return name + '#' + realNode.id + (path ? '>' + path : '');                    else if (realNode.className)                        name += '.' + realNode.className.split(/s+/).join('.');                    var                        parent = node.parent(),                        siblings = parent.children(name);                    if (siblings.length > 1)                        name += ':eq(' + siblings.index(node) + ')';                    path = name + (path ? '>' + path : '');                    node = parent;                }                return path;            };            // Inicializace menu            $(function () {                                                // Procházení kategorií                $('.menu').on('click', 'a', function() {                    var                        $menu = $(this),                        $submenu = $menu.next('ul');                    if ($submenu.length) {                        if ($submenu.is(':visible')) {                            $submenu                                .find('ul')                                .slideUp();                            cookies.set('menu', $submenu.closest('ul').getPath());                        }                        else                            cookies.set('menu', $submenu.getPath());                        $submenu                            .slideToggle()                            .parent()                            .siblings()                            .find('ul')                            .slideUp();                    }                });                                // Rozevření poslední struktury menu                var menu = cookies.get('menu');                if (menu) {                    var $menu = $(menu);                    while (!$menu.is('.menu')) {                        $menu = $menu                            .slideDown(0)                            // .closest('ul') - closest z nějakého důvodu v 1.7 nefunguje správně                            .parent()                            .parent();                    }                    cookies.set('menu', '');                }            });        </script>        <style>            .menu li ul {                display: none;            }        </style>    </head>    <body>        <ul class='menu'>            <li>                <a href='#'>                    menu 1                </a>                <ul>                    <li>                        <a href='#'>                            menu 1 1                        </a>                        <ul>                            <li>                                <a href='#'>                                    menu 1 1 1                                </a>                            </li>                            <li>                                <a href='#'>                                    menu 1 1 2                                </a>                            </li>                        </ul>                    </li>                    <li>                        <a href='#'>                            menu 1 2                        </a>                        <ul>                            <li>                                <a href='#'>                                    menu 1 2 1                                </a>                            </li>                            <li>                                <a href='#'>                                    menu 1 2 2                                </a>                            </li>                        </ul>                    </li>                </ul>            </li>            <li>                <a href='#'>                    menu 2                </a>                <ul>                    <li>                        <a href='#'>                            menu 2 1                        </a>                    </li>                    <li>                        <a href='#'>                            menu 2 2                        </a>                    </li>                </ul>            </li>            <li>                <a href='#'>                    menu 3                </a>                <ul>                    <li>                        <a href='#'>                            menu 3 1                        </a>                    </li>                    <li>                        <a href='#'>                            menu 3 2                        </a>                    </li>                </ul>            </li>        </ul>    </body></html>

3. 12. 2011 21:25:27

https://webtrh.cz/diskuse/jquery-roll-menu#reply704170

Tomáš Večeřa

(3 hodnocení)

3. 12. 2011 23:32:19

tak to je masakr.. Díky moc!

škoda, že jde dát jen jeden bod:)

3. 12. 2011 23:32:19

https://webtrh.cz/diskuse/jquery-roll-menu#reply704169

Pro odpověď se přihlašte.

Přihlásit