Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de DenisPasca Mier 7 Dec - 23:51
» [Animate] Recent Topic IPB
Scris de DenisPasca Lun 5 Dec - 22:44
» Ipb Counter-strike Special FG
Scris de DenisPasca Sam 3 Dec - 22:52
» Special Theme Extrem Tutorials
Scris de cosminelu21 Vin 2 Dec - 23:48
Cuvinte-cheie

Statistici  chenar  tema  phpBB2  profil  Mesaje  banner  punbb  cautare  avatar  tutorial  animate  navigare  edit  Metin2  subiecte  ultimele  legenda  meniu  subforumuri  Bara  radio  html  reclama  drop  menu  

Bara de navigare

Administrator
Mesaje : 1063
Localizare : Romania
Sex : masculin
Fondator
Vezi profilul utilizatorului http://www.extrem-tutorials.com
Bara de navigare la data de Mier 10 Noi - 14:56

Bara de navigare in CSS
De cate ori ai intrat pe un site si ai te-ai gandit: "Cum a facut bara de navigare?".
Iata si raspunsul: Pornind de la un cod HTML simplu si si stilizat cu ajutorul CSS-ului.
In general pentru a crea o bara de navigare fie ea orizontala sau verticala sunt folosite listele HTML care ulterior sunt personalizate folosind CSS. Linkuri normale in interiorul tagului
  • care va fi incapsulat in tagul

      Am atasat mai jos codul html necesar:

      • [Doar moderatorii au dreptul de a vedea acest link]

      • [Doar moderatorii au dreptul de a vedea acest link]

      • [Doar moderatorii au dreptul de a vedea acest link]

      • [Doar moderatorii au dreptul de a vedea acest link]

      Vom folosi acum CSS pentru a da forma listei de mai sus, si anume list-style-type:none - pentru a inlatura "bulinele" specifice listei. Deasemenea vom inlatura marginea si pading-ul pe care browser-ul il atribuie ca valoare standard.
      u l {
      list-style-type:none;
      margin:0;
      padding:0;
      }
      Codul CSS de mai sus poate fi folosit atat pentru meniuri verticale cat si pentru bara orizontala.


      CSS - Bara verticala de meniu


      Pentru a un meniu vertical de linkuri nu trebuie decat sa reprezentam linkurile ca un block si sa stabilim latimea blocului. Sa trecem la treaba.
      a {
      display:block;
      width:100px;
      }
      ***Nota
      Desi nu este absolut obligatoriu sa stabilim latimea blocului de elemente, va recomand insa, sa nu omiteti acest detaliu. In browsere mai vechi bara de linkuri poate fi distorsionata.
      In principiu codul de mai sus este de ajuns pentru a crea un meniu vertical. In continuare aveti insa un meniu terminat si finisat decent zic eu. In privinta culorilor si a contarstelor nu trebuie decat sa va folositi imaginatia.
      ul {
      list-style-type:none;
      margin:0;
      padding:0;
      }
      a:link,a:visited
      {
      display:block;
      font-weight:bold;
      font-size:20px;
      color:#fff;
      background-color:#d2691e;
      width:200px;
      padding:8px;
      text-decoration:none;
      }
      a:hover,a:active
      {
      background-color:#daa520;
      }


      • [Doar moderatorii au dreptul de a vedea acest link]

      • [Doar moderatorii au dreptul de a vedea acest link]

      • [Doar moderatorii au dreptul de a vedea acest link]

      • [Doar moderatorii au dreptul de a vedea acest link]

      CSS - Bara verticala de meniu


      Pentru a crea o bara de meniu orizontala in css putem folosi, ori atributul inline, pentru a forta elementele listei sa fie insirate pe aceasi line, ori atributul floating pentru aforta elementele listei sa fie afisate unul langa celalalt.

      Folosind inline


      Pentru a crea o bara de meniuri orizontale cu atributul inline nu trebuie decat sa adaugam urmatoarea linie de cod CSS.
      l i { display:inline; }
      Ca si afisare standard elementele unei liste sunt afisate in bloc. Linia de cod CSS de mai sus nu face decat sa elimine enter-urile inainte si dupa acestea afisand link-urile pe aceasi linie.

      Folosind float


      Vm folosi atributul float pentru a afisa elementele listei unul langa celalalt. Vom folosi deasemenea atributul display:block; pentru a afisa linkul ca si un buton si vom stabili latimea acestuia.
      Iata csi codul CSS aferent.
      li {
      float:left;
      }
      a {
      display:block;
      width:60px;
      }
      Odata ce am reprezentat elementul in bloc este obligatoriu sa stabilim latimea acestuia. In caz contrar acesta va ocupa toata latimea disponibila.
      Codurile afisate anterior sunt suficiente pentru a crea o bara de meniuri orizontala folosind CSS In continuare aveti insa un meniu terminat si finisat. In privinta culorilor si a contarstelor nu trebuie decat sa va folositi imaginatia si sa va jucati putin.
      Am atasat aici doua modele de meniu orizontal, unul folosind inline si altul folosind float. Succes!!!
  • Vizitato
    Vizitator
    Re: Bara de navigare la data de Dum 5 Dec - 21:37

    felicitari pentru tutorial
    Membru activ
    Mesaje : 344
    Localizare : Târgu Jiu
    Sex : masculin
    0 avertismente
    Vezi profilul utilizatorului
    Re: Bara de navigare la data de Sam 14 Mai - 0:43

    Felicitari , bun tutorial si succes si la altele . :d
    Membru dedicat
    Mesaje : 827
    Localizare : in spatele tau
    Sex : masculin
    0 avertismente
    Vezi profilul utilizatorului http://frannnta-design.online-talk.net/forum
    Re: Bara de navigare la data de Mar 22 Mai - 20:24

    frumos cu ajutorul tau am creat mai multe meniuri.inspiratia venita de la tine




    [Doar moderatorii au dreptul sa vada aceasta imagine]


    Sabin ;x este online 24/24 cateodata si noaptea
    Administrator
    Mesaje : 1063
    Localizare : Romania
    Sex : masculin
    Fondator
    Vezi profilul utilizatorului http://www.extrem-tutorials.com
    Re: Bara de navigare la data de Mar 31 Dec - 12:26

    Am de corectat....

    Permisiunile acestui forum:
    Nu puteti raspunde la subiectele acestui forum