Bine ati venit pe forumul de suport al Forumgratuit

Pentru a beneficia de tot ceea ce va ofera forumul nostru, va rugam sa va conectati daca sunteti deja membru sau sa va alaturati comunitatii noastre



Creati un forum gratuit ca acesta.

Vertical CSS Menu - Meniu Animat

 :: Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Vertical CSS Menu - Meniu Animat

Mesaj Scris de ezlidor la data de Dum 21 Iun 2009, 3:06 pm

Vertical CSS Menu - Meniu Animat



Folosind codurile din acest tutorial, veți reuși să creați butoane animate pentru forumul dumneavoastră, fară a mai adăuga tot felul de coduri de pe diverse site-uri care își adaugă reclamă în forumul dvs. prin codul generat de ei. Un model puteți să vedeți mai jos:



Pentru o bună funcționalitate, partea <HEAD> a codului o vom adăuga în Foaie de stil CSS:
Panou de administrare => Afișare => Imagini și culori => Culori => Foaie de stil CSS -> CSS

Chiar dacă mai aveți alt meniu stabilit în foaia de still CSS, adăugarea acestui cod nu va creea probleme celuilalt.
Cod:
#menu4 {
   width: 200px;
   margin: 10px;
   border-style: solid solid none solid;
   border-color: #000;
   border-size: 1px;
   border-width: 1px;
   }
#menu4 li a {
   height: 29px;
     voice-family: "\" \"";
     voice-family: inherit;
     height: 24px;
   text-decoration: none;
   }   
#menu4 li a:link, #menu4 li a:visited {
   color: #CCC;
   display: block;
   background:  url(LINK IMAGINE BUTON);
   padding: 8px 0 0 10px;
   }
#menu4 li a:hover {
   color: #FFF;
   background:  url(LINK IMAGINE BUTON) 0 -32px;
   padding: 8px 0 0 10px;
   }   


ul{
list-style: none;
padding: 0px;
margin: 0px;}


Partea <BODY> a codului poate fi adăugata în:
1. într-un modul din widget/portal
3. în descrierea unui forum/categorii
4. în mesaj pentru pagina de start
5. în conținutul unui mesaj (dacă aveți activat codul HTML)
6. într-o pagina HTML
Cod:
<body>
<div id="menu4">      <ul>         <li><a href="LINK PAGINA" title="NUME PAGINA">TEXT BUTON</a></li>         <li><a href="LINK PAGINA" title="NUME PAGINA">TEXT BUTON</a></li>         <li><a href="LINK PAGINA" title="NUME PAGINA">TEXT BUTON</a></li>         <li><a href="LINK PAGINA" title="NUME PAGINA">TEXT BUTON</a></li>         <li><a href="LINK PAGINA" title="NUME PAGINA">TEXT BUTON</a></li>         </ul></div></body>


Dacă doriți să mai adăuagați un buton nou, adăugați codul de mai jos înaintea tagurilor </ul></div></body>
Cod:
         <li><a href="LINK PAGINA" title="NUME PAGINA">TEXT BUTON</a></li>         


Atenție!
Butonul este format dintr-o singură imagine! Nu trebuie să adăugați 2 imagini, una pentru buton normal și una pentru buton când poziționezi cursorul peste!
Model buton:


În scriptul de mai sus, înăltimea imaginilor pentru butoane este de 64px
În imaginea de mai jos v-am arătat cum stabiliți vizualizarea imaginilor pentru buton (1 - când cursorul nu este poziționat pe buton, 2 - când cursorul este poziționat peste buton)




Atenție!




Atenție!
Daca stabiliți o alta imagine de fundal și aceasta are o lungime mai mare de 200px , schimbați lungimea de vizualizare a butonului din secțiunea de mai jos:
Cod:
width: 200px;



Mult succes!
Echipa Forumgratuit ~ Ezlidor

Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.


Ultima editare efectuata de catre ezlidor in Mar 11 Mai 2010, 11:50 am, editata de 1 ori

ezlidor
Veteran Forumgratuit
Veteran Forumgratuit

Numarul mesajelor: 11523
Varsta: 23
Localizare: Iasi
Data de inscriere: 07/02/2008
Niciun warn

http://help.forumgratuit.ro

Sus In jos

Re: Vertical CSS Menu - Meniu Animat

Mesaj Scris de ezlidor la data de Dum 21 Iun 2009, 3:12 pm

Alte modele de butoane:

PUTETI ADAUGA SI IMAGINI GIF ANIMATE!


























ezlidor
Veteran Forumgratuit
Veteran Forumgratuit

Numarul mesajelor: 11523
Varsta: 23
Localizare: Iasi
Data de inscriere: 07/02/2008
Niciun warn

http://help.forumgratuit.ro

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

 :: Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum