Cum sa faci un meniu simplu cu CSS
11 Septembrie de Mihail AlinIn acest tutorial va voi arata cum sa faceti un simplu meniu cu CSS
Intotdeauna, Prima oara se scrie codul HTML
Multi designeri fac o greseala foarte mare, prin care isi ingreuneaza viata.Ei in timp ce scriu HTML il si formateaza cu CSS , este o greseala foarte mare , cel putin parerea mea este ca mai intai trebuie scris codul HTML si pe urma te poti ocupa de stilarea paginii.Cu astea fiind spuse haideti sa incepem :
<html> <head> <title>Un meniu simplu in css </title> </head> <body> <div id="navigation"> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Prezentare</a></li> <li><a href="#">Magazin</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
Acesta o sa fie meniul nostru , dupa cum vedeti este o simpla lista.
Css
Sunt sigur ca multi dintre voi, care ati mai facut pagini web pana acum , ati auzit de asa zisul CSS RESET . Ei bine, cu CSS Reset, resetezi toate valorile "default" ale navigatoarelor , de exemplu navigatoarele adauga margin si padding la elementele de pe pagina , bineinteles ca noi nu ne dorim asa ceva.
html, body, ul, li, a, div{
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
Bineinteles intr-un proiect mai mare se adauga mai multe elemente cum a fi : img, em, small, h1, h2, h3, ol etc .
Eu am adaugat doar pe cele care le vom folosi.
Ok, haideti sa ne intoarcem la stilarea meniului :) :
#navigation{
background-color:#8ec196;
height:45px;
width:850px;
margin:0 auto;
border:1px solid #9cebda;
}
ul#menu{
list-style:none;
margin-left:7em;
}
#menu a{
text-decoration:none;
font-size:1.8em;
color:#06F;
}
#menu a:hover{
text-decoration:underline;
color:#0CC;
}
#menu li{
/*cu float facem lista sa "pluteasca", adica sa se alinieze horizontal*/
float:left;
padding:5px 15px 5px;
text-align:center;
}
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta