Blogger Tutorial | Lenyíló menüsor - UPDATE

Orbán Szilvi | augusztus 20, 2014
menüsorUPDATE
Egy technikai malőr miatt törlődött a tegnapi poszt a blogról is, és a gépemen sem maradt meg piszkozatban, így most kezdhetem elölről az egészet :/ Na de nem baj, hátha ez most sokkal jobb lesz, mint az előző :)
Figyelem! Hosszú bejegyzés várható, mert sajnos ez nem olyan dolog, hogy röviden le lehet darálni :/ :)
Sajnos, ahogy azt már többen észrevettétek, fizetőssé vált a cssmenumaker.com oldalon az elkészült menü letöltése. Jellemző, hogy mindig az szűnik meg, vagy válik elérhetetlenné, ami mindenkinek – vagy legalábbis sokaknak – bevált… DE! Attól, hogy fizetős, a menü szerkezetét még összeállíthatjuk ott, s lementhetjük (gyakorlatilag ez a legnehezebb része az egésznek a kódolásban, úgyhogy nagy megkönnyebbülést jelent, hogy ezzel nem kell bíbelődnünk :)). Én azt javaslom, hogy bármelyik menü sablonját kiválaszthatjátok, ami 1 submenüs – ugyanis a 2 submenüs sablonokkal mindig is gondok voltak… –, s megalkothatjátok a menütök szerkezetét.

HTML rész


cssmm1
 Az első lépések ugyanazok, mint ebben a bejegyzésben, csak ha lehet, inkább 1 submenüs sablont válasszatok :) Az is jó, amit én bekarikáztam, de lényegében tök mindegy, nem a kinézet a lényeg, hanem a szerkezet.
cssmm2
 Annyi változott a korábbiakhoz képest, hogy most nem a Build/Download gomb látható, hanem a Build Online…. Kattintsunk rá, és állítsuk össze a menünk szerkezetét, ahogy azt a korábbi bejegyzésben leírtam. 
cssmm3
Ha megvagyunk vele, ne a Download gombra menjünk, hiszen akkor fizetnünk kellene érte, hanem az előnézet (Prewiew) mellett, a HTML fülre kattintsunk és az ott megjelenő kódot másoljuk ki. Ez tartalmazza a menüsorunk szerkezetét.  
htmlbeillesztés


 Első dolgunk legyen a blog sablonjának elmentése!!! Ha elmentettük, nyissuk meg a Tervezőt, a Sablon fülnél lépjünk be a HTML-kód szerkesztőbe. A CTRL-G kombóval hívjuk elő a keresőt és pötyögjük be a </header> szót. A mezőben azonnal odaugrik majd és sárgával ki fogja jelölni nekünk. Üssünk alá egy entert (ahogy a képen is látszik) és illesszük be oda a kimásolt kódot. Ezután mentsük el a kódot.  
htmlmenufélkész
 Ne ijedjünk meg a látványtól, hogy így néz ki, amint hozzáadjuk a CSS kódot, helyre fog állni a rend :)

CSS rész

Na ez az a rész, ami egy kicsit bonyolultabb lesz, de igyekszek érthetően fogalmazni :) A lépések nagyon hasonlóak lesznek a Címek személyre szabása az oldalsávban c. bejegyzésben, sok ott használt kód ismerős lesz :) Sajnos ezt nem lehet másképp megoldani, mint úgy, hogy az én blogomon használt menüsor CSS kódját másolom be ide nektek és azt szabjátok majd személyre. Természetesen itt is segítek, hogy mit kell megváltoztatni ;)
Itt a legjobb, ha egy szövegszerkesztőt használunk és ott szabjuk személyre a kódunkat, s majd a kész kódot másoljuk be oda, ahova kell. Íme az én CSS kódom:
#cssmenu {
  border: none;
  border: px;
  margin: 0px;
  padding: 25px;
  font-family: Patrick Hand;
  font-size: 19px;
  font-weight: bold;
  width: 960px;
}
#cssmenu ul {
  background: #00a58d;
  border-radius: 15px;
  height: 35px;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 20px;
}
#cssmenu li {
  float: left;
  padding: 0px;
}
#cssmenu li a {
  background: #00a58d bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 15px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #ffffff;
}
#cssmenu ul ul a {
  color: #444444;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #00a58d bottom center no-repeat;
  color: #444444;
  text-decoration: none;
}
#cssmenu li ul {
  background: #ffffff;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
    /*left:0;*/
}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: #ffffff bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 17px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 10px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #00a58d center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}
#cssmenu p {
  clear: left;
}
Részenként fogom megmutatni, hogy melyik rész mire való és ott miket lehet megváltoztatni. De ha valakinek tetszik az enyém, akkor használhatja azt is :) Mindegyik résznél csak azt emelem ki (szép sárga színnel :P), amit érdemes megváltoztatni, nem szeretném tovább bonyolítani a dolgot, de ha valaki mást is szeretne, keressen meg emailben :)
#cssmenu {
  border: none;
  border: px;
  margin: 0px;
  padding: 25px;
  font-family: Patrick Hand;
  font-size: 19px;
  font-weight: bold;
  width: 960px;
Ez a kódrészlet a menüsorunk fő részét jelenti, azt lehet alakítgatni a kódok megváltoztatásával. A font-family értelemszerűen a betűtípust jelöli, ebben a bejegyzésben megmutattam, hogy hogyan lehet a Goggle Fonts segítségével megváltoztatni. A font-size a betűméret, erre nem árt figyelni, hogy kiférjen majd a menüsorban, ne legyen nagyon nagy :) A font-weight sorban beállíthatjuk, hogy sovány (light), normál (normal), félkövér (bold) vagy kövér (bolder) legyen a szöveg. A width kód a menüsor szélességét jelenti, itt érdemes azt az értéket beállítani, amekkora a blogunk szélessége. Én legalábbis azt szoktam beállítani :)
#cssmenu ul {
  background: #00a58d;
  border-radius: 15px;
  height: 35px;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 20px;
A background a menüsor hátterét takarja, erről az oldalról tudtok puskázni a hexakódokkal kapcsolatban :) A border-radius-al a keret ívét állíthatjuk be, a height pedig a menüsor magasságát jelöli.
#cssmenu li a {
  background: #00a58d bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 15px;
  text-align: center;
  text-decoration: none;
Itt a paddingnél a másodikat érdemes változtatni, itt állíthatjuk be, hogy a kategóriák mekkora távolságra legyenek egymástól. Minél kisebb a szám, annál közelebb, minél nagyobb, annál messzebb helyezkednek el.
#cssmenu > ul > li > a {
  color: #ffffff;
A color kóddal a főkategóriák színét változtathatjuk meg.
#cssmenu ul ul a {
  color: #444444;
Itt pedig az alkategóriák színét. Az előzőnél is és ennél is a normál, tehát nem kijelölt állapotot jelenti.
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #00a58d bottom center no-repeat;
  color: #444444;
  text-decoration: none;
Itt a hover szó a kijelölést jelenti, tehát itt azt állíthatjuk be, hogy milyen színű legyen a kijelölés, ha rávisszük az egeret valamelyik kategóriára, illetve milyen színű legyen a kijelölt szöveg. Jelen esetben itt a főkategóriákkal kapcsolatban állathatjuk be. A background a kijelölést jelöli, a color pedig a kijelölt szöveget.
#cssmenu li ul {
  background: #ffffff;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
    /*left:0;*/

Ebben a kódrészletben az almenü hátterét, valamint a szélességét változtathatjuk meg. A szélességet érdemes a szöveg hosszúságához igazítani :)
#cssmenu li ul a {
  display: block;
  height: 35px;
  font-size: 17px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 10px;
  text-align: left;
A height itt is a sormagasságot jelöli, a méret pedig az alkategóriák betűméretét.
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #00a58d center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
Ugyanúgy, mint a főkategóriáknál, a background itt is a kijelölés színét, a color pedig a kijelölt szöveg színét jelöli.
Nos, lényegében ennyit érdemes megváltoztatni, ha személyre szeretnétek szabni, ez egy sima, egyszerű menüsor, sajna annyira nem vagyok ügyes és tapasztalt, hogy különböző effekteket kódoljak bele, de nekem így is tökéletesen megfelel :)

A kód beillesztése

Ha készen vagyunk a formázással, jelöljük ki az egészet és másoljuk ki. Nem árt, ha ismét elmentjük a blogsablonunkat (ezt nem győzöm ismételni, nehogy tényleg gond legyen :)). Miután elmentettük, ismét nyissuk meg a Tervezőt, a Sablon fülön belül pedig a HTML-kód szerkesztőt. Ismét hívjuk elő a keresőt, de ezúttal a ]]></b:skin> kódot írjuk be.  
csskód
A kimásolt CSS kódot másoljuk be oda, ahova a nyíl mutat ( a ]]></b:skin> előtt üssünk egy entert, hogy egy üres sor legyen felette), a Sablon előnézete gombra kattintva nézzük meg, hogy stimmel-e a kódunk, s ha igen, akkor mentsük el. Ha sikerült, akkor mindenkinek jár egy vállveregetés :)  
készmenü
Én ennyit tudtam most nektek segíteni, ha bárki elakad szóljon és segítek, ha tudok természetesen :)

22 megjegyzés:

  1. Jelentem megcsináltam és sikerült :)
    Köszönöm ezt a kimerítő és alapos magyarázatot, nélküled nem sikerült volna.
    El kell mondanom, hogy még így is meggyűlt a bajom vele itt-ott, muszáj a blogon dolgozni a css kóddal, mert word-ben nem adja ki a hibákat. Pont ezért csináljatok tényleg egy próba blogot, és onnan már csak a kész kódokat kell az igaziba bemásolni. Még az enyém sem tökéletes, de ezek már apróságok amik szerintem csak nekem szúrják a szemem.
    Köszönöm! :)

    VálaszTörlés
    Válaszok
    1. Huh már kezdtem megijedni, hogy nem jól magyaráztam el :) köszönöm, hogy megírtad, hogy megcsináltad és sikerült :) Én is azért javaslom mindig a próbablogot, bár nem tudom, lehet, hogy sokan már nem szeretnek ilyenekkel bajlódni :)

      Törlés
    2. Megnéztem és nagyon jó lett ;)

      Törlés
    3. Teljesen jól magyaráztad, én totál hülye vagyok az ilyenekhez, de mint látod sikerült :)
      Arra nem jöttem rá, hogy hogyan tudnám a szöveget középre pakolni mint ahogy pl. itt is van: http://www.thecherryfactor.com/, mert nem annyira tetszik hogy így szét kellett húznom az egészet. Na meg az almenük túl hosszúak, arra valahogy nem reagált ha kicsinyíteni akartam a hosszát.
      Ja meg annyi, hogy ha valaki nekiáll, előtte nem árt írni egy kis jegyzetet arról hogy milyen színeket képzeltél és hogyan, mert én ezzel szöszöltem a legtöbbet, belekeveredtem hogy hova mit és melyik árnyalatot kellene.

      Törlés
    4. Arra még én sem jöttem rá, én is középre szerettem volna igazítani, de akárhova is tettem be a kódot, nem akart szót fogadni :/
      Az almenüknél nem tudom, hogy miért nem lehet kicsinyíteni, nálam működik a kódja :( próbálgatni kell, én is azt teszem, ha sikerül valamire jutni, akkor frissítem a bejegyzést :)

      A többieknek, aki neki szeretne fogni, tényleg ajánlom, hogy legyen egy próbablog meg egy jegyzetfüzet, nemcsak a színeknél, hanem a kategóriák összeállításánál :)

      Törlés
  2. nekem nem jött össze pedig érte a folyamatot....

    VálaszTörlés
    Válaszok
    1. Írj emailt légyszi, hogy mi nem sikerült :)
      eletespillecukor@gmail.com

      Törlés
  3. És hogyan kell azt megcsinálni, hogy ha rákattintok valamelyikre akkor, pl. a DIY-ra akkor az azokkal kapcsolatos bejegyzések jönnek be?

    VálaszTörlés
    Válaszok
    1. Ebben a bejegyzésben le van írva, hogy mit kell csinálni, viszont ahhoz, hogy be tudd illeszteni a blogodba, már eszerint a bejegyzés szerint kell eljárnod :)

      http://eletespillecukor.blogspot.hu/2014/03/blogger-tutorial-lenyilo-menusor_5.html

      Törlés
  4. Nagyon köszönöm a segítséged! Gyönyörű a blogod, engem külön ösztönzött arra, hogy több időt fektessek a sajátom kinézetébe:)

    VálaszTörlés
    Válaszok
    1. Remélem tudott segíteni :) Köszönöm, sok munka volt vele, de azt hiszem, megérte, már csak az ilyen hozzászólásokért is :)

      Törlés
  5. Hatalmas köszönet ezért is! Sikerült, bár azért volt közben némi izgalom. :)

    VálaszTörlés
    Válaszok
    1. Jaj de jó! :) Én mindig ennél izgulok, hogy vajon sikerül-e mindenkinek megcsinálni a bejegyzés segítségével :D de akkor szuper, ha sikerült! :)

      Törlés
  6. Jelentem nekem is sikerült, Kis segítség ha valakinek esetleg jobbra elcsúszik az egész akkor a főmenű résznél a marginhoz -...px-et írjon a paddinghoz pedig 0. Köszönöm remek ötlet és nagyon jó leírás

    VálaszTörlés
  7. Ezer hála és köszönet, már jó ideje vadásztam egy használható legördülőmenü kódért. Már alkalmaztam is a sablonomon, bár még azt hiszem finomítok rajta, de tökéletesen működik.

    Még egyszer nagyon köszönöm a kódokat! Engedelmeddel - természetesen rád hivatkozva - terjeszteni fogom az igét. :)

    VálaszTörlés
    Válaszok
    1. Huh, örülök, hogy sikerült :) Nagyon szívesen, anno én is örültem, hogy rátaláltam :)

      Törlés
  8. Fantasztikus vagy! Elvacakoltam vele 2 és fél órát, de megérte! :) Köszönöm!

    VálaszTörlés
    Válaszok
    1. Nagyon örülök, hogy sikerült megcsinálni, megnéztem és szuper lett :) Ügyi vagy!

      Törlés
  9. Szia Szilvi!

    Óriási köszönet a profi leírásért 😆 Imádlak. December 29-én kezdtem írni a blogot, és már közel állok ahhoz, hogy úgy nézzen ki ahogy megálmodtam. Most találtam bejegyzést tőled a hátterek szerkesztésére, szóval az a következő projektem.
    Két kérdésem lenne. Az egyik, hogy megoldható e, hogy ha valaki belép a blogomba a főoldalt lássa, és ne azt amit az adott nap írtam? A másik, hogy a lenyíló menüsorban,hogy tudok az adott fül alá írni?

    Előre is köszönöm a segítséged! 😊

    nojanyu.blogspot.hu

    VálaszTörlés
  10. Szia

    Nagyon szuper a leírás :), neki is kezdtem, de sajnos az oldalon már akkor is fizetni kell ha a HTML kódot akarod megnézni/másolni. Ha van időd azért rákukkanthatnál, hogy tényleg jól látom a dolgot nem csak valamit bénázok. :D

    Köszi

    VálaszTörlés
    Válaszok
    1. Szia! Megnéztem és sajnos tényleg teljesen fizetős lett ez az egész :( Erre megpróbálok egy új megoldást kitalálni, csak sajnos mostanában kevés erre az időm :/ de amint találok valamit, biztos, hogy közzé teszem itt a blogon ;) Köszönöm, hogy felhívtad erre a figyelmemet! :)

      Törlés