Lenyíló menüsor a bloggerben

Mindenek előtt fontos megjegyeznem, hogy ezt a bejegyzést február 25-én kezdtem el írni, amikor kitettem a Mire figyelj egy bejegyzés megírásakor? írásomat, ami a Tippek, tanácsok sorozat első eleme. Hihetetlenül sokakat érdekelt, ugyanakkor cseles voltam, és már korábban is belevágtam a következő részébe annak a rovatnak. Annak pedig hihetetlenül örülök, hogy ennyien kattintottatok, hiszen remélem, tudtam segíteni valakinek. :)

Most a lenyíló menü kialakításában szeretnék segíteni egy keveset. Nem tudom, hogy minden témánál működik-e, de én kettő módszert szeretnék bemutatni.

A lenyíló menük után akkor kezdtem el "érdeklődni," amikor túl sok menüpontom lett, és ez szétdarabolta a kinézetét a blogomnak. Ekkor még egy másik design volt a blogon, ekkor az oldalak még a kép alatt helyezkedtek el, és linkekként kellett beszúrni őket. Sikerült pár oldalt felköltöztetnem a fekete sávba, az url alá, viszont ott sem fértek volna el rendesen, így ketté bontottam a dolgokat: egy része fent, a másik fele pedig lent.

Ugyanakkor ez sem tetszett. Nagyjából ekkor elkezdtem kutakodni az interneten egy teljesen más témában, és ahelyett rátaláltam egy olyan oldalra, ahol megtudtam, hogyan is kell lenyíló menüt kódolni. Eddig a pontig én szentül hittem, hogy ez fizetős - azonban nem, ez a módszer teljesen ingyenes, hiszen ezt mi magunk készítjük el.

1. Első lehetőség

Ezt a kódolást ezen a blogon találtam. Ennek lényege, hogy van egy alap kódunk, és azt alakíthatjuk a kedvünk szerint. A kód ez lenne:

<ul class='menu' id='menu-mainmenu'>

<li><a href='#'>Menu1</a>

    <ul class='sub-menu'>

  <li><a href='#'>Sub-Menu1</a></li>

  <li><a href='#'>Sub-Menu1</a></li>

    </ul>

</li> 

</ul>

Az általam félkövérrel szedett két piros sor kötelező eleme a kódnak, ezeket nem is kell piszkálni. A második sor jelöli az első menüpontunkat, az alatta lévő <ul class='sub-menu'> sor pedig azt adja meg, hogy innen lesz egy lenyíló rész. Ezt sem kell piszkálni.

Amit nekünk alakítani kell, az a kékkel szedett rész: a # helyére kerül a link, a Menu1 és a Sub-Menu1 helyére pedig a szöveg, amit ki szeretnénk vele íratni. Azt is tudjuk módosítani, ha több lenyíló menüt vagy fő menüpontot szeretnénk.

Ezt a fentebb linkelt bejegyzésben jobban kifejti az írója, nem is tudnám jobban, érdemes hozzá benézni. Példákkal illusztrálja, én csak a nagyját mondtam most el.

2. Második módszer

Erre a napokban döbbentem rá. Keresgéltem a könyvjelzőim között, és rábukkantam rengeteg témára, amiket még korábban gyűjtöttem össze. Egyet ki is próbáltam egy próbablogon, és ott vettem észre, hogy nem html-kódban vannak beillesztve a menüpontok, hanem linkek formájában.

Némelyik témában van olyan, hogy kialakítják a menü helyét, és ez ebben is így van. A jelenlegi témámban a bejegyzések fölött van egy "beépített" menürész, ahova nem húzhatok mást, és nem is tudom onnan kitörölni az elemet. Csupán annyit tehetek, hogy nem helyezek el oda linket, és így nem is jelenik meg ténylegesen az oldalon.

Ha nektek is van ilyen, vagy alapsablonnál is el tudjátok így helyezni, és tényleg működik, hogy vízszintesen tegye be a menüpontokat (néha hajlamos függőlegesen, felsorolásszerűen bedobálni ezeket), akkor tudjátok használni ezt a módszert.

A lényege annyi, hogy az, aminek alpontnak kéne lennie, annak a címe elé tegyetek egy "_"-t. Természetesen az idézőjelek nélkül. Engem is meglepett, de működik, és tényleg lehetséges így is a menü elkészítése. Azután, ha még egy szintet szeretnétek, akkor kettő ilyen jelet kell beilleszteni, viszont ez már nem feltétlenül működik minden esetben. Itt arra gondolok, hogy egy adott témán nem működik, de ahol felfedeztem ezt a trükköt, ott igen.

Abban nem vagyok biztos, hogy mindkét módszer mindenkinél garantáltan működik, per pillanat az én alapsablonomnál sem tudom egyiket sem sikerrel "véghez vinni," viszont ezek nagyon jó megoldások, és lehet másoknak tudok ezzel segíteni. Utóbbi inkább kreatív, előbbi pedig fejleszti a kódolási tudásunkat. Már ha nem tudtunk ilyeneket eddig. ;)