Nastavení týkající se sub menu
V minulé části jsme si ukázali pár nastaveních týkající se animace otevírání/zavírání sub menu. V této části se podíváme na nějaká další nastavení, která se sub menu týkají. Nastavení, která jsou tu vysvětlena jsou následující:
- bottomToTopSubMenus - přepíná otevírání sub menu na drop-up namísto drop-down
- mainMenuSubOffsetX - nastavuje horizontální odsazení pro sub menu první úrovně
- mainMenuSubOffsetY - nastavuje vertikální odsazení pro sub menu první úrovně
- subMenusSubOffsetX - nastavuje horizontální odsazení pro sub menu druhé a vyšší úrovně
- subMenusSubOffsetY - nastavuje vertikální odsazení pro sub menu druhé a vyšší úrovně
- subMenusMaxWidth - nastavuje maximální šířku sub menu
- subMenusMinWidth - nastavuje minimální šířku sub menu
- keepInViewport - určuje, jestli mají být sub menu přemístěny, aby vždy byly uvnitř viewportu
- rightToLeftSubMenus - určuje, jestli se mají sub menu zobrazit jako right to left namísto left to right
Kromě těchto nastavení jsou zde také vysvětleny atributy data-sm-horizontal-sub a data-sm-reverse.
bottomToTopSubMenus
Pomocí tohoto nastavení můžeme přepnout otevírání sub menu z drop-down na drop-up. Takže se sub menu budou otevírat nahoru namísto dolů.
<div style="height: 10rem;"></div>
<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="#">další 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>
</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({
bottomToTopSubMenus: true // přepne otevírání sub menu na drop-up
});
</script>mainMenuSubOffsetX
Toto nastavení určuje horizontální odsazení pro sub menu první úrovně. Odsazení se aplikuje jen na sub menu první úrovně. Pokud máme ještě další vnořená sub menu, tak se na ně odsazení již neaplikuje. Pro horizontální odsazení sub menu dalších úrovní slouží nastavení subMenusSubOffsetX. Odsazení nastavujeme v pixelech 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="#">další 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>
</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({
mainMenuSubOffsetX: 30 // sub menu první úrovně bude horizontálně odsazené o 30 pixelů
});
</script>mainMenuSubOffsetY
Toto nastavení určuje vertikální odsazení pro sub menu první úrovně. Odsazení se aplikuje jen na sub menu první úrovně. Pokud máme ještě další vnořená sub menu, tak se na ně odsazení již neaplikuje. Pro vertikální odsazení sub menu dalších úrovní slouží nastavení subMenusSubOffsetY. Odsazení nastavujeme v pixelech 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="#">další 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>
</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({
mainMenuSubOffsetY: 40 // sub menu první úrovně bude vertikálně odsazené o 40 pixelů
});
</script>subMenusSubOffsetX
Toto nastavení určuje horizontální odsazení pro sub menu druhé a vyšší úrovně. Odsazení nastavujeme v pixelech a defaultní hodnota je 0.
<!-- aby šlo odsazení vidět, tak jsou sub menu barevně oznažena -->
<ul id="moje-menu" class="sm sm-muj-vzhled">
<li><a href="#">první odkaz</a></li>
<li><a href="#">rozbalovací nabídka</a>
<ul style="background-color: orangered;">
<li><a href="#">první odkaz</a></li>
<li><a href="#">další nabídka</a>
<ul style="background-color: orangered;">
<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>
</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({
subMenusSubOffsetX: -10 // sub menu druhé a vyšší úrovně budou horizontálně odsazené o 10 pixelů
});
</script>subMenusSubOffsetY
Toto nastavení určuje vertikální odsazení pro sub menu druhé a vyšší úrovně. Odsazení nastavujeme v pixelech a defaultní hodnota je 0.
<!-- aby šlo odsazení vidět, tak jsou sub menu barevně oznažena -->
<ul id="moje-menu" class="sm sm-muj-vzhled">
<li><a href="#">první odkaz</a></li>
<li><a href="#">rozbalovací nabídka</a>
<ul style="background-color: orangered;">
<li><a href="#">první odkaz</a></li>
<li><a href="#">další nabídka</a>
<ul style="background-color: orangered;">
<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>
</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({
subMenusSubOffsetY: 20 // sub menu druhé a vyšší úrovně budou vertikálně odsazené o 20 pixelů
});
</script>subMenusMaxWidth
Toto nastavení určuje maximální šířku sub menu. Šířku můžeme zadat v jakékoliv CSS jednotce.
<ul id="moje-menu" class="sm sm-muj-vzhled">
<li><a href="#">první odkaz</a></li>
<li><a href="#">rozbalovací nabídka</a>
<ul style="background-color: orangered;">
<li><a href="#">první odkaz</a></li>
<li><a href="#">další nabídka</a>
<ul style="background-color: orangered;">
<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>
</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({
subMenusMinWidth: "0", // minimální šířka sub menu musí být menší než jeho maximální šířka
subMenusMaxWidth: "6rem" // maximální šířka sub menu je 6rem
});
</script>subMenusMinWidth
Toto nastavení určuje minimální šířku sub menu. Šířku můžeme zadat v jakékoliv CSS jednotce.
<ul id="moje-menu" class="sm sm-muj-vzhled">
<li><a href="#">první odkaz</a></li>
<li><a href="#">rozbalovací nabídka</a>
<ul style="background-color: orangered;">
<li><a href="#">první odkaz</a></li>
<li><a href="#">další nabídka</a>
<ul style="background-color: orangered;">
<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>
</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({
subMenusMinWidth: "20rem" // minimální šířka sub menu je 20rem
});
</script>keepInViewport
Toto nastavení určuje, jestli mají být sub menu přemístěny pokud je to nutné, aby vždy byly uvnitř viewportu. Defaultně je toto nastavení zapnuté.
$('#moje-menu').smartmenus({
keepInViewport: false // sub menu se nebudou moci přemístit aby se zobrazili uvnitř viewportu pokud to je nutné
})rightToLeftSubMenus
Toto nastavení určuje, jestli se mají sub menu zobrazit jako right to left namísto left to right. Defaultně je toto nastavení vypnuté.
<ul id="moje-menu" class="sm sm-muj-vzhled">
<li><a href="#">první odkaz</a></li>
<li><a href="#">rozbalovací nabídka</a>
<ul style="background-color: orangered;">
<li><a href="#">první odkaz</a></li>
<li><a href="#">další nabídka</a>
<ul style="background-color: orangered;">
<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>
</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({
rightToLeftSubMenus: true // sub menu se zobrazí jako right to left namísto left to right
});
</script>Atribut data-sm-horizontal-sub
Pomocí tohoto atributu a přidáním pár CSS stylů můžeme vytvářet horizontální sub menu. Zde je CSS kód, který ke správnému fungování tohoto atributu potřebujeme přidat do našeho vlastního vzhledu:
@media (min-width: 768px) { /* kdy se přejde z collapsible stavu na normální stav můžeme změnit */
/* potřebné styly ke správné funkci atributu data-sm-horizontal-sub */
/* ---------- */
li[data-sm-horizontal-sub] {
position: static;
}
li[data-sm-horizontal-sub] > ul {
left: 0 !important;
right: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
li[data-sm-horizontal-sub] > ul > li {
float: left;
}
li[data-sm-horizontal-sub] > .scroll-up, li[data-sm-horizontal-sub] > .scroll-down {
display: none !important;
}
/* ---------- */
/* dále zde můžeme ještě nějak více nastylovat horizontální sub menu */
}
Poté co jsme si napsali potřebný CSS kód, který je nutný pro správnou funkci atributu data-sm-horizontal-sub jej můžeme začít používat. Následující ukázka jeho použití ukazuje.
<ul id="moje-menu" class="sm sm-muj-vzhled">
<li><a href="#">první odkaz</a></li>
<!-- sub menu, které tato položka obsahuje bude horizontální -->
<li data-sm-horizontal-sub="true"><a href="#">rozbalovací nabídka</a>
<ul>
<li><a href="#">první odkaz</a></li>
<li><a href="#">další 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>
</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();
</script>Atribut data-sm-reverse
Pomocí atributu data-sm-reverse můžeme pro některá sub menu obrátit směr nastavený vlastností rightToLeftSubMenus.
<ul id="moje-menu" class="sm sm-muj-vzhled">
<li><a href="#">první odkaz</a></li>
<!-- sub menu, které obsahuje tato položka bude right to left -->
<li data-sm-reverse="true"><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="#">další 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>
</ul>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
$('#moje-menu').smartmenus();
</script>V této části jsme si ukázali nastavení týkající se sub menu. V příští části se podíváme na nastavení týkající se položek menu.