Scribd Logo
Upload

Welcome to Scribd!

  • Navigare in CSS

    Uploaded by

    Patriciu Lazar
    4 views30 pages
    Navigare in css curs, tutorial

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Navigare in css curs, tutorial

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views30 pages

    Navigare in CSS

    Uploaded by

    Patriciu Lazar
    Navigare in css curs, tutorial

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 30

    Navigare in CSS

    Daca nu te limitezi la siteuri web cu o singura pagina va trebui sa creezi navigarea. Ea este una din cele mai importante componente ale web-designului si necesita o atentie sporita pentru ca vizitatorii sa poata naviga pe site cu usurinta. CSS este recunoscut pentru posibilitatea crearii unui sistem de navigare simplu si eficient. Metodele mai vechi de creare al sistemului de navigare se bazau pe multe imagini, tabele si JavaScript ceea ce afecta accesibilitatea si usurinta de folosire a siteului. Daca pe site nu se poate naviga folosind un dispozitiv/aplicatie (device) care nu suporta JavaScript, nu numai ca blochezi accesul utilizatorilor care au oprit JavaScript dar si aplicatiilor text-only precum motoare de cautare si screen readers si astfel nu vor trece niciodata de prima pagina pentru a indexa continutul siteului. CSS iti permite sa creezi un sistem de navigare atractiv care, in realitate nu este nimic altceva decat text - text care care poate fi marcat astfel incat sa fie si accesibil si inteligibil de catre toti care nu pot vedea designul fizic, dar vor totusi sa acceseze continutul. In acest capitol vom trece in revista o serie de solutii pentru a crea un sistem de navigatie bazat pe CSS. Unele se preteaza a fi implementate pe un site existent pentru a-l face sa incarce mai repede si sa impulsioneze accesibilitatea inlocuind navigarea de moda veche bazata pe imagini. Alte solutii sunt mai potrivite pentru incorporarea intr-un layout CSS pur.
    Cum creez o lista structurala ca un meniu de navigatie? Pentru site-urile noi ar fi bine sa eviti folosirea tabelurilor pentru layout sau foloseste-le numai acolo unde este absolut necesar. Eliminand elementele tabelare vei vedea ca pagina ta va contine mult mai putin markup. Un sistem de navigare este pur si simlu o lista cu locuri pe care utilizatorii le viziteaza pe site, deci o lista neordonata este modalitatea ideala de a marca navigarea ta. Sistemul de navigare din imaginea de mai jos este structurat ca o lista si formatat (styled) folosind CSS.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="listnav1.css" /> </head> <body> <div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div> </body> </html> #navigation { width: 200px; } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation li { border-bottom: 1px solid #ED9F9F; } #navigation li a:link, #navigation li a:visited { font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em;

    border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none; }
    Pentru a crea un sistem de navigare bazat pe o lista neordonata, mai intai creaza lista, plasand fiecare link de legatura/navigare inauntrul unui element <li>.

    <ul> <li><a <li><a <li><a <li><a </ul>

    href="#">Recipes</a></li> href="#">Contact Us</a></li> href="#">Articles</a></li> href="#">Buy Online</a></li>

    Apoi, incadreaza textul cu <div> si cu un ID corespunzator (element de identificare, denumire).

    <div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div>
    Aceasta marcare nu arata extraordinar daca lasam formatarea implicita a browserului.

    Primul lucru care trebuie facut este sa stilizam incadrarea care contine legaturile de navigare, in acest caz:

    #navigation: #navigation { width: 200px; }


    Am oferit lui #navigation o latime. Daca acest sistem de navigare ar face parte dintr-o pagina de layout CSS, am adauga informatii de pozitionare si la acest ID. Acum stilizam lista:

    #navigation ul { list-style: none; margin: 0; padding: 0; }


    Regula de mai sus scoate bulinele de listare si spatiul de la margine pe care browserul il aplica implicit atunci cand afiseaza o lista.

    Pasul urmator este sa stilizam elementele li din #navigation, pentru a le pune o margine inferioara:

    #navigation li { border-bottom: 1px solid #ED9F9F; }


    In final stilizam linkul in sine:

    font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515;

    border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none;
    Cea mai mare parte din munca este realizata aici, la crearea regulilor CSS pentru a aduga margini de stanga si dreapta, scoaterea sublinierii etc. Prima declarare de proprietate in aceasta regula seteaza proprietatea display pe block. Aceasta face linkul sa afiseze ca element bloc, adica zona fiecarui buton de navigare sa fie activa cand muti cursorul peste ea; acelasi efect il vezi daca folosesti o imagine pentru navigare. Pot folosi CSS si liste pentru a crea un sistem de navigare cu subnavigare? Cateodata, mai multe nivele de navigare sunt necesare dar este posibil sa creezi navigare multi-nivel folosind style lists in CSS? Metoda perfecta de a afisa subnavigarea in cadrul sistemului de navigare este sa creezi o sublista in cadrul listei. Cele doua nivele ale navigarii vor fi usor de inteles cand sunt marcate astfel chiar si in browsere care nu suporta CSS. Pentru a crea o navigare multi-nivel, creaza o lista (nested list) si formateaza culorile, marginile si proprietatile linkului (legaturii) pentru noile elemente de lista:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="listnav_sub.css" /> </head> <body> <div id="navigation"> <ul> <li><a href="#">Recipes</a> <ul> <li><a href="#">Starters</a></li> <li><a href="#">Main Courses</a></li> <li><a href="#">Desserts</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div> </body> </html> #navigation { width: 200px; } #navigation ul {

    list-style: none; margin: 0; padding: 0; } #navigation li { border-bottom: 1px solid #ED9F9F; } #navigation li a:link, #navigation li a:visited { font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; border-left: 12px solid #711515; border-right: 1px solid #711515; background-color: #B51032; color: #FFFFFF; text-decoration: none; } #navigation li a:hover { background-color: #711515; color: #FFFFFF; } #navigation ul ul { margin-left: 12px; } #navigation ul ul li { border-bottom: 1px solid #711515; margin:0; } #navigation ul ul a:link, #navigation ul ul a:visited { background-color: #ED9F9F; color: #711515; } #navigation ul ul a:hover { background-color: #711515; color: #FFFFFF; }

    Rezultatul acestori adaugari este:

    Listele nested sunt modalitatea perfecta pentru a descrie sistemul de navigare cu care lucram aici. Prima lista contine sectiunile principale ale siteului; sublista de la Recipes arata subsectiunile din cadrul categoriei Recypes. Chiar si fara nici o formatare CSS structura listei este inca inteligibila si clara.

    <ul> <li><a <ul> <li><a <li><a <li><a </ul> </li> <li><a <li><a <li><a </ul>

    href="#">Recipes</a> href="#">Starters</a></li> href="#">Main Courses</a></li> href="#">Desserts</a></li> href="#">Contact Us</a></li> href="#">Articles</a></li> href="#">Buy Online</a></li>

    Cu acest HTML si fara nici o schimbare in CSS, meniul va fi afisat ca in imaginea de mai jos, sublista fiind afisata la fel ca elementele listei principale, unde elementele li preiau proprietatile meniului principal.

    Trebuie sa adaugi o regula de stil pentru lista imbricata pentru a comunica visual ca este un submeniu si nu parte din lista principala de navigare.

    #navigation ul ul { margin-left: 12px; }


    Aceasta regula va muta putin lista mai in dreapta:

    Acum vom adauga niste formatari simple elementelor li si a din cadrul listei imbricate pentru a finaliza efectul:

    #navigation ul ul li { border-bottom: 1px solid #711515; margin: 0; } #navigation ul ul a:link, #navigation ul ul a:visited { background-color: #ED9F9F; color: #711515; } #navigation ul ul a:hover { background-color: #711515; color: #FFFFFF; }
    Cum sa creez un meniu orizontal folosind CSS si liste? Pana acum ne-am confruntat cu navigarea pe vericala acel tip de navigare care cel mai adesea se gaseste in coloana din stanga sau dreapta zonei principale de continut a paginii web. Totusi, sistemul de navigare pe site este intalnit si sub forma unui meniu orizontal in zona de sus a documentului.

    Acest tip de meniu poate fi creat folosind liste cu formatari in CSS. Elementele li trebuie setate sa afiseze pe linie, astfel incat fiecare categorie sa nu fie afisata pe o linie separata de ecran

    Aici ai HTML-ul si CSS-ul care creaza aceasta afisare:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="listnav_horiz.css" /> </head> <body> <div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div> </body> </html> #navigation { font-size: 90%; } #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; } #navigation li { display: inline; } #navigation a:link, #navigation a:visited {

    padding: 0.4em 1em 0.4em 1em; color: #FFFFFF; background-color: #B51032; text-decoration: none; border: 1px solid #711515; } #navigation a:hover { color: #FFFFFF; background-color: #711515; }
    Pentru a crea sistemul de navigare orizontal, incepem cu o lista care este identica cu cea creata pentru meniul vertical:

    <div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div>
    Formatam #navigation pentru a aplica informatii de font de baza, asa cum am facut la navigarea pe verticala. In layout-ul CSS acest ID probabil va contine si niste formatari aditionale care determina pozitia sistemului de navigare pe pagina.

    #navigation { font-size: 90%; }


    Elementul ul va indeparta bulinele de listare si spatierea aplicate listei de catre browser:

    #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; }


    Proprietatea care transforma lista din una verticala in una orizontala este aplicata elementului li:

    #navigation li { display: inline; }

    Dupa ce ai setat proprietatea inline la display, lista va arata ca in figura de mai jos:

    Tot ce a mai ramas de facut este sa formatezi legaturile pentru sistemul de navigare:

    #navigation a:link, #navigation a:visited { padding: 0.4em 1em 0.4em 1em; color: #FFFFFF; background-color: #B51032; text-decoration: none; border: 1px solid #711515; } #navigation a:hover { color: #FFFFFF; background-color: #711515; }
    Daca creezi casute in jurul fiecarei legaturi, ca in cazul nostru, retine ca pentru a lasa mai mult spatiu intre text si marginea casutei care il incadreaza trebuie sa pui valori mai mari la padding stanga si dreapta. Cum sa creez navigare-buton folosind CSS? Sistemul de navigare care pare sa fie creat din butoane pe care se apasa este o proprietate intalnita pe multe site-uri. Acest tip de navigare este adesea creat folosind imagini la care se aplica efecte pentru a face marginile sa arate beveled(tesite/indoite) si cu aspect de buton. Adesea codul JavaScript este folosit pentru a trece (swap) in alta imagine si butonul pare ca se "detasteaza" cand utilizatorul tine cursorul peste el si apasa pe imagine. Aceste efecte pot fi create folosind numai CSS. Crearea unui efect pentru buton ca cel din imaginea de mai jos este posibila prin folosirea proprietatilor marginilor din CSS.

    Iata codul de care este nevoie:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="listnav_button.css" /> </head> <body> <div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div> </body> </html> #navigation { font-size:90% } #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; } #navigation li { display: inline; } #navigation a:link, #navigation a:visited { margin-right: 0.2em; padding: 0.2em 0.6em 0.2em 0.6em; color: #A62020;

    background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } #navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; }

    Pentru a crea acest efect, vom folosi lista pe orizontala de navigare descrisa in sectiunea de mai sus. Pentru a crea imaginea de buton vom folosi margini de culori diferite in partea de sus si stanga fata de partea de jos si dreapta. Alocand muchiilor de sus si din stanga culori mai deschise decat cele pe care le alocam muchiilor de jos si din dreapta cream un efect usor beveled.

    #navigation a:link, #navigation a:visited { margin-right: 0.2em; padding: 0.2em 0.6em 0.2em 0.6em; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; }
    Incearca sa folosesti muchii mai groase si sa schimbi imaginea de fundal de pe legaturi pentru a crea un efect care sa se potriveasca designului tau. Cum creezi un sistem de navigare cu taburi in CSS? Navigarea care e infatisata cu taburi insirate in partea de sus a imaginii este un sistem foarte raspandit. Multe site-uri creaza taburi folosind imagini. Cu toate acestea aceasta abordare este ingreunata de probleme asociate cu textul continut de imagini. Este totusi posibila crearea unui efect de tab combinand imaginile de fundal si text formatat in CSS. Navigarea cu taburi din imaginea de mai jos poate fi creata formatand o lista orizontala.

    Mai jos sunt codurile HTML si CSS care creaza acest efect:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="tabs.css" /> </head> <body id="recipes"> <div id="header"> <ul id="tabnav"> <li class="recipes"><a href="#">Recipes</a></li> <li class="contact"><a href="#">Contact Us</a></li> <li class="articles"><a href="#">Articles</a></li> <li class="buy"><a href="#">Buy Online</a></li> </ul> </div> <div id="content"> <h1>Recipes</h1> <p>Lorem ipsum dolor sit amet, ... </p> </div> </body> </html> body { font: .8em/1.8em verdana, arial, sans-serif; background-color: #FFFFFF; color: #000000; margin: 0 10% 0 10%; } #header { float: left;

    width: 100%; border-bottom: 1px solid #8DA5FF; margin-bottom: 2em; } #header ul { margin: 0; padding: 2em 0 0 0; list-style: none; } #header li { float: left; background-image: url("images/tab_left.gif"); background-repeat: no-repeat; margin: 0 1px 0 0; padding: 0 0 0 8px; } #header a { float: left; display: block; background-image: url("images/tab_right.gif"); background-repeat: no-repeat; background-position: right top; padding: 0.2em 10px 0.2em 0; text-decoration: none; font-weight: bold; color: #333366; } #recipes #header li.recipes, #contact #header li.contact, #articles #header li.articles, #buy #header li.buy { background-image: url("images/tab_active_left.gif"); } #recipes #header li.recipes a, #contact #header li.contact a, #articles #header li.articles a, #buy #header li.buy a { background-image: url("images/tab_active_right.gif"); background-color: transparent; color:#FFFFFF; }

    Abordarea navigarii cu taburi de mai sus este o versiune de baza a metodei "Douglas Bowman's Sliding Doors of CSS method", care este o tehnica incercata si testata pentru a crea o interfata cu taburi. Structura data meniului de navigare de aici este acelasi tip de lista simpla neordonata cu care am lucrat pana acum, cu diferenta ca fiecarui "obiect" ii este atribuita un atribut de clasa (class) care descrie linkul pe care il contine. Am incadrat intreaga lista in elementele <div> cu un id si un header. Tehnica isi ia numele de la cele doua imagini folosite pentru a o implemanta - una se suprapune peste cealalta si imaginile se departeaza cu cat marimea textului creste. Vei avea nevoie de patru imagini pentru a crea acest efect: doua sunt pentru a crea culoarea normala a tabului, si doua le vei folosi cand tabul este selectat. Imaginile folosite sunt mult mai late decat ar fi nevoie in mod normal pentru un tab pentru a aves suficient spatiu ca tabul sa "creasca" daca browserul utilizatorului este configurat sa afiseze un text de o marime foarte mare.

    Lista de baza cu categoriile de navigare:

    <div id="header"> <ul id="tabnav"> <li class="recipes"><a href="#">Recipes</a></li> <li class="contact"><a href="#">Contact Us</a></li> <li class="articles"><a href="#">Articles</a></li> <li class="buy"><a href="#">Buy Online</a></li> </ul> </div>
    Primul pas este sa formatez zona care inconjoara sistemul de navigare. Vom da antetului o margine de jos simpla pentru a face un exercitiu dar pe un site real pot exista si alte elemente pe langa aceste taburi (precum logo sau un camp de cautare):

    #header { float: left; width: 100%; border-bottom: 1px solid #8DA5FF; margin-bottom: 2em; }
    Mai departe cream o formatare pentru elementul ul din header:

    #header ul { margin: 0; padding: 2em 0 0 0; list-style: none; }


    Aceasta regula scoate bulinele de listare si modifica marginea si spatierea listei - am adaugat 2em la padding (spatiere) in partea de sus a elementului ul. In figura de mai jos poti vedea rezultatele muncii de pana acum:

    Acum trebuie sa formatam lista cu elemente:

    #header li { float: left; background-image: url("images/tab_left.gif"); background-repeat: no-repeat; margin: 0 1px 0 0; padding: 0 0 0 8px; }
    Aceasta regula de formatare foloseste proprietatea float pentru a pozitiona lista de elemente orizontal, mentinand caracterul bloc al fiecarui element. Apoi adaugam prima imagine "sliding door" partea subtire din stanga tabului - ca imagine de fundal. O margine in dreapta de un pixel pe elementul de lista creaza un spatiu intre taburi. In figura de mai jos vezi ca imaginea din stanga tabului apare pentru fiecare tab.

    Mai departe formatam link-urile (legaturile) terminand cu infatisarea taburilor in starea deselectata. Imaginea care formeaza partea din dreapta a tabului este aplicata la fiecare link, finalizand efectul tabului:

    #header a { float: left; display: block; background-image: url("images/tab_right.gif"); background-repeat: no-repeat; background-position: right top; padding: 0.2em 10px 0.2em 0; text-decoration: none; font-weight: bold; color: #333366; }

    Rezultatul se poate vedea in imaginea de mai jos:

    Daca mariti marimea textului in browser, vei vedea ca si taburile se maresc si fac acest lucru fara sa se suprapuna si fara ca textul sa iasa inafara tabului - asta se intampla pentru ca am folosit imagini care permit spatiu suficient pentru crestere. Pentru a termina sistemul de navigare, trebuie sa marcam tabul care corespunde paginii afisate curent. Fiecarui element din lista i s-a atribuit un singur nume de clasa. Daca atribuim elementului body un ID care are o valoare egala cu valoarea fiecarei clase din lista, CSS va face restul:

    <body id="recipes">
    Chiar daca pare ca este mult cod, codul CSS care formateaza tabul in concordanta cu ID-ul body este relativ direct. Imaginile folosite sunt copii exacte ale imaginile stanga si dreapta pe care le-am aplicat la taburi, dar au alta culoare, ceea ce produce efectul unui tab marcat. Iata codul CSS:

    #recipes #header li.recipes, #contact #header li.contact, #articles #header li.articles, #buy #header li.buy { background-image: url("images/tab_active_left.gif"); } #recipes #header li.recipes a, #contact #header li.contact a, #articles #header li.articles a, #buy #header li.buy a { background-image: url("images/tab_active_right.gif"); background-color: transparent; color: #FFFFFF; }

    Cu aceste reguli de formatare instituite, specificarea unui ID recipes sectiunii body va cauza tabul Recipes sa fie marcat, contact va cauza tabul Contact Us sa fie marcat si asa mai departe. Rezultatele sunt aratate in imaginea de mai jos. Identificarea unei tehnici utile Tehnica de a adauga un ID la elementul de corp poate fi foarte utila. De exemplu, poti avea scheme de culori diferite pentru sectiuni diferite ale siteului, pentru a ajuta utilizatorul sa identifice sectiunile pe care le foloseste. Poti pur si simplu sa adaugi numele sectiunii la elementul din body.

    Cum creez roll-overuri in CSS fara sa folosesc JavaScript? Navigarea bazata pe CSS poate sa furnizeze niste efecte foarte interesante dar exista inca unele efecte care necesita folosirea de imagini. Este posibil sa te bucuri de avantajele navigarii pe baza de text si sa si folosesc imagini? Este posibil sa combini imagini iar CSS creaza rollover-uri fara JavaScript. Iata codul:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="images.css" /> </head> <body> <ul id="nav"> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li>

    <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </body> </html> ul#nav { list-style-type: none; padding: 0; margin: 0; } #nav a:link, #nav a:visited { display: block; width: 150px; padding: 10px 0 16px 32px; font: bold 80% Arial, Helvetica, sans-serif; color: #FF9900; background: url("peppers.gif") top left no-repeat; text-decoration: none; } #nav a:hover { background-position: 0 -69px; color: #B51032; } #nav a:active { background-position: 0 -138px; color: #006E01; }

    Rezultatele se vad in imaginea de mai jos.

    Aceasta solutie ofera o modalitate de a folosi imagini in navigare fara sa recurgi incarcarea multor fisiere separate. Navigarea are trei stari, dar ele nu sunt evidentiate folosind trei imagini diferit. Folosim o singura imagine mare care contine imagini pentru toate cele trei stari ca in imaginea de mai jos.

    Navigarea este marcata ca o lista simpla:

    <ul id="nav"> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul>
    Controlam afisarea imaginii de fundal din blocul de declarari pentru lagaturile de navigare. Pentru ca imaginea este mult mai mare decat aria ceruta de element vom vedea numai ardeiul galben la inceput.

    #nav a:link, #nav a:visited { display: block; width: 150px; padding: 10px 0 16px 32px; font: bold 80% Arial, Helvetica, sans-serif; color: #FF9900; background: url("peppers.gif") top left no-repeat; text-decoration: none; }
    Cand starea hover este activata, imaginea de fundal se muta in sus cu exact numarul de pixeli necesari pentru a arata ardeiul rosu. In acest exemplu, am mutat imaginea cu 69 pixeli, dar aceasta valoare va varia in functie de imaginea folosita. Poti determina numarul de pixeli matematic sau prin incercari repetate.

    #nav a:hover { background-position: 0 -69px; color: #B51032; }

    Efectul poate sa aiba de suferit daca utilizatorul modifica marimea textului in browser catre un font mai mare, ceea ce permite marginilor imaginilor ascunse sa apara. Poti anticipa aceasta eventualitate intr-o oarecare masura lasand un spatiu mare intre fiecare din cele trei imagini. Image Flickering in Internet Explorer Aceasta tehnica genereaza cateodata sistemul de navigare sa tremure in Internet Explorer. In teste, aceasta tinde sa fie o problema cand imaginea este mai mare decat cele folosite aici; totusi daca elementele de navigare tremura exista un remediu bine documentat. Cum creez meniuri drop-down CSS? In sectiunea precedenta ai invatat sa creezi rolloveruri fara imagini si JavaScipt. Se poate obtine acelasi lucru si pentru meniuri drop-down? Raspunsul este da... dar meniurile care rezulta nu vor functiona in Internet Explorar 6! Cu toate acestea in imaginea de mai jos este ilustrata aceasta tehnica care va deveni mai folositoare odata ce Internet Explorer 7 isi va mari cota de piata.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>CSS Flyout menus</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="menus.css" /> </head> <body> <ul id="nav"> <li><a href="#">Starters</a> <ul> <li><a href="">Fish</a></li> <li><a href="">Fruit</a></li> <li><a href="">Soups</a></li> </ul> </li> <li><a href="#">Main courses</a> <ul> <li><a href="">Meat</a></li>

    <li><a href="">Fish</a></li> <li><a href="">Vegetarian</a></li> </ul> </li> <li><a href="#">Desserts</a> <ul> <li><a href="">Fruit</a></li> <li><a href="">Puddings</a></li> <li><a href="">Ice Creams</a></li> </ul> </li> </ul> </body> </html>

    Aici sunt regulile de formatare care implementeaza acest efect:

    font: 1em Verdana, Arial, sans-serif; background-color: #FFFFFF; color: #000000; margin: 1em 0 0 1em; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav li { float: left; position: relative; width: 10em; border: 1px solid #B0C4DE; background-color: #E7EDF5; color: #2D486C; font-size: 80%; margin-right: 1em; } #nav a:link, #nav a:visited { display: block; text-decoration: none; padding-left: 1em; color: #2D486C; } * html #nav a { width: 100%; } #nav ul { display: none; position: absolute; padding: 0; } #nav ul li { border: 0 none transparent; border-bottom: 1px solid #E7EDF5; border-top: .5em solid #FFF;

    background-color: #F1F5F9; font-size: 100%; margin-bottom: -1px; margin-top: 1px; padding: 0; } #nav li:hover ul { display: block; }
    Desi acest efect atractiv si usor nu functioneaza in Internet Explorer 6, este recunoscut de alte browsere mai noi. Aceasta solutie permite crearea unui meniu drop-down fara folosirea JavaScript. Tehnica se bazeaza pe Solutia Suckerfish Dropdowns detaliata pe A List Apart:
    http://www.alistapart.com/articles/dropdowns/

    Meniurile in sine sunt bazate pe liste simple neordonate. Nivelul superior al elementelor meniului consta intr-o lista principala; aceste elemente care "cad" sub fiecare element principal sunt continute in liste imbricate:

    <ul id="nav"> <li><a href="#">Starters</a> <ul> <li><a href="">Fish</a></li> <li><a href="">Fruit</a></li> <li><a href="">Soups</a></li> </ul> </li> </ul>
    Dupa cum poti vedea in imaginea de mai jos, cand nu se aplica formatari meniului pagina este afisata dupa structura logica, neordonata cu subsectiuni usor de identificat.

    Pentru inceput, formatam nivelul de sus al meniului, scotand formatarea de lista. Mutam elementele de lista la stanga astfel incat sa fie stivuite pe orizontala. Elementelor de lista li se da la position valoare relative astfel incat putem pozitiona meniurile fly-out mai tarziu:

    #nav, #nav ul { list-style: none; } #nav li { float: left; position: relative; width: 10em; margin-right: 1em; }

    Vom face legaturile din meniu sa fie afisate ca niste blocuri, astfel incat sa umple zonele dreptunghiulare definite de elementele din meniu. Internet Explorer 6 (si mai vechi) nu recunoaste acest lucru; totusi setand latimea fiecarui link la 100% asigura ca reginunea pe care se face click se extinde pentru a umple blocul de continut.

    #nav a:link, #nav a:visited { display: block; } * html #nav a { width: 100%; }
    Mai departe, trebuie sa formatezi listele imbricate care constituie meniurile fly-out astfel incat, implicit, sa nu fie afisate (display:none). Totusi specificam ca pozitionarea absoluta trebuie folosita cand sunt afisate, astfel incat sa nu afecteze restul documentului.

    #nav ul { display: none; position: absolute; }


    In final folosesti pseudo-clasa :hover pentru a afisa meniul fly-out in cadrul oricarui element principal cand cursorul ajunge pe suprafata sa:

    #nav li:hover ul { display: block; }

    Cu aceste reguli de formatare CSS stabilite, meniurile se vad ca in imaginea urmatoare.

    Initial codul seteaza listele imbricate pe display:none. Cand utilizatorul trece cu mouseul peste elementul principal de meniu, proprietatea listei imbricate din acel element de lista este setata pe display:block, si meniul apare. Totusi, aceasta abordare nu functioneaza in Internet Explorer, pentru ca in acel browser pseudo-clasa :hover functioneaza numai la linkuri - si pe nici un alt element. Restul din CSS aplica pur si simplu formatari vizuale pentru a face meniurile sa arate bine. Falling Between the Cracks Cand meniul fly-out se deschide, utilizatorul trebuie sa mute cursorul in jos catre elementele meniului fly-out pentru a selecta unul. Daca in aceasta miscare cursorul se muta in afara elementului de lista care a deschis meniul fly-out, meniul se va inchide imediat, pentru ca nu va mai fi activa pseudo-clasa :hover. Daca ne uitam la regulile de formatare pentru aceasta pagina, vei vedea ca folosim pozitionarea absoluta pentru a afisa lista imbricata peste continutul paginii fara a-l deranja. Teoretic, ar trebui sa poti sa lasi un spatiu mic intre nivelul superior al meniului si meniul fly-out adaugand o margine in partea superioara a listei; totusi in Internet Explorer 7, meniul fly-out va disparea daca cursorul trece de zona marginilor, facand meniul inutilizabil. De aceea am creat efectul aplicand o margine alba in partea superioara a meniului. Am adaugat si o margine foarte mica in partea de sus a fiecarui element de lista si o margine negativa de aceeasi valoare in partea de jos. Acest lucru are ca efect mutarea meniului in jos cu un pixel suficient pentru ne asigura ca marginea alba nu acopera partea de jos a elementului din meniul principal.

    #nav ul li { border: 0 none transparent; border-bottom: 1px solid #E7EDF5; border-top: .5em solid #FFF; background-color: #F1F5F9;

    font-size: 100%; margin-bottom: -1px; margin-top: 1px; padding: 0; }


    Accesibilitatea presupune: Cand folosesti un meniu drop-down - cu sau fara JavaScript - asigura-te ca utilizatorii care nu vad intregul efect al meniurilor vor fi capabili sa navigheze pe site. In cazul acestui exemplu, utilizatorii care nu au suport CSS vor vedea listele imbricate extinse si vor si capabili sa navigheze pe site. Oricine care foloseste un browser are nu suporta afisarea submeniurilor, ca Internet Explorer 6, va putea totusi naviga atat timp cat paginile de care sunt legate elementele meniului principal contin linkuri catre toate paginile din submeniul sectiunii. In aceasta sectiune s-a discutat despre o gama de metode prin care se poate crea un sistem de navigare folosind structurally sound markup,(o marcare structurala logica) si s-au furnizat exemple care pot fi folosite ca puncte de plecare pentru propriile tale experimente. In cazul site-urilor existente unde nu este posibila o remodelare completa, un sistem de navigare bazat pe CSS poate fi o metoda foarte buna de imbunatatire a accesibilitatii site-ului si a vitezei de incarcare fara sa afecteze infatisarea intr-un mod prea evident.

    You might also like