Egyszerű Dropdown menü készítése
A legutóbbi cikkemben szintén erről írtam. Ott azonban HTML kódot kell szerkesztened, nehezen tudod beállítani a menü kinézetét. Most azonban mutatok egy módszert, amivel rendkívül egyszerűen tudsz úgynevezett "Dropdown" menüt készíteni blogodra, honlapodra.
Élő példát az alábbi gombra kattintva tekinthetsz meg:
Az elkészítése pedig már-már nevetségesen egyszerű.
1.) Miután felregisztráltál kattints a jobb felső sarokban a nevedre. Ekkor lenyílik egy menü és ott kattints a "MyMenus" feliratra. Ezzel az általad már elkészített menüket láthatod majd ha már több lesz, elsőre még egy sincs. Van egy gomb a jobb felső sarok irányában a következő felirattal: "+Menu". Kék gomb, könnyen észre fogod venni.
2.) Ha rákattintasz, pár másodperc alatt a rendszer generál neked egy menüt "MyMenu1" névvel. A névre kattintva könnyen átnevezheted ezt úgy mintha a gépeden egy mappát neveznél át.
3.) A névtől jobbra találsz egy fogaskereket, kattints rá a menü szerkesztéséhez.
Így a szerkesztőre értél, ahol 3 menüpontot találsz.
a, Structure = Struktúra, itt állíthatod be a menüpontokat.
b, Template = Sablon, itt kiválaszthatod a neked tetsző sablont. A későbbiekben a sablonon belül a színeket tudod majd állítani.
c, Options = Beállítások, itt tudod megadni a beállításait a Menüdnek.
4.) Mielőtt bármit csinálnál, menj a Template menüpontra és válaszd ki a neked tetsző sablont.
5.) Menj az Options menüpontra és állítsd be a menüt funkcióit.
Itt beállíthatod a következőket:
Ha bepipálod a "Vertical" feliratot, akkor a menüd álló menü lesz, nem fekvő.
Megadhatod a menü szélességét pixelben vagy %-ban.
Ha bepipálod a "Transparent" feliratot, akkor a menü háttere átlátszó lesz.
A "Submenu" beállításainal megadhatod az almenüpontok szélességét (pixelben) és átlátszóságát (százalékban)!
A "Responsive Menu" résznél a kisebb felületek (mobil, tablet) dizájnját állíthatod be. Ha bepipálod, a Responsive feliratot akkor átfog alakulni ha ilyen felületeken jelenik meg. Írd át a text-et, hogy egyértelmű legyen a látogatóknak a menü.
A végén mindig kattints az "Apply Changes" gombra!!!
6.) Menj a "Structure" menüpontra és törölj ki minden menüpontot amit a sablon adott meg. Add hozzá a sajátjaidat, építsd fel a menüfádat. Nevezd a menüpontokat. (Kattints rá és a jobb oldalon add meg a nevét és alatta a linket ahova vinnie kell)
Link nélkül a menüpont nem csinál majd semmit!
A név felett az ikonra kattintva rendelhetsz a menüponthoz képet, sajátot is tölthetsz fel.
7.) Ha mindent beállítottál, már csak a blogodon való elhelyezés van hátra. Mint eddig minden, ez is pofon egyszerű lesz.
Először is, kattints a menü előnézete alatt található "Code" gombra. Ekkor egy felugró ablakban megjelenik előtted egy rövid kód.
Az elkészítése pedig már-már nevetségesen egyszerű.
1.) Miután felregisztráltál kattints a jobb felső sarokban a nevedre. Ekkor lenyílik egy menü és ott kattints a "MyMenus" feliratra. Ezzel az általad már elkészített menüket láthatod majd ha már több lesz, elsőre még egy sincs. Van egy gomb a jobb felső sarok irányában a következő felirattal: "+Menu". Kék gomb, könnyen észre fogod venni.
2.) Ha rákattintasz, pár másodperc alatt a rendszer generál neked egy menüt "MyMenu1" névvel. A névre kattintva könnyen átnevezheted ezt úgy mintha a gépeden egy mappát neveznél át.
3.) A névtől jobbra találsz egy fogaskereket, kattints rá a menü szerkesztéséhez.
Így a szerkesztőre értél, ahol 3 menüpontot találsz.
a, Structure = Struktúra, itt állíthatod be a menüpontokat.
b, Template = Sablon, itt kiválaszthatod a neked tetsző sablont. A későbbiekben a sablonon belül a színeket tudod majd állítani.
c, Options = Beállítások, itt tudod megadni a beállításait a Menüdnek.
4.) Mielőtt bármit csinálnál, menj a Template menüpontra és válaszd ki a neked tetsző sablont.
Itt beállíthatod a következőket:
Ha bepipálod a "Vertical" feliratot, akkor a menüd álló menü lesz, nem fekvő.
Megadhatod a menü szélességét pixelben vagy %-ban.
Ha bepipálod a "Transparent" feliratot, akkor a menü háttere átlátszó lesz.
A "Submenu" beállításainal megadhatod az almenüpontok szélességét (pixelben) és átlátszóságát (százalékban)!
A "Responsive Menu" résznél a kisebb felületek (mobil, tablet) dizájnját állíthatod be. Ha bepipálod, a Responsive feliratot akkor átfog alakulni ha ilyen felületeken jelenik meg. Írd át a text-et, hogy egyértelmű legyen a látogatóknak a menü.
A végén mindig kattints az "Apply Changes" gombra!!!
6.) Menj a "Structure" menüpontra és törölj ki minden menüpontot amit a sablon adott meg. Add hozzá a sajátjaidat, építsd fel a menüfádat. Nevezd a menüpontokat. (Kattints rá és a jobb oldalon add meg a nevét és alatta a linket ahova vinnie kell)
A név felett az ikonra kattintva rendelhetsz a menüponthoz képet, sajátot is tölthetsz fel.
7.) Ha mindent beállítottál, már csak a blogodon való elhelyezés van hátra. Mint eddig minden, ez is pofon egyszerű lesz.
Először is, kattints a menü előnézete alatt található "Code" gombra. Ekkor egy felugró ablakban megjelenik előtted egy rövid kód.
Ezt a kódot másold ki és menj a blogod kezelő felületére, azon belül is az "Elrendezés" menüpontra. Kattints a "Modul hozzáadása" feliratra és válaszd ki a HTML/JavaScript modult. Másold be a kapott kódot a modulba és mentsd el. Címet nem kell megadnod. Mentsd el az elrendezést is és nézd meg a blogodat. A menü modulját az elrendezésben akármikor áthúzhatod másik helyre!
A továbbiakban akármikor alakítasz valamit a menüdön, amint elmentetted a változásokat, azok szinte azonnal megjelennek majd a blogodon elhelyezett menün is.
Megjegyzések
Megjegyzés küldése