SmartMenus Tutoriál

Co je to SmartMenus a jeho instalace

Vítejte v tutoriálu o JQuery pluginu jménem SmartMenus. Jedná se o plugin, pomocí kterého můžeme na našich webových stránkách jednoduše vytvářet i více složitá menu. Tato menu jsou různě nastavitelná a můžeme si je nastylovat podle sebe nebo použít nějaký defaultní theme, který nám SmartMenus nabízí.

Tvorba menu s pomocí SmartMenus může být jednodušší než kdybychom si jej vytvářeli sami. Pokud budeme dělat nějaké jednodušší menu, tak se bez SmartMenus určitě obejdeme, ale pokud budeme dělat nějaké složitější, které už obsahuje například víceúrovňové rozbalovací seznamy, tak nám použití SmartMenus může hodně usnadnit práci.

Pokud chcete SmartMenus začít používat, tak se můžete podívat na jeho oficiální stránky, kde najdete dokumentaci a pár příkladů jak jej použít. Pokud si ale například budete chtít nastylovat svoje menu úplně sami a nepoužít žádný z defaultních vzhledů, tak možná budete bádat nad tím, proč vám menu nefunguje tak jak má. Měl jsem s tím ze začátku problém a nějakou dobu mi trvalo, než jsem zjistil proč moje menu nefunguje správně. Tento tutoriál jsem vytvořil proto, abych vám začátek se SmartMenus pluginem o něco usnadnil.

index.html

Instalace

Abychom mohli SmartMenus začít používat, tak si jej nejdříve musíme stáhnout a napojit na naši webovou stránku. Můžeme jej stáhnout odsud. Pokud si SmartMenus stáhnete, tak dostanete zazipovaný soubor se spoustou souborů. Z těchto souborů potřebujete jen soubor jquery.smartmenus.min.js a sm-core-css.css. Soubor sm-core-css.css obsahuje jen nějaké základní styly, které zajišťují, že bude plugin fungovat tak jak má. Pokud budete chtít použít i nějaký předchystaný vzhled menu, tak budete také potřebovat css soubor, který obsahuje pro vámi vybraný vzhled styly. SmartMenus nám dává na vybranou ze čtyř hotových vzhledů: sm-blue, sm-clean, sm-mint a sm-simple. Pokud budete chtít použít například vzhled sm-blue, tak budete potřebovat soubor sm-blue.css.

Protože je SmartMenus JQuery plugin, tak si budeme muset stáhnout také JQuery. Stáhnout jej můžete odsud nebo můžete použít CDN.

Až máme SmartMenus a JQuery stažené, tak si je na naše webové stránky napojíme. Takže si do hlavičky stránky připojíme základní styly, které jsou potřeba pro správné fungování SmartMenus pluginu (popřípadě také styly pro nastavení vzhledu menu) a před konec body elementu připojíme JQuery a SmartMenus scripty.

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- základní styly zajišťující správné fungování SmartMenus -->
    <link rel="stylesheet" href="./sm-core-css.css">

    <!-- pokud chceme použít nějaký hotový vzhled, tak si musíme připojit jeho CSS styly -->
    <link rel="stylesheet" href="./sm-blue.css">

    <title>SmartMenus</title>
</head>
<body>
    <!-- ... -->

    <!-- napojení JQuery a SmartMenus scriptů -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.smartmenus.min.js"></script>
</body>
</html>

V této části jste se dozvěděli jak SmartMenus nainstalovat. V další části si ukážeme jak jej začít používat.

pokračovat na další část

Části Tutoriálu