SmartMenus Tutoriál

Animace zobrazování/skrývání sub menu

V této části si ukážeme nastavení, která se týkají animace zobrazování/skrývání sub menu. Nastavení, která jsou tu vysvětlena jsou následující:

  • showDuration - nastavuje čas pro animaci otevírání sub menu v normálním stavu
  • showFunction - nastavuje funkci, která se použije, když se má sub menu otevřít v normálním stavu
  • hideDuration - nastavuje čas pro animaci zavírání sub menu v normálním stavu
  • hideFunction - nastavuje funkci, která se použije, když se má sub menu zavřít v normálním stavu
  • collapsibleShowDuration - nastavuje čas pro animaci otevírání sub menu v collapsible stavu
  • collapsibleShowFunction - nastavuje funkci, která se použije, když se má sub menu otevřít v collapsible stavu
  • collapsibleHideDuration - nastavuje čas pro animaci zavírání sub menu v collapsible stavu
  • collapsibleHideFunction - nastavuje funkci, která se použije, když se má sub menu zavřít v collapsible stavu

showDuration

Toto nastavení nastavuje čas pro animaci otevírání sub menu v normálním stavu, když je nastavení showFunction nastaveno na hodnotu null. Pokud pomocí nastavení showFunction používáme vlastní funkci, tak si čas animace určujeme v ní a toto nastavení nemá na nic vliv. Čas nastavujeme v milisekundách a defaultní hodnota je 0.

<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({
        showFunction: null, // showDuration nastavení funguje jen když je nastavení showFunction nastaveno na null
        showDuration: 1000 // animace otevírání sub menu bude trvat 1 sekundu
    });
</script>
index.html

showFunction

Pomocí tohoto nastavení můžeme nastavit funkci, která se zavolá, když se má sub menu otevřít v normálním stavu. V této funkci můžeme sub menu sami nějakým způsobem otevřít a až jsme hotovi, jen o tom informujeme smartmenus. Funkce, kterou nastavení showFunction předáváme by měla přijímat dva argumenty. Prvním je sub menu element (ul element) a druhým je funkce, kterou musíme zavolat až jsme s otevíráním sub menu hotovi. Následující ukázka ukazuje, jak bychom mohli nastavení showFunction například použít.

<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({
        showFunction: function($ul, complete) {
            // provede JQuery funkci fadeIn pro zobrazení sub menu a až se funkce
            // dokončí, dáme o tom smartmenus vědět zavoláním funkce complete
            $ul.fadeIn(1000, complete);
        }
    });
</script>
index.html

hideDuration

Toto nastavení nastavuje čas pro animaci zavírání sub menu v normálním stavu, když je nastavení hideFunction nastaveno na hodnotu null. Pokud pomocí nastavení hideFunction používáme vlastní funkci, tak si čas animace určujeme v ní a toto nastavení nemá na nic vliv. Čas nastavujeme v milisekundách a defaultní hodnota je 0.

<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({
        showFunction: function($ul, complete) {
            hideFunction: null, // hideDuration nastavení funguje jen když je nastavení hideFunction nastaveno na null
            hideDuration: 1000 // animace zavírání sub menu bude trvat 1 sekundu
        }
    });
</script>
index.html

hideFunction

Pomocí tohoto nastavení můžeme nastavit funkci, která se zavolá, když se má sub menu zavřít v normálním stavu. V této funkci můžeme sub menu sami nějakým způsobem zavřít a až jsme hotovi, jen o tom informujeme smartmenus. Funkce, kterou nastavení hideFunction předáváme by měla přijímat dva argumenty. Prvním je sub menu element (ul element) a druhým je funkce, kterou musíme zavolat až jsme se zavíráním sub menu hotovi. Následující ukázka ukazuje, jak bychom mohli nastavení hideFunction například použít.

<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({
        hideFunction: function($ul, complete) {
            // provede JQuery funkci fadeOut pro skrytí sub menu a až se funkce
            // dokončí, dáme o tom smartmenus vědět zavoláním funkce complete
            $ul.fadeOut(1000, complete);
        }
    });
</script>
index.html

collapsibleShowDuration

Toto nastavení nastavuje čas pro animaci otevírání sub menu v collapsible stavu, když je nastavení collapsibleShowFunction nastaveno na hodnotu null. Pokud pomocí nastavení collapsibleShowFunction používáme vlastní funkci, tak si čas animace určujeme v ní a toto nastavení nemá na nic vliv. Čas nastavujeme v milisekundách a defaultní hodnota je 0.

<!-- 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({
        collapsibleShowFunction: null, // collapsibleShowDuration nastavení funguje jen když je nastavení collapsibleShowFunction nastaveno na null
        collapsibleShowDuration: 1000 // animace otevírání sub menu bude trvat 1 sekundu
    });
</script>
index.html

collapsibleShowFunction

Pomocí tohoto nastavení můžeme nastavit funkci, která se zavolá, když se má sub menu otevřít v collapsible stavu. V této funkci můžeme sub menu sami nějakým způsobem otevřít a až jsme hotovi, jen o tom informujeme smartmenus. Funkce, kterou nastavení collapsibleShowFunction předáváme by měla přijímat dva argumenty. Prvním je sub menu element (ul element) a druhým je funkce, kterou musíme zavolat až jsme s otevíráním sub menu hotovi. Následující ukázka ukazuje, jak bychom mohli nastavení collapsibleShowFunction například použít.

<!-- 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({
        showFunction: function($ul, complete) {
            // provede JQuery funkci slideDown pro zobrazení sub menu a až se funkce
            // dokončí, dáme o tom smartmenus vědět zavoláním funkce complete
            $ul.slideDown(1000, complete);
        }
    });
</script>
index.html

collapsibleHideDuration

Toto nastavení nastavuje čas pro animaci zavírání sub menu v collapsible stavu, když je nastavení collapsibleHideFunction nastaveno na hodnotu null. Pokud pomocí nastavení collapsibleHideFunction používáme vlastní funkci, tak si čas animace určujeme v ní a toto nastavení nemá na nic vliv. Čas nastavujeme v milisekundách a defaultní hodnota je 0.

<!-- 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({
        showFunction: function($ul, complete) {
            collapsibleBehavior: 'toggle',
            collapsibleHideFunction: null, // collapsibleHideDuration nastavení funguje jen když je nastavení collapsibleHideFunction nastaveno na null
            collapsibleHideDuration: 1000 // animace zavírání sub menu bude trvat 1 sekundu
        }
    });
</script>
index.html

collapsibleHideFunction

Pomocí tohoto nastavení můžeme nastavit funkci, která se zavolá, když se má sub menu zavřít v collapsible stavu. V této funkci můžeme sub menu sami nějakým způsobem zavřít a až jsme hotovi, jen o tom informujeme smartmenus. Funkce, kterou nastavení collapsibleHideFunction předáváme by měla přijímat dva argumenty. Prvním je sub menu element (ul element) a druhým je funkce, kterou musíme zavolat až jsme se zavíráním sub menu hotovi. Následující ukázka ukazuje, jak bychom mohli nastavení collapsibleHideFunction například použít.

<!-- 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({
        collapsibleHideFunction: function($ul, complete) {
            // provede JQuery funkci slideUp pro skrytí sub menu a až se funkce
            // dokončí, dáme o tom smartmenus vědět zavoláním funkce complete
            $ul.slideUp(1000, complete);
        }
    });
</script>
index.html

V této části jste se dozvěděli o pár nastaveních týkajících se animace otevírání a zavírání sub menu. V další části se podíváme na další nastavení týkající se sub menu.

pokračovat na další část

Části Tutoriálu