Elemente de web design – Meniu CSS orizontal
Unul dintre cele mai populare si simple modele de meniuri de navigare pentru o pagina web este meniul orizontal. Acesta este de obicei asezat direct sub header, formand adesea o bara, dar putand fi format cateodata si din butoane separate.
Acest tip de navigare nu este doar usor de folosit, ci si simplu din punct de vedere al elementelor de design web, si printre primele ce ar trebui invatate de catre web designerii incepatori.
Pentru a crea un meniu orizontal in CSS, partea de html consista doar din elementele de < ul > < li > si < div >, restul de elemente de stil fiind adaugate in CSS. Din acest motiv, pentru a putea urmari acest tutorial este nevoie de cateva cunostinte de baza in ceea ce priveste elementele de web design, atat HTML cat si CSS.
Partea de HTML este extrem de simpla:
<div id=”navi”> – ( unde „navi” este id-ul dat spatiului in care se va afla meniul, acestuia i se poate da orice denumire in functie de preferinte <div id=”menu”> sau <div id=”navigation”> – functioneaza la fel de bine ca primul exemplu)
<ul>
<li> <a href=”#”> Buton 1 </a> </li>
<li> <a href=”#”> Buton 2 </a></li>
<li><a href=”#”>Buton 3 </a></li>
</ul>
</div>
Motivul pentru care adaugam “#” pentru fiecare buton este ca acesta sa se comporte ca un hyperlink si sa putem edita elementele de a si a hoover fara a adauga paginile catre care trimit butoanele.
Partea de CSS:
Intreg menu-ul este de fapt controlat din CSS, astfel:
#navi /* sau #menu sau #navigation in functie de id-ul ales/
{
Width:100%;
Height: 30px;
Background-color:#000;
}
Valoarea height poate fi schimbata in functie de grafica folosita pentru butoane, la fel si background-color.
ul {
margin:0px ;
padding: 0px;
}
Margin: 0px si Padding 0px se folosesc pentru a elimina mariginile si padding-ul default pentru fiecare browser.
ul li {
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
}
List-style: none; – se foloseste pentru a scapa de bullet-urile pe care anumite browsere le adauga automat la liste, iar margin-left: 15px; se foloseste pentru a crea spatiu intre butoane, facandu-le mai usor de folosit si citit.
Height: 30px; – trebuie sa se potriveasca cu elementul „height” al #navi. Acesta poate fi mai mic ca valoare, insa niciodata mai mare.
li a {
color:#999;
text-decoration:none;}
Acum textul de tip hyperlink din menu va aparea de culoare gri deschis, iar adaugand:
li a: hover {
text-decoration:underline;
}
O linie va sublinia textul butonului de navigare atunci cand mouse-ul se afla direct deasupra sa. Acesta este unul dintre cele mai simple tipuri de meniuri si, desi nu se ridica la nivelul barelor de navigare complexe pe care firme profesionale precum http://www.eventmedia.ro sau freelanceri profesionisti le pot creea, functionalitatea si simplicitate acestor tipuri de meniuri le fac destul de populare.
Creand propriul web design pas cu pas, de la cele mai simple elemente precum acest tip de menu orizontal, la menu-uri cu sub menu-uri si tot felul de efecte de hover, este cea mai sigura modalitate de a avansa incet incet pe drumul anevoios reprezentat de munca de web design.
