Meniu vertical - clase CSS

Adaug azi un nou meniu vertical folosind clase CSS, acesta utilizeaza o imagine de fond unica pentru a realiza 3 efecte diferite.

Pentru incorporarea lui intr-un blog se respecta urmatori pasi:

1. Copiaeza urmatoarea imagine in PC-ul tau, o gazduiesti intr-un servidor de imagini care iti ofera url-ul de la imagine.


2. Mergi la Desing --> Editati HTML , cu ajutorul tastelor Control + F cauta urmatoarea linie ]]></b:skin> si exact deasupra ei adauga urmatorul cod clase CSS:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.arrowgreen{
width: 180px; /*width of menu*/
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 0px;
border-width: 0px;
}

.arrowgreen ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.arrowgreen li a{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
display: block;
background: transparent url(url_imagine) 100% 0;
height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
padding: 4px 0 4px 10px;
line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
text-decoration: none;
}

.arrowgreen li a:link, .arrowgreen li a:visited {
color: #5E7830;
}

.arrowgreen li a:hover{
color: #26370A;
background-position: 100% -32px;
}


.arrowgreen li a.selected{
color: #26370A;
background-position: 100% -64px;
}

</style>

Inlocuieste url_imagine cu url-ul imagini gazguite. Salveaza modificarile si mergi la ultimul pas:

3. Deschde un nou gadget HTML/Javascript si adauga urmatorul cod html:

<div class="arrowgreen">
<ul>
<li><a href="url_link" >Home</a></li>
<li><a href="url_link" >CSS Library</a></li>
<li><a href="url_link" >DD Whois</a></li>
<li><a href="url_link" >Forums</a></li>
<li><a href="url_link" >Webmaster Tools</a></li>
<li><a href="url_link" >JavaScript</a></li>
</ul>
</div>

Inlocuieste ce este in culoare rosie cu url-ul paginilor care doresti sa apara si ce este de culoare albastra inlocueste cu descrierea sau titlul fiecarei pagini.

Un exemplu al acestui meniu vertical il gasesti pe blogul meu de proba clik aici