Blogkészítési Tippek XIX. - Oldalról kigördülő menü

Nem is olyan régen két különböző módot is bemutattam nektek legördülő menü készítésére a blogotokra. Most egy hasonló funkcióval rendelkező modult mutatok, ami a böngésző lapjának szélén helyezkedik el. Ilyet leggyakrabban valamilyen "Social Media" (Facebook, Google+, Twitter) modulnál látunk. Lehet azonban ezt másra is használni, például oldal menünek vagy bármilyen reklám elhelyezése végett.

Az általam készített ilyen modul megnézhetitek az alábbi gombra kattintva a DEMO Blogon. 

DEMO

Ezt a következőképpen tudod elkészíteni.

Első lépésként menj a blogod irányítópultján az "Elrendezés" menüponthoz és kattints a "Modul Hozzáadása" gombra. A felugró ablakban válaszd a HTML/Javascript modult és add hozzá a Blogodhoz.

Ekkor felugrik egy kis ablak, a megfelelő helyre másold be az alábbi kódot:

<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/side-bar-menu/prototype.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/side-bar-menu/effects.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/side-bar-menu/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:100%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:100%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#472B1F;
width:170px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:none !important;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 180px;
left:0px;
background-image:url(http://mylifefactory.hu/images/mlf-kigordulo-modul-keret.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:140px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:display !important;
width:210px;
height:300px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Kigördülő Menü</h2>
<ul>
<li><a href="#">Egyes Menüpont</a></li>
<li><a href="#">Második Menüpont</a></li>
<li><a href="#">Harmadik Menüpont</a></li>
<li><a href="#">Harmadik Menüpont</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="Oldal Menü" src="http://mylifefactory.hu/images/mlf-kigordulo-modul-ures2.png" title="OldalMenü" /></a>
</div>

---

Színek:
piros: ezzel állítod be, hogy a modul milyen távolságra legyen a böngésző tetejétől.
Lila Háttér: Az elsővel állítod be a modul távolságát a böngésző lapjának oldalától, a másodikkal pedig azt állíthatod be, hogy melyik oldalon legyen. Ha a 'float'= 'left' akkor bal oldalon lesz, de át akarod rakni jobbra akkor írd át a 'float' értékét 'right'-ra. Ekkore azonban a ehhez kell igazítanod a távolságot is és átírnod 'right'-ra a távolság mértékét. 
Világoszöld és Lila: A zöld a megjelenő kép magassága, a lila pedig a szélessége pixelekben számolva. 
Kék: A kigördülő rész szélessége és magassága szintén pixelekben számolva. 
Narancs sárga: A menü és a menüpontok címei. Arra írd át amire szükséged van. 
Világos kék: Ide illeszd be a megfelelő linkeket. Vigyázz, hogy a linkek mindig az idézőjelek között maradjanak.

Ha meg vagy a beállításokkal, kattints a mentés gombra és nézd meg a blogodat. Kész is vagy!! :)

TIPP:
Ha kitörlöd az <ul></ul> elemeket és a köztük lévő más részeket, bármit berakhatsz a modulba! Legyen az szöveg, kép, videó. Könnyű szerrel elhelyezheted.