#5 - Leugró menü a blogodra

Igaz még azt sem vettük át, hogy miként lehet nem leugró menüt a blogra varázsolni, de mivel nekem most éppen erre van szükségem, így a simára később fogok visszatérni. Annak elkészítése ugyanis jóval egyszerűbb, mint az alábbiakban bemutatott leugróé és sok esetben és sokaknak nincs is szüksége az alábbiakban bemutatott verzióra. De akinek igen, az most mégis velem tarthat. :)

A leugró menü 2 dologból áll. Az egyiket egészen egyszerűen csak be fogjuk illeszteni a sablonunkba, a másikra pedig egy olyan megoldást kerestem, ami esetében kivételesen nem kell a HTML kódunkban turkálnunk.


A leugró menü szerkezete

Amit a sablonba fogunk beilleszteni kód a következőképpen néz ki.

• ha egy új menüpontot szeretnénk létrehozni, akkor ezt a sort kell a később bemutatott kódba beilleszteni:       

<li class="active"><a href='#'>Menü neve</a></li>

• az almenük felépítése így néz ki:

<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>

• egy teljesen új menüpont almenükkel együtt pedig így:

<li><a href='#'>Menü neve</a>

<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>

</li>

Ezzel egy kicsit szórakozni kell, míg elérjük a kívánt menüfelépítést, de ha az ember már átlátja, hogy hogyan is működik, akkor viszonylag hamar dűlőre lehet vele jutni. Az alábbiakban megadok egy alapnak szánt kódot, amivel el lehet kezdeni dolgozni.

Ezzel a kóddal nincs más teendőnk, mint:

1. ebből a bejegyzésből kimásolni
2. a navigációs sávban az "Tervezés" szóra klikkelni
3. a következő oldalon baloldali sávban az "Elrendezés"-t választani
4. egy új elemet a sablonhoz hozzáfűzni, méghozzá egy "HTML/JavaScript"-et
5. a felugró ablakba pedig az alábbi kódot bemásolni:

<!-- start navmenu -->
<ul id='cssnav'><li class="active"><a href='#'>Főoldal</a></li>
<li class="sub"><a href='#'>Menü 1</a>

<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>
</li><li><a href='#'>Menü 2</a><ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>

</li><li><a href='#'>Menü 3</a>
<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul></li> <li><a href='#'>Menü 4</a>
<ul>
<li><a href='#'>Almenü 1</a></li>
<li><a href='#'>Almenü 2</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul></li>
</ul>
<!-- end navmenu -->

Ezzel egyelőre megvagyunk, mentsük a sablont.

További összetevő

Most a sablonunkhoz fogunk nem a HTML kódban egy kiegészítő kódot hozzáfűzni.

1. menjünk a baloldali sávban a "Sablon"-ra
2. válasszuk a sárga gombot, nem a HTML szerkesztését
3. a megjelenő új oldalon kattintsunk a legalsó szóra



4. majd görgessünk a CSS kód beszúrásának lehetőségéhez



5. ezek után pedig a jobb oldalon megjelenő fehér sávba másoljuk be az alábbi kódot:

/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;}

1. Majd alkalmazzuk a blogunkra a most eszközölt változtatásokat.

Mivel a leugró menüt ilyen módszerrel illesztettük be az oldalunkra, ezért ha ezen az oldalon maradunk, akkor a Blogger által megadott kezelőfelületen testre is szabhatjuk a színeket és a betűtípust is, teljesen beleolvasztva ezzel a leugró menü kinézetét a sablonunk eddigi dizájnjába.

Ha ezzel megvagyunk, akkor nincs más hátra, mint visszamenni a HTML/JavaScript-ünkhöz, és felépíteni a menünket.

A kettős keresztek ( # - vigyázzunk, hogy a felső vesszőket ne töröljük!!) helyére kell beírni a linkeket, melyeket nem máshogy kapunk meg, mint a "Címkéinkre" kattintva, és elnevezni a menüket és almenüket.

Egy példa nálam:

<li><a href='http://vegyesturmix.blogspot.de/search/label/mindennapok'>Mindennapok</a>

<ul>
<li><a href='http://vegyesturmix.blogspot.de/search/label/kiv%C3%A1ndorl%C3%A1s'>Kivándorlás</a></li>
<li><a href='http://vegyesturmix.blogspot.de/search/label/munka'>Munka</a></li>
<li><a href='#'>Almenü 3</a></li>
</ul>

</li>

Sok sikert a menüépítéshez! :)