Crearea unui meniu in HTML & CSS

In continuare va voi arata cum se creaza o bara de meniu orizontala, ale carei elemente sa-si schimbe culoarea cand trecem cu mouse-ul peste ele. Pentru aceasta nu voi folosi javascript, considerand ca este mai la indemana si mai elegant sa facem acest lucru doar cu html si css. (javascript poate mari timpul in care se deschide pagina iar noi nu dorim acest lucru).

Voi folosi div-uri (nu tabele) iar butoanele nu vor fi doar niste imagini, vor avea si text, asta pentru a putea fi citite de robotii motoarelor de cautare, cu atat mai mult cu cat de cele mai multe ori numele elementelor din meniu caracterizeaza continutul unei pagini.
Pentru asta avem nevoie de doua fisiere pe care le voi denumi index.html si stil.css si rezultatul final ar trebui sa fie o bara de meniu ca cea din imaginea de mai jos..

Codul din index.html:

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>titlu site</title>
<link href=”stil.css” rel=”stylesheet” media=”all” type=”text/css” />
</head>
<body>
<div id=”barameniu”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>Pagina 1</a></li>
<li><a href=”#”>Pagina 2</a></li>
<li><a href=”#”>Pagina 3</a></li>
<li><a href=”#”>Pagina 4</a></li>
<li><a href=”#”>Pagina 5</a></li>
<li><a href=”#”>Pagina 6</a></li>
</ul>
</div>
</body>
</html>

Destul de simpu pana acum. Mai ramane sa scriem codul din stil.css, fisier la care facem referire zona  <head> a fisierului html:

#barameniu {
margin: 0 auto;
padding: 0;
position: relative;
width: 750px;
height: 28px;
background: #f00;
font: bold 12px tahoma, Arial, Helvetica, sans-serif;
}

#barameniu ul {
margin: 0;
padding: 0;
float: none;
}

#barameniu li {
padding: 0 2px 0 0;
margin: 0;
float: left;
background: url(images/separator.png) 100% 0 no-repeat; /* elementele
meniului sunt separate de o imagine  (width=2, height=inaltimea pe care o doriti pt bara de meniu */
}

#barameniu ul li a:link, #barameniu ul li a:active, #barameniu ul li a:visited {
display: block;
float: left;
padding: 0 20px;
height: 28px;
line-height: 28px;
color: #fff;
text-decoration: none; /*link-urile nu sunt subliniate */
}

#barameniu ul li a:hover {
background: #cf0; /*schimba culoarea backgroundului elementelor listei
cand trecem cu mouse-ul peste ele (cand sunt
active)
}

Efectul dorit l-am obtinut dar nu este foarte spectaculor din punct de vedere esteti. Se poate folosi ca background pentru bara de meniu o imagine. Sa facem o proba…. Am folosit o imagine cu dimensiunile : h=28px si w=2.
Iata ce am obtinut:

Modificarile le facem doar in fisierul CSS:

#barameniu {
margin: 0 auto;
padding: 0;
position: relative;
width: 750px;
height: 28px;background: #fff url(images/fundal.png) 0 0 repeat-x;
font: bold 12px tahoma, Arial, Helvetica, sans-serif;
}

.
.
.
.
#navbar ul li a:hover {
background: url(images/fundal.png) 0 100% repeat-x; /*pentru mouse-over am folosit aceeasi imagine dar aceasta isi modifica nuanta atunci cand link-ul este activ */
}

SURSA: ETUTORIALE.RO

.

.

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s