Nastavení týkající se položek menu

V této části si ukážeme nastavení týkající se položek menu. Nastavení, která jsou tu vysvětlená jsou následující:

keepHighlighted - určuje, jestli by se položkám, které obsahují sub menu měla přidávat třída highlighted, když je jejich sub menu otevřené
subIndicators - určuje, jestli se má do položek menu (do a elementů) přidávat span element pokud položka obsahuje sub menu
subIndicatorsText - nastavuje text, který se vloží do span elementů, které se vkládají do položek, které obsahují sub menu
subIndicatorsPos - určuje, jestli se má span element, který se vkládá do položek, které obsahují sub menu přidávat na začátek nebo na konec obsahu položky
markCurrentItem - určuje, jestli by se měla položkám menu, které odkazují na aktuální stránku přidávat CSS třída current
markCurrentTree - určuje, jestli by se měla CSS třída current přidávat také položkám, které jsou předky položky, která odkazuje na aktuální stránku

keepHighlighted

Toto nastavení určuje, jestli by se položkám, které obsahují sub menu měla přidávat CSS třída highlighted, když je jejich sub menu otevřené. Defaultní hodnota je true.

<style>
    /* třídu highlighted můžeme nastylovat */
    .sm-muj-vzhled .highlighted {
        background-color: orangered;
    }
</style>

<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(); // nastavení keepHighlighted ani nemusíme měnit, protože je zapnuté defaultně
</script>

subIndicators

Toto nastavení určuje, jestli se má do položek menu (do a elementů) přidávat span element pokud položka obsahuje sub menu. Defaultně je tato možnost zapnutá.

$('moje-menu').smartmenus({
    subIndicators: false // vypnutí přidávání span elementů do položek menu, které obsahují sub menu
});

subIndicatorsText

Pomocí tohoto nastavení můžeme nastavit text, který se vloží do span elementů, které se vkládají do položek, které obsahují sub menu. Defaultní hodnota je prázdný řetězec, takže se do span elementů nepřidává nic.

<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({
        subIndicatorsText: "+" // k položkám, které obsahují sub menu se připojí "+"
    });
</script>

subIndicatorsPos

Toto nastavení určuje, kam se umístí span element, který se vkládá do položek obsahující sub menu. Máme na výběr ze dvou možností:

"prepend" - span se umístí před obsah položky
"append" - span se umístí za obsah položky

<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({
        subIndicatorsText: "+", // k položkám, které obsahují sub menu se připojí span s textem "+"
        subIndicatorsPos: "prepend" // span se umístí před obsah položky
    });
</script>

markCurrentItem

Toto nastavení určuje, jestli by se měla položkám menu, které odkazují na aktuální stránku přidávat CSS třída current. Defaultní hodnota je false.

<style>
    /* třídu current můžeme nastylovat */
    .sm-muj-vzhled .current {
        background-color: lightgreen;
    }
</style>

<ul id="moje-menu" class="sm sm-muj-vzhled">
    <li><a href="https://www.smartmenus.org/">první odkaz</a></li>
    <!-- tato položka (odkaz) odkazuje na aktuální stránku -->
    <li><a href="./">druhý odkaz</a></li>
    <li><a href="https://jirkasa.github.io/slick-tutorial/">třetí odkaz</a></li>
</ul>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
    $('#moje-menu').smartmenus({
        markCurrentItem: true // položkám, které odkazují na aktuální stránku se nastaví CSS třída current
    });
</script>

markCurrentTree

Toto nastavení určuje, jestli by se měla CSS třída current přidávat také položkám, které jsou předky položky, která odkazuje na aktuální stránku. Defaultní hodnota je true.

<style>
    /* třídu current můžeme nastylovat */
    .sm-muj-vzhled .current {
        background-color: lightgreen;
    }
</style>

<ul id="moje-menu" class="sm sm-muj-vzhled">
    <li><a href="http://css-layouty.4fan.cz/">první odkaz</a></li>
    <li><a href="#">rozbalovací nabídka</a>
        <ul>
            <li><a href="http://pole-v-js.4fan.cz/">první odkaz</a></li>
            <!-- tato položka (odkaz) odkazuje na aktuální stránku -->
            <li><a href="./">druhý odkaz</a></li>
            <li><a href="http://pis-vsemi-deseti.4fan.cz/">třetí odkaz</a></li>
        </ul>
    </li>
    <li><a href="https://jirkasa.github.io/javascript-promisy/">druhý odkaz</a></li>
</ul>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.smartmenus.min.js"></script>
<script>
    $('#moje-menu').smartmenus({
        markCurrentItem: true, // položkám, které odkazují na aktuální stránku se nastaví CSS třída current
        // následující nastavení bychom ani nemuseli nastavovat, defaultně je nastaveno na hodnotu true
        markCurrentTree: true // třída current se nastaví také položkám, které jsou předky položky odkazující na aktuální stránku
    });
</script>

V této části jste se dozvěděli o nastaveních týkajících se položek menu. V další části si ukážeme, jak si vytvořit vlastní vzhled menu.

pokračovat na další část

SmartMenus Tutoriál