Nastavení týkající se interakce s menu

V této části si ukážeme nastavení, která se týkají interakce s menu. Dozvíte se tu například jak vypnout automatické otevření sub menu při najetí myši na položku a tak dále. Nastavení, která jsou tu vysvětlena jsou následující:

• showOnClick - určuje, jestli se sub menu první úrovně mají otevřít kliknutím na položku namísto najetí myší
• showTimeout - nastavuje čas, který musí uplynout, než se sub menu při najetí myši na položku nebo při jejím focusnutí otevře
• hideTimeout - nastavuje čas, který musí uplynout, než se sub menu při odjetí myši pryč nebo při ztrátě focusu zavře
• noMouseOver - určuje, jestli se má vypnout otevření sub menu při najetí myši na položku
• hideOnClick - určuje, jestli se mají všechna otevřená sub menu při kliknutí kamkoliv na stránce zavřít
• collapsibleBehavior - určuje chování položky, která obsahuje sub menu v collapsible módu
• scrollAccelerate - určuje, jestli se má scrollování ve dlouhých sub menu, které se plně nevejdou na obrazovku zrychlovat, nebo má být pořád stejné
• scrollStep - nastavuje krok pro scrollování dlouhých sub menu, které se plně nevejdou na obrazovku

showOnClick

Toto nastavení určuje, jestli se sub menu první úrovně mají otevírat kliknutím na položku namísto najetí myši na položku. Defaultní hodnota je false.

<ul id="moje-menu" class="sm sm-muj-vzhled">
    <li><a href="#">první odkaz</a></li>
    <li><a href="#">rozbalovací nabídka</a>
        <ul>
            <li><a href="#">první odkaz</a></li>
            <li><a href="#">druhý odkaz</a></li>
            <li><a href="#">třetí odkaz</a></li>
        </ul>
    </li>
    <li><a href="#">druhý odkaz</a></li>
</ul>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
    $('#moje-menu').smartmenus({
        showOnClick: true // sub menu se budou otevírat kliknutím namísto najetím myši
    });
</script>

showTimeout

Pomocí tohoto nastavení můžeme nastavit čas, který musí uplynout, než se při najetí myši na položku nebo při jejím focusnutí otevře sub menu. Čas nastavujeme v milisekundách a defaultní hodnota je 250 milisekund.

<ul id="moje-menu" class="sm sm-muj-vzhled">
    <li><a href="#">první odkaz</a></li>
    <li><a href="#">rozbalovací nabídka</a>
        <ul>
            <li><a href="#">první odkaz</a></li>
            <li><a href="#">druhý odkaz</a></li>
            <li><a href="#">třetí odkaz</a></li>
        </ul>
    </li>
    <li><a href="#">druhý odkaz</a></li>
</ul>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
    $('#moje-menu').smartmenus({
        showTimeout: 1000 // při najetí myši na položku se sekundu počká a až poté se sub menu otevře
    });
</script>

hideTimeout

Pomocí tohoto nastavení můžeme nastavit čas, který musí uplynout, než se při odjetí myši nebo ztrátě focusu zavře sub menu. Čas nastavujeme v milisekundách a defaultní hodnota je 500 milisekund.

<ul id="moje-menu" class="sm sm-muj-vzhled">
    <li><a href="#">první odkaz</a></li>
    <li><a href="#">rozbalovací nabídka</a>
        <ul>
            <li><a href="#">první odkaz</a></li>
            <li><a href="#">druhý odkaz</a></li>
            <li><a href="#">třetí odkaz</a></li>
        </ul>
    </li>
    <li><a href="#">druhý odkaz</a></li>
</ul>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
    $('#moje-menu').smartmenus({
        hideTimeout: 2000 // při odjetí myši se sub menu po 2 sekundách zavře
    });
</script>

noMouseOver

Pomocí tohoto nastavení můžeme vypnout otevírání sub menu při najetí myši na položku. Defaultní hodnota je false.

<ul id="moje-menu" class="sm sm-muj-vzhled">
    <li><a href="#">první odkaz</a></li>
    <li><a href="#">rozbalovací nabídka</a>
        <ul>
            <li><a href="#">první odkaz</a></li>
            <li><a href="#">druhý odkaz</a></li>
            <li><a href="#">třetí odkaz</a></li>
        </ul>
    </li>
    <li><a href="#">druhý odkaz</a></li>
</ul>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
    $('#moje-menu').smartmenus({
        noMouseOver: true // sub menu se při najetí myši na položku neotevře
    });
</script>

hideOnClick

Toto nastavení určuje, jestli se mají všechna otevřená sub menu při kliknutí kamkoliv na stránce zavřít. Defaultní hodnota je true.

<ul id="moje-menu" class="sm sm-muj-vzhled">
    <li><a href="#">první odkaz</a></li>
    <li><a href="#">rozbalovací nabídka</a>
        <ul>
            <li><a href="#">první odkaz</a></li>
            <li><a href="#">druhý odkaz</a></li>
            <li><a href="#">třetí odkaz</a></li>
        </ul>
    </li>
    <li><a href="#">druhý odkaz</a></li>
</ul>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
    $('#moje-menu').smartmenus({
        noMouseOver: true,
        hideOnClick: false // pokud kamkoliv na stránce klikneme, tak se otevřená sub menu nezavřou (defaultně je nastaveno že se zavřou)
    });
</script>

collapsibleBehavior

Toto nastavení se týká chování položky, která obsahuje sub menu v collapsible módu, když na ni klikneme. Máme na výběr ze šesti možností. Defaultně je nastavena možnost "default". Hodnoty, které můžeme nastavit jsou následující:

• "default" - první kliknutí na položku otevře sub menu, druhé otevře její odkaz
• "toggle" - kliknutím na položku nikdy neotevřeme její odkaz, jen se bude otevírat/zavírat sub menu
• "link" - kliknutím na položku nikdy neotevřeme její sub menu, otevřeme její odkaz
• "accordion" - stejné jako možnost "default", ale při otevření sub menu se zároveň zavřou všechny viditelné sub menu z hlubších úrovní nebo jiných větví
• "accordion-toggle" - stejné jako možnost "toggle", ale při otevření sub menu se zároveň zavřou všechny viditelné sub menu z hlubších úrovní nebo jiných větví
• "accordion-link" - stejné jako možnost "link", ale při otevření sub menu se zároveň zavřou všechny viditelné sub menu z hlubších úrovní nebo jiných větví

<!-- aby bylo v ukázce menu vždy v collapsible módu, tak nemá nastaveno žádný vzhled -->
<ul id="moje-menu" class="sm">
    <li><a href="#">první odkaz</a></li>
    <li><a href="#">rozbalovací nabídka</a>
        <ul>
            <li><a href="#">první odkaz</a></li>
            <li><a href="#">druhý odkaz</a></li>
            <li><a href="#">třetí odkaz</a></li>
        </ul>
    </li>
    <li><a href="#">druhý odkaz</a></li>
</ul>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
    $('#moje-menu').smartmenus({
        collapsibleBehavior: "toggle" // kliknutí na položku obsahující sub menu nikdy neotevře její odkaz (jen se bude otevírat/zavírat její sub menu) 
    });
</script>

scrollAccelerate

Toto nastavení určuje, jestli se má scrollování ve dlouhých sub menu, které se plně nevejdou na obrazovku zrychlovat, nebo má být pořád stejné. Defaultní hodnota je true.

$('#moje-menu').smartmenus({
    scrollAccelerate: true
});

scrollStep

Pomocí tohoto nastavení můžeme nastavit krok pro scrollování dlouhých sub menu, které se plně nevejdou na obrazovku. Hodnotu nastavujeme v pixelech a defaultní hodnota je 30.

$('#moje-menu').smartmenus({
    scrollStep: 50
});

V této části jste se mohli podívat na pár nastavení týkajících se interakce s menu. V další části si ukážeme nastavení týkající se animace zobrazování a skrývání sub menu.