Jazy Css Meniu Vertical

• Home
• Profil
• Contact
• Feed

Un frumos meniu vertical cu efect hover ce se poate adauga pe bara laterala stanga sau dreapta a blogului nostru.
Acum vom vedea care sunt pasii de urmat pentru a inserta acest meniu pe blog; in primul rand va trebui sa gazduim urmatoarele 2 imagini intr-un servidor, eu folosesc Imageshack sau orice alt servitor de gazduire imaginie.

Imagine 1. Imagine 2.

Mergem la Aspect --> Editare HTML si cu ajutorul CTRL+F cautam linia ]]></b:skin> exact deasupra ei adaugam urmatorul cog html:

#gpmenu{
background:#fff;
width:140px;
}
#gpmenu ul{
list-style:none;
}
#gpmenu li{
list-style:none;
margin:3px 0;
}
#gpmenu li a{
list-style:none;
background:#8faf39 url(aici-url-imagine 1) no-repeat;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
text-decoration:none;
display:block;
height:35px;
line-height:35px;
padding:0 0 0 20px;
}
#gpmenu li a:hover{
background:#da4a70 url(aici-url-imagine 2) no-repeat;
color:#fff;
text-decoration:none;
}
}

Se inlocuieste (aici-url-imagine 1) si (aici-url-imagine 2) cu url-ul celor doua imagini de mai sus.
Salvezi modificarile si trecem la ultimul pas insertarea meniului in bara laterala.

Ne intoarcem la Aspect si deschidem un element HTML/Javascript unde vom adauga urmatorul cod:

<ul id="gpmenu">
<li><span><a href="URL-LINK">Home</a></span></li><li><span><a href="URL-LINK">Profil</a></span></li><li><span><a href="URL-LINK">Contact</a></span></li><li><span><a href="URL-LINK">Feed</a></span></li>
</ul>

Se inlocuieste "URL-LINK" cu url-ul pagini care doresti sa apara in meniu , salvezi modificarile si gata ai pe blog instalat un frumos meniu vertical. Daca doresti un meniu flotant il vei gasi aici Dynamic Drive.