home > tutoriale > html-css > un-simplu-meniu-in-css.php

Cum sa faci un meniu simplu cu CSS

11 Septembrie de Mihail Alin

In acest tutorial va voi arata cum sa faceti un simplu meniu cu CSS

Rotuts : autor
Autor :   Mihail Alin

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;
	  }

Asa arata meniul



Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria HTML & CSS

  CSS3 border-radius si -moz-boder-radius   -   Cum sa faci un simplu web-site pe 3 coloane   -   Centrarea paginii cu CSS   -   Table in HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -

Tutoriale aleatorii

  Meniu Slide-Out cu Jquery, Html si CSS   -   Cum sa faci un simplu web-site pe 3 coloane   -   Table in HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -   Trimiterea datelor din formular la adresa de e-mail   -   Validarea unui formular   -   Cum sa faci un ceas cu JavaScript   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

2 comenturi pana acum... (posteaza si tu)

Ma bucur ca ti-a fost de ajutor acest tutorial. Poate ne recomanzi si prietenilor tai :) Bafta

Postat de Mihail ALin pe data de: Thursday, 02.23.12 @ 09:54am

va multumesc foarte, foarte, foarte muuuuuult. cautam demult un cod ca acesta. multumesc frumoooooooooooooooooooooooooooos. :X

Postat de hihi ^^ pe data de: Friday, 02.10.12 @ 11:56am

Comentarii:

Nume:

Email:

Comentariu:
 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...
 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s
 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.