Comunitatea Salmen
Bun venit pe Forumul Sallmen Community !!!

Pentru a vedea tot forumu trebuie sa va inregistrati !!!

Sallmen Forum Community Welcome!

To see all forum you must register!


Salmen Comunity o comunitate de Counter-Strike, Metin2 etc.. .
 
AcasaPortalInregistrareConectare

Distribuiţi | 
 

 Meniu simplu de linkuri

Vezi subiectul anterior Vezi subiectul urmator In jos 
AutorMesaj
Vlade' <3
Membru Activ
avatar

masculin Numarul mesajelor : 715
Data nasterii : 09/12/1994
Data de inscriere : 21/07/2009
Varsta : 23
Localizare : Undeva pe planeta albastra

MesajSubiect: Meniu simplu de linkuri   Sam Noi 26, 2011 3:26 pm

Ok revin cu inca un mic tutorial, imi imaginez ca exista destule pe net dar fac si eu unul cat se poate de simplu. In acest tutorial vom crea un meniu de link-uri ( simplu zis un meniu ), orizontal, folosind HTML si CSS. Pentru inceput creeam un UL ( Unordered List ) adica o lista neordonata, in care elementele listei sunt….link-urile noastre.

Cod:
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="produse.html">PRODUSE</a></li>
    <li><a href="despre-firma.html">DESPRE NOI</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    </ul>


Bun, ceea ce va rezulta codul de mai sus e o lista verticala cu link-urile respective, si cu niste bulinute in fata.Bun pana aici.
Acum va trebui sa integram aceasta lista intr-un DIV, pe care o sa il numim simplu “meniu”.


Cod:
    <div id="meniu">
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="produse.html">PRODUSE</a></li>
    <li><a href="despre-firma.html">DESPRE NOI</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    </ul>
    </div>


Acum vom aplica partea de CSS, pentru inceput sa scapam de bulinute asa ca vom adauga in partea de CSS a paginii noastre web urmatoarele:

Cod:
#meniu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    }


Codul de mai sus elimina bulinutele, si spatiulmarginea.
Acum mai adaugam o linie de CSS care va transforma lista noastra din verticala in orizontala.


Cod:
#meniu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    }
    #meniu li {
    display: inline;
    }


Acum, link-urile din meniu fiind…link-uri ele au by default acea culoare specifica lor, adica acel albastru si sublinite, vom adauga inca o linie CSS ca sa eliminam acea subliniere si de ce nu sa le dam o alta culoare.

Cod:
#meniu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    }
    #meniu li {
    display: inline;
    }
    #meniu a {
    text-decoration:none;
    color: red;
    }

De sa nu adaugam si un efect, acela de a-si schimba culoarea cand trecem cu mouse-ul peste link-urile din meniu, asa ca mai adaugam o line CSS.


Cod:
    #meniu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    }
    #meniu li {
    display: inline;
    }
    #meniu a {
    text-decoration:none;
    color: red;
    }
    #meniu a:hover {
    color: yellow;
    }

Si meniul nostru e gata de a fi folosit si bineinteles customizat in ce feluri vreti.
Sus In jos
http://salmen.forumers.ro
 
Meniu simplu de linkuri
Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
Comunitatea Salmen :: Metin 2 :: Scripting Web Metin2 :: Scripturi si tutoriale HTML-
Mergi direct la: