###
  • Programi
  • Sigurnost
  • Vijesti
  • Zanimljiv
  • Savjet
  • Vijesti
  • Recenzije

    • Navigacijske trake pomoću CSS-a. Vrlo jednostavna horizontalna navigacijska traka Kako napraviti web stranicu sa CSS navigacijom

    22.07.2020 Savjet

    Počnimo s ilustracijom tipične HTML strukture. Ovdje je dijagram tipične navigacijske trake koja sadrži nekoliko veza.

    HTML kod je krajnje jednostavan: blok div i neuređeni popis unutra. Kao što možda znate, predstavljena je HTML5 specifikacija novi element(nav) koji identificira navigacijsku traku. Navigacijska oznaka zamjenjuje generičku div oznaku, ali kao što možete vidjeti u nastavku, cjelokupna struktura navigacijske trake se ne mijenja.

    Organiziranje vaše navigacijske trake pomoću neuređenog popisa (ul) uvijek je dobra praksa, posebno ako trebate organizirati složenije interakcije između glavnih poveznica i podizbornika.

    Ispred tebe HTML primjer izgled navigacijske ploče s podizbornicima.

    CSS prijedlozi

    Za sada pogledajmo tri stvari koje će poboljšati vaš CSS kod. Visina oznake li mora biti jednaka visini nesređene liste (ul).

    Za savršeno okomito poravnanje teksta, svojstvo line-height postavite na visinu oznake ul.

    Za jednostavnu navigaciju po stranici, na svim stranicama se koristi izbornik kako bi korisnik mogao razumjeti što i gdje imate. Gotovo uvijek na vrhu stranice (u zaglavlju) postoji horizontalni izbornik po sekcijama (kategorijama) stranice, a okomiti izbornik ispisan je u sitebaru (u stupcu) i služi za navigaciju kroz članke.

    Iz članka ćete shvatiti kako napraviti izbornik za html web stranicu, što ćete morati napisati za to kako biste dobili vodoravni i okomiti izbornik u css-u ili izbornik s padajućim popisom.

    Da bismo napravili jelovnik (bilo koji) koristit ćemo popis s grafičkim oznakama, kojoj ćemo izravno dodijeliti vlastitu klasu i napisati naše parametre za ovu klasu s potrebnim vrijednostima.

    Na primjer, za izradu izbornika koristimo popis s class class="menu" (bilo koji naziv klase, samo latinična slova), a html kod će izgledati ovako:

    • Dom
    • Članci
    • O meni
    • Kontakti

    U stajling za jelovnik Specificirao sam potrebna svojstva sa traženim vrijednostima:

    Obavezni CSS parametri i vrijednosti

    • margina: 0; - uklonite sve uvlake popisa, inače će preglednik zamijeniti zadane vrijednosti od 20px;
    • list-style-type: nijedan; - uklonite markere sa stavki izbornika, inače će preglednik dodati točke ili brojeve.

    Ovako se radi jelovnik html stranice, a sada prijeđimo na izradu horizontalnog izbornika i pogledajmo sve s primjerima.

    Kako napraviti horizontalni izbornik sa CSS-om

    Za prikaz horizontalnog izbornika pomoću popisa, samo trebamo dodati samo jedan parametar gornjem kodu: display: inline; tako da su stavke izbornika poredane u jednoj liniji i slijede jedna drugu vodoravno. Također ćemo dodati razmak između stavki izbornika pomoću margine.

    • Dom
    • Članci
    • O meni
    • Kontakti

    A izgledat će ovako:

    Imamo spreman horizontalni jelovnik, preostaje samo da ga uljepšamo izgled.

    Dajmo svaku stavku u horizontalnom izborniku rubni okvir i neka ima zakošene rubove, ispunite je određenom bojom pozadine (dodajte pozadinu za stavku izbornika) i promijenite izgled veze.

    • Dom
    • Članci
    • O meni
    • Kontakti

    Horizontalni izbornik bit će prikazan ovako:

    Budući da je horizontalni izbornik u većini slučajeva napisan u zaglavlju stranice, u primjeru sam dodao pozadinu izborniku, koju možete promijeniti da odgovara boji vašeg zaglavlja.

    A radi jasnoće, postavio sam stavke izbornika u središte koristeći svojstvo text-align: center;. , koji se može ukloniti (automatski poravnati ulijevo) ili postaviti na text-align: right; a horizontalni izbornik pojavit će se na desnom rubu.

    Usput, također možete koristiti, što tamo možete vidjeti vlastitim očima i preuzeti besplatno.

    Kako napraviti okomiti izbornik sa CSS-om

    Vertikalni izbornik u CSS-u se na stranici radi i dizajnira na gotovo isti način kao horizontalni, samo što se ovdje mijenja u .menu-2 li (... parametar s prikazom vrijednosti: blok; (označava element bloka), čime se dobiva vertikalni prikaz stavki izbornika.

    I još jedan dodatak okomitom izborniku: budući da se u većini slučajeva nalazi u bočnom stupcu stranice, koji ima fiksnu širinu, prisiljeni smo postaviti širina širina: 100%; naš okomiti izbornik tako da potpuno zauzima cijelu širinu stupca.

    Pogledajmo okomito CSS izbornik Na primjer:

    • Prva stavka izbornika
    • Druga stavka izbornika
    • Treća stavka izbornika
    • Četvrta stavka izbornika

    Ovako će se okomiti izbornik pojaviti na stranici:

    Budi oprezan!

    Propisao sam za okomiti izbornik umjesto bočne trake stranice, tako da ćete ga ukloniti i na kraju koda
    izbrisati isti.

    Kako napraviti padajući izbornik pomoću CSS-a

    Napravite padajući izbornik s koristeći CSS prilično jednostavno. Samo ćemo dodati nekoliko parametara postojećem kodu za vertikalni izbornik, koji će biti odgovoran za padajući popis stavki izbornika.

    Obavezno zapamtite!
    Da bi se padajući izbornik striktno pojavio nasuprot vodeće veze, potrebno je da u CSS-u za li tag gdje se nalazi ova poveznica napišete position: relative; , a za poziciju padajućeg izbornika: apsolutno;

    Idemo pisati html kod za padajući izbornik u CSS-u.

    • Prva stavka izbornika
    • Druga stavka izbornika ⇒
      • Prvi podstavak
      • Drugi podstavak
      • Treći podstavak ⇒
        • Prva poveznica
        • Druga poveznica
        • Treća poveznica
        • Četvrta poveznica
      • Četvrti podstavak
    • Treća stavka izbornika ⇒
      • Prva poveznica
      • Druga poveznica
      • Treća poveznica
      • Četvrta poveznica
    • Četvrta stavka izbornika

    Pogledajte kako će padajući izbornik koji koristi CSS izgledati na stranici.

    Padajući izbornik napisan je na potpuno isti način za horizontalne rasporede navigacije. Jedina stvar je da ne zaboravite promijeniti vrijednosti gornjeg i lijevog parametra (gornja i lijeva uvlaka).

    Izgled!
    Kako se sa samo 3 promjene u CSS-u naš okomiti navigacijski izgled s padajućim izbornikom pretvara u horizontalni navigacijski izgled s padajućim izbornikom.

    CSS promjene za padajući izbornik

    • Zamijeni u .saitbar - širina: 240px; po širini: 100%;
    • Zamijeni u .menu-4 li - prikaz: blok; na zaslonu: inline-block;
    • Zamijeni u .menu-4 ul.podmenu - vrh: 0; gore: 34px;
    • Zamijeni u .menu-4 ul.podmenu - lijevo: 214px; lijevo: 7px;
    Datum objave: 18.08.2018

    Jedan od dijelova web stranice koji je najteže prilagoditi je navigacija. Ovaj dio je vrlo važan za upotrebljivost web stranice, jer je to jedan od načina na koji se korisnici kreću sa stranice na stranicu.

    Postoji mnogo načina za stvaranje responzivne navigacije web-mjesta, a nekoliko jQuery dodataka to čak može učiniti trenutno.

    Međutim, umjesto primjene gotovo rješenje U ovom vodiču proći ćemo kroz proces izgradnje jednostavne navigacije od nule koristeći CSS3 medijske upite i ponešto kako bismo je ispravno prikazali na malom ekranu poput pametnog telefona.

    Dakle, počnimo.

    HTML

    Stilovi

    U ovom odjeljku primijenit ćemo stilove na navigaciju. Stil je ovdje čisto dekorativan, možete odabrati bilo koju boju koju želite. Ali u ovom slučaju tijelo će imati nježnu krem ​​boju.

    Tijelo (boja pozadine: #ece8e5;)

    Navigacijska oznaka koja definira navigaciju bit će 100% pune širine u prozoru preglednika, dok će ul na kojem se nalaze naše veze glavnog izbornika biti širok 600 piksela.

    Navigacija (visina: 40px; širina: 100 % ; pozadina: # 455868 ; veličina fonta: 11pt; obitelj fontova: "PT Sans", Arial, sans-serif; font-weight: bold; položaj: relativan; border-bottom : 2px solid # 283744 ; ) nav ul ( padding : 0 ; margin : 0 auto ; width : 600px ; height : 40px ; )

    Zatim ćemo primijeniti svojstvo lijevog plutanja na veze izbornika tako da budu raspoređeni vodoravno u nizu, ali primjena ovog svojstva na element uzrokovat će kolaps nadređenog elementa.

    Nav li (prikaz: inline; float: lijevo;)

    Ako ste primijetili iz gornjeg html označavanja, već smo dodali clearfix u svojstvo klase nav i ul da oslobodimo prostor kada unutar njega postavimo "plutajuće" elemente koristeći CSS clearfix hack. Dakle, dodajmo sljedeća stilska pravila u stilski list.

    Clearfix :before, .clearfix :after ( content : " " ; display : table; ) .clearfix :after ( clear : oboje ; ) .clearfix ( *zoom: 1 ; )

    Budući da imamo šest veza izbornika, a spremniku smo također dali širinu od 600 piksela, svaka veza izbornika bit će široka 100 piksela.

    Nav a (boja: #fff; prikaz: inline-block; širina: 100px; poravnanje teksta: središte; ukras teksta: ništa; visina linije: 40px; sjena teksta: 1px 1px 0px # 283744 ; }

    Veze izbornika bit će odvojene desnim rubom od 1px, osim posljednje. Sjećajući se modela okvira iz prošlog vodiča, širina veze izbornika povećat će se za 1px zbog dodavanja obruba, čineći ga 101px, tako da ćemo ovdje promijeniti model veličine okvira u border-box kako bismo zadržali izbornik širina veze na 100 px.

    Nav li a ( border-desno : 1px solid # 576979 ; box-sizing:border-box ; -moz-box-sizing:border-box ; -webkit-box-sizing:border-box ; ) nav li:zadnji-dijete a ( granica-desno: 0 ; )

    Nav a:hover , nav a:active (boja pozadine: #8c99a4 ;)

    Nav a#pull ( display : none ; )

    U ovom trenutku samo primjenjujemo stilove na navigacijski blok i ništa se neće dogoditi kada promijenimo veličinu prozora preglednika. Dakle, prijeđimo na sljedeći korak.

    Medijski upiti

    Izlaz izbornika

    U ovom trenutku, izbornik će i dalje biti skriven i bit će vidljiv samo kada je to potrebno, nakon dodirivanja ili klika na poveznicu Izbornik, a ovaj učinak možemo postići korištenjem jQuery slideToggle().

    $(function() ( var pull = $("#pull" ) ; menu = $("nav ul" ) ; menuHeight = menu.height () ; $(pull).on ("klik" , funkcija(e) ( e.preventDefault () ; menu.slideToggle () ; ) ) ;) ) ;

    Međutim, kada promijenite veličinu prozora na malom zaslonu odmah nakon što ste pregledali i sakrili izbornik, izbornik će biti skriven jer se stil display: none koji generira jQuery i dalje primjenjuje na element.

    Dakle, moramo ukloniti ovaj stil kada mijenjamo veličinu prozora ovako:

    $(window).resize (function() ( var w = $(window).width () ; if(w > 320 && menu.is (":hidden" ) ) ( menu.removeAttr ("style" ) ; ) ) ) ;

    To je to, to je sav kod koji nam treba, sada možemo pogledati navigacijski blok pomoću sljedećih veza, a preporučujemo da ga testirate alatom za responzivni dizajn kao što je Responsinator kako biste mogli vidjeti različite varijante njegovu širinu u isto vrijeme.

    Bonus: alternativna metoda

    Kao što je ranije spomenuto u vodiču, postoje i drugi načini za to, a upotreba JavaScript biblioteke SelectNav.js jedan je od najjednostavnijih načina. To je čisti JavaScript i ne ovisi o drugim bibliotekama trećih strana kao što je jQuery.

    U osnovi, ovo će duplicirati vaš popis izbornika i transformirati ga u koristit će standard korisničko sučelje samog uređaja.

    Prijevod – Dežurna soba

    Navigacija je prisutna na svakoj dobroj web stranici, čak i ako se radi o jednoj stranici. Ovisno o situaciji, veze za navigaciju mogu voditi do različitih odjeljaka web stranice ili slati do knjižne oznake (sidra) koja se nalazi na trenutnoj stranici. Kompetentno dizajniranje navigacije u kojoj se korisnik ne zbuni zahtijeva određeno znanje i iskustvo. Dizajn navigacijske trake također treba biti mudar, au ovom ćemo vam vodiču pokazati kako izraditi navigacijski izbornik jednostavan za korištenje.

    Stvaranje navigacije

    Što je navigacija? Ovo je zbirka poveznica, često poredanih i grupiranih po značenju. Navigacijski izbornik često se stvara pomoću HTML oznake popisa