2017 altex.ro

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

2 comentarios:

  1. Este super tare acest meniu!
    Doar ca l-am scos ca aparea deasupra blogului o __> sau ceva de genu dupa ce am adaugat in sablon CSS-ul, cred ca este o mica problema acolo, in rest este OK!
    Good Job!

    RăspundețiȘtergere
  2. Salut Laurentiu,am verificat codul si este in regula,exemplu il gasesti in blogul meu de proba, sincer nu stiu ce greseala ai facut la aplicare pe sablon, de apare pe blogul tau acele caractere.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc