Kako napraviti navigacijski meni u html-u. Trake za navigaciju koristeći CSS

Laka navigacija je važna za svaku web stranicu.

Sa CSS-om možete transformisati dosadne HTML menije u zgodne navigacione trake.

Traka za navigaciju = Lista veza

Traka za navigaciju treba standardni HTML kao osnovu.

U našim primjerima napravit ćemo navigacijsku traku iz standardne HTML liste.

Traka za navigaciju je u osnovi lista veza, tako da koristite

i
• elementi imaju savršen smisao:

  Primjer

  
  
  • Dom
  
  
  • Vijesti
  
  
  • Kontakt
  
  
  • O
  
  
  Probajte sami"

  Sada uklonimo oznake i margine i padding sa liste:

  Primjer objašnjeno:

  • tip-stil liste: nijedan; - Uklanja metke. Traka za navigaciju ne treba markere liste
  • Postavite marginu: 0; i padding: 0; da uklonite podrazumevane postavke pretraživača

  Kôd u gornjem primjeru je standardni kod koji se koristi u vertikalnim i horizontalnim navigacijskim trakama.

  Vertikalna traka za navigaciju

  Da biste napravili vertikalnu traku za navigaciju, možete stilizirati elementi unutar liste, pored koda iznad:

  Primjer objašnjeno:

  • displej: blok; - Prikazivanje veza kao blok elemenata čini cijelo područje veze moguće kliknuti (ne samo tekst) i omogućava nam da odredimo širinu (i padding, marginu, visinu, itd. ako želite)
  • širina: 60px; - Blok elementi zauzimaju punu širinu koja je po defaultu dostupna. Želimo odrediti širinu od 60 piksela

  Takođe možete podesiti širinu

  , i uklonite širinu , jer će zauzeti punu širinu dostupnu kada se prikažu kao blok elementi. Ovo će dati isti rezultat kao naš prethodni primjer:

  Primjeri vertikalne trake za navigaciju

  Napravite osnovnu vertikalnu navigacijsku traku sa sivom bojom pozadine i promijenite boju pozadine veza kada korisnik pređe mišem preko njih:

  Primjer

  ul (
  tip-stil liste: nijedan;
  margina: 0;
  padding: 0;
  širina: 200px;
  boja pozadine: #f1f1f1;
  }

  li a (
  displej: blok;
  boja: #000;
  padding: 8px 16px;
  tekst-dekoracija: nema;
  }

  /* Promijenite boju linka pri lebdenju */
  li a:hover (
  boja pozadine: #555;
  boja: bijela;
  }

  Probajte sami"

  Center Links & Add Borders

  Dodajte text-align:center u

  • ili da centrirate veze.

    Dodajte svojstvo granice u

    dodajte obrub oko navigacijske trake. Ako želite i granice unutar navigacijske trake, dodajte ivice-donu na sve
    • elementi, osim posljednjeg:

      Fiksna vertikalna navigaciona traka pune visine

      Napravite "ljepljivu" bočnu navigaciju pune visine:

      Primjer

      ul (
      tip-stil liste: nijedan;
      margina: 0;
      padding: 0;
      širina: 25%;
      boja pozadine: #f1f1f1;
      visina: 100%; /* Puna visina */
      pozicija: fiksna; /* Neka se drži, čak i na skrolovanju */
      overflow: auto; /* Omogući pomicanje ako bočna navigacija ima previše sadržaja */
      }

      Probajte sami"

      Napomena: Ovaj primjer možda neće ispravno raditi na mobilnim uređajima.

      Horizontalna traka za navigaciju

      Postoje dva načina za kreiranje horizontalne navigacijske trake. Koristeći inline ili plutajući spisak stavki.

      Inline stavke liste

      Jedan od načina da se napravi horizontalna traka za navigaciju je da navedete

    • elementi kao inline, pored "standardnog" koda iznad:

      Primjer objašnjeno:

      • display: inline; - Podrazumevano,
      • elementi su blok elementi. Ovdje uklanjamo prijelome reda prije i poslije svake stavke liste, kako bismo ih prikazali u jednom redu

      Plutajuće stavke liste

      Drugi način kreiranja horizontalne navigacijske trake je plutanje

    • elemente i odredite raspored za navigacijske veze:

      Primjer objašnjeno:

      • float: lijevo; - koristite float da naterate blok elemente da klize jedan pored drugog
      • displej: blok; - Prikazivanje veza kao blok elemenata čini cijelo područje veze moguće kliknuti (ne samo tekst) i omogućava nam da odredimo padding (i visinu, širinu, margine, itd. ako želite)
      • padding: 8px; - Budući da blok elementi zauzimaju punu dostupnu širinu, ne mogu lebdjeti jedan pored drugog. Stoga navedite neke podloge kako bi izgledale dobro
      • boja pozadine: #dddddd; - Dodajte sivu boju pozadine svakom elementu

      Savjet: Dodajte boju pozadine u

      umjesto svake element ako želite boju pozadine pune širine:

      Primjeri vodoravne trake za navigaciju

      Napravite osnovnu horizontalnu navigacijsku traku s tamnom bojom pozadine i promijenite boju pozadine veza kada korisnik pređe mišem preko njih:

      Primjer

      ul (
      tip-stil liste: nijedan;
      margina: 0;
      padding: 0;
      overflow: skriveno;
      boja pozadine: #333;
      }

      li (
      float: lijevo;
      }

      li a (
      displej: blok;
      boja: bijela;
      text-align: centar;
      padding: 14px 16px;
      tekst-dekoracija: nema;
      }

      /* Promijenite boju veze u #111 (crna) pri lebdenju */
      li a:hover (
      boja pozadine: #111;
      }

      Probajte sami"

      Aktivna/trenutna navigacijska veza

      Dodajte "aktivnu" klasu trenutnom linku da korisnik zna na kojoj se stranici nalazi:

      Linkovi desnog poravnanja

      Desno poravnajte veze pomicanjem stavki liste udesno (float:right;):

      Primjer

      
      
      • Dom
      
      
      • Vijesti
      
      
      • Kontakt
      
      
      • O
      
      

      Zadatak svakog dizajnera, web developera i, naravno, marketera je da stalno izmišlja nešto novo i jedinstveno. Razlog za to je prilično jednostavan: kompanija se mora izdvojiti iz beskrajne linije brendova koji joj se takmiče na tržištu, a jedinstven stil će pomoći u tome. Ali ponekad avanturistički dizajn može učiniti više štete nego koristi.

      I najčešće, navigacija web resursa pati od raznih vrsta eksperimenata.
      KoMarketing je objavio da otprilike polovina anketiranih koristi navigacijski meni kada istražuje novi web resurs. Istovremeno, 37% ispitanika je reklo da je nezgodna navigacija web stranice dovoljan razlog da se napusti stranica i da se više na nju ne vrati.

      Nepotrebno je reći da navigacijski sistem ima ogroman utjecaj na kvalitet korisničkog iskustva i ne možete si priuštiti da ga zabrljate.
      Na web stranici postoji mnogo mjesta na kojima možete provesti hrabre eksperimente i iznenaditi posjetitelje nečim neočekivanim i atraktivnim. Međutim, navigacija bi uvijek trebala ostati čvrsta osnova za vašu web lokaciju. Posjetioci bi trebali lako razumjeti gdje se nalazi meni i kako funkcionira kako bi se mogli brzo kretati kroz resurs i pronaći potrebne informacije.

      To ne znači da ne možete isprobati nove tehnike kao što su lijevo poravnati ili padajući meniji na cijeloj stranici, ili oni koji se pojavljuju na skrolovanju. To jednostavno znači da morate sve organizirati na način da posjetiteljima što više olakšate rad s resursom i poboljšate kvalitet interakcije s njim.

      Zapamtite: korisničko iskustvo bi trebalo biti na vrhu vaše liste prioriteta.

      Naravno, ono što radi za jednu lokaciju neće nužno raditi i za vašu – zbog čega bi split testiranje trebalo biti dio cijelog procesa. Dizajniranje navigacije izgleda jednostavno i jednostavno, posebno ako slijedite tradicionalna pravila navigacije, ali nikada ne možete biti sigurni šta će najbolje funkcionirati za vašu publiku dok ne isprobate druge postojeće opcije. Koristeći split testove, testiranje svih ovih alternativa je prilično jednostavno.

      Međutim, prije nego krenete dizajnirati vlastiti eksperiment, pogledajte što su stručnjaci već uspjeli otkriti. Njihovi rezultati mogu vam dati bolju predstavu o tome koje hipoteze prvo testirati u vlastitim testovima.

      1. Struktura menija

      Iako nema podataka o problemima upotrebljivosti s kojima su se susreli korisnici web stranice Portland Trail Blazersa, jasno je da ih je neko ohrabrio da angažuju Sq1 agenciju da procijene njihov tok konverzije i utvrdi šta je potencijalno uzrokovalo njihovu slabu prodaju.

      Marketinška agencija se fokusirala na navigacijski sistem koji očigledno nije optimiziran za korisničko iskustvo. Evo kako je izgledala 2013.

      Sam dizajn menija je bio težak za razumevanje, a struktura je mogla biti potpuno zbunjujuća. Nakon što je identifikovao svrhe u koje su posetioci koristili meni, Sq1 je odlučio da ažurira njegov dizajn i strukturu:

      1. Uklonio je prozirnu pozadinu.
      2. Stavke za navigaciju u padajućim menijima su takođe izmenjene kako bi bile logičnije i uređenije.
      3. Poboljšan je mobilni odziv menija.

      Kao rezultat split testa, postalo je jasno da je nova i poboljšana struktura menija dovela do povećanja prihoda od 62,9%. Navigacija stranice Trail Blazers je od tada doživjela nekoliko promjena, ali neprozirna pozadina i vertikalna orijentacija ostali su isti. Evo kako danas izgleda meni:

      

      2. Naslovi menija

      Kada su se dizajneri Formstack stranice suočili sa zadatkom da razviju navigacijski meni, prvo su pokušali odgovoriti na pitanja poput:

      1. Koju vrstu sadržaja treba prikazati u meniju?
      2. Kako treba biti strukturiran?
      3. Koje stranice trebaju imati prioritet u hijerarhiji?

      Stranica na kojoj su odlučili pokrenuti svoj navigacijski meni zvala se “Zašto nas koristiti”. Imali su velike nade da će naslov pokrenuti promet i konverzije i bili su iznenađeni kada su vidjeli da stopa klikanja nije ispunila njihova očekivanja.

      Ovako je ova stranica izgledala 2013. godine:

      Formstack - do

      Razočarani rezultatom, programeri su odlučili promijeniti naziv “Zašto nas koristiti” u “Kako to funkcionira”. Ovo je ime izmišljeno prije pokretanja projekta, ali je na kraju odbačeno. Kao što možete zamisliti, bili su šokirani kako je jednostavna promjena naslova rezultirala povećanjem broja pregleda stranica za 50% i povećanjem broja konverzija od 8%.

      Evo kako je stranica izgledala u martu te godine kada su promjene uvedene:

      Formstack - poslije

      3. Logika menija

      Godine 2014., ljudi odgovorni za projekat Bizztravel Wintersport počeli su primjećivati ​​koliko radnji posjetitelji moraju poduzeti kako bi pronašli destinaciju i lokaciju za odmor koja im najviše odgovara. Trebalo je u prosjeku 5 klikova da se dođe do željene regije (samo regija, a ne određeno odredište). Autori servisa su odmah shvatili da im ovaj propust prijeti mnogo većim problemima u budućnosti.

      Ubrzo je utvrđeno da je najslabija tačka sajta njegova navigacija. Nedostatak logike i jednostavnosti primorao je programere da radikalno promene ne samo sam meni, već i naslove. Ovo bi moglo olakšati proces pretraživanja posjetiteljima.

      Provedeno je Split testiranje kako bi se stvorio poboljšani i intuitivniji navigacijski sustav za stranicu. Utvrđeno je da je nova verzija dizajna generirala 21,34% više konverzija od prethodne.

      

      

      Kao što vidite, poboljšani navigacijski sistem se oslanja na jasnije oznake – kao što su zastave zemalja i drugi prepoznatljivi simboli – stvarajući intuitivniji interfejs.

      4. Skriveni meniji

      Kada se ljudi svađaju oko , pravi razgovor je o tome da li sakriti navigaciju iza ikone (kao što je meni za hamburger) ili ne. Iako su skriveni meniji zaista neophodni na stranicama koje se gledaju na mobilnim uređajima, pitanje da li se ova minimalistička rješenja za navigaciju treba koristiti na desktop resursima je i dalje otvoreno.

      Konsultantska agencija Nielsen Norman Group provela je eksperiment kako bi pokušala otkriti što se točno događa kada se koristi skriveni meni na desktop i mobilnim verzijama web stranica. Nažalost, ne postoje tačne informacije o tome koje su stranice testirane, ali suština testa je jasna sama po sebi.

      

      Ako ste odabrali ikonu koja se nalazi u sredini stranice – koja bi, logično, trebala voditi na glavnu stranicu web-mjesta – onda ste u pravu.

      Evo šta je NMG otkrio:

      Desktop verzija stranice

      1. Posjetioci su koristili skriveni meni u 27% eksperimenata.
      2. Vidljivi meni je korišten 48% vremena.
      3. Na sajtovima sa skrivenim menijima, ljudi su morali da provedu više vremena smišljajući gde da traže koje informacije; konkretno, bili su 39% sporiji od onih na sajtovima sa vidljivim menijima.

      Mobilna verzija stranice

      1. Korisnici su koristili skrivene menije u 57% eksperimenata.
      2. Kada je meni bio djelimično vidljiv (korištenje potpuno vidljivog menija nije praktično na mobilnim verzijama sajtova), korišten je u 86% slučajeva.
      3. Skriveni meniji su usporili korisnike za 15% (u poređenju sa onima koji pretražuju sajt sa vidljivim menijima).

      Osim toga, istraživači su također otkrili da je skrivene menije teže otkriti (što je sasvim očigledno). Na stranicama bez jasnih znakova na vrhu, posjetitelji su provodili više vremena tražeći informacije koje su im potrebne. Skriveni meniji otežavaju zadatak za 21% i smanjuju mogućnost izvršenja zadatka za 20%.

      Ispod je dobar primjer jednostavnog, jasnog i vidljivog menija:

      

      5. Mobilni meniji

      Kao što možete vidjeti iz gornjeg primjera, korisnici mobilnih uređaja vjerovatno su bolje upoznati sa skrivenim menijima nego korisnici desktopa. Ali kada je u pitanju otkrivanje kako da kreirate skriveni meni za svoju mobilnu stranicu, oslanjanje samo na poslovičnu ikonu hamburgera nije dovoljno. Istraživanje koje je provela agencija Sites for Profit će odgovoriti zašto.

      Prvi eksperiment imao je za cilj testiranje efikasnosti dizajna dugmeta za hamburger. Kreirane su tri verzije ikone skrivenog menija:

      1. Osnovni model, koji se sastojao od samo tri horizontalne trake.
      2. Ikona hamburgera koja se sastoji od tri horizontalne linije okružene tankom linijom.
      3. Ikona hamburgera sa natpisom “MENU” na dnu.

      Utvrđeno je da je druga opcija (tri pruge u kvadratu) pokazala najveći broj konverzija. To je objašnjeno činjenicom da ova verzija ikone više podsjeća na klasično dugme, gledajući na koje su posjetitelji odmah shvatili da mogu kliknuti na njega.

      Kofein Informer - ikona hamburgera

      Drugi eksperiment je osmišljen kako bi se testiralo da li riječ "Meni" postavljena pored ikone ima bilo kakav utjecaj na konverzije. Kreirane su četiri verzije ikone skrivenog menija:

      1. Kao osnovni dizajn izabran je pobjednički dizajn u prethodnom eksperimentu: tri pruge u kvadratu.
      2. Riječ “Meni” umjesto ikone.
      3. Ikona hamburgera i riječ “Meni” postavljeni zajedno i okruženi linijom.
      4. Riječ “Meni” okružena linijom.

      Prema dobijenim podacima, verzija 3 ikone dobila je više klikova; međutim, riječ “Meni” zatvorena u kvadrat je generirala više konverzija.

      Caffeine Informer - ikona menija

      Dakle, šta ste naučili o navigacijskom meniju nakon svih ovih eksperimenata? Očigledno, ako posjetitelji na neki način pogrešno komuniciraju s vašim resursom, onda je, najvjerovatnije, kriv neuspješan navigacijski sistem. Navigacija obično ne zahtijeva toliko vremena da se potroši na dizajniranje početne stranice web-mjesta ili čak na odabir odgovarajućeg teksta za skočni prozor, ali vrijedi zapamtiti da ovaj element korisničkog sučelja može imati ozbiljan negativan utjecaj na stope konverzije ako nije pravilno obrađen .

      Kada dizajnirate svoj navigacijski meni, imajte na umu sljedeće smjernice.

      Logo kompanije uvek treba da vodi na glavnu stranicu sajta. Prema ranije spomenutom KoMarketing izvještaju, 36% ljudi ima tendenciju da koristi logo kao sredstvo za povratak na početak.

      Uprkos brojnim menijima i traci za pretragu, REI logo je dovoljno vidljiv da niko nema sumnje gde da klikne da bi se vratio na početnu stranicu.

      

      Neka bude jednostavno. Što više stranica pokušate stati u jedan web prostor, veće su šanse da ćete jednostavno zbuniti svoje posjetitelje. Preporučujemo vam da pojednostavite izgled menija i pokušate da koristite što manje opcija menija (5 do 7).

      La Moulade navigacija je odličan primjer ovoga:

      

      Kompanija je mogla da postavi informacije o svojim uslugama na nekoliko stranica, ali je to učinila još jednostavnijim. Sajt ima samo tri stranice, a smešan efekat animacije koji se javlja prilikom skrolovanja pruža posetiocima sve potrebne informacije o kvalitetu rada sa kompanijom.

      Organizirajte svoj meni na osnovu prioriteta. Efekat serijske pozicije ukazuje da će stranice koje se nalaze bliže početku ili kraju liste automatski dominirati umovima korisnika.

      

      Kao što možete vidjeti na web stranici Comedy Centrala, emisije nisu navedene abecednim ili bilo kojim drugim logičnim redom, što bi pomoglo korisnicima da mnogo brže pronađu ono što traže. Moglo bi se pretpostaviti da je "The Daily Show" vjerovatno najpopularnija emisija - ili servis želi da privuče više pažnje na nju - i zato se nalazi na vrhu.

      Nazivi menija trebaju biti sažeti, ali u isto vrijeme sažeti. Ovo nije mjesto gdje možete dati mašti na volju.

      Meniji bi trebali biti što veći za bilo koju veličinu ekrana: tekst će biti lakši za čitanje, a dugmad lakše kliknuti.

      Adwyse web stranica prikazuje sve na najbolji mogući način: meni je dovoljno velik da se svi naslovi lako uklapaju, lako ih je čitati i kliknuti. Ovo se odnosi na navigacijski sistem na desktop verziji stranice:

      

      Isto za mobilni:

      

      Upotrijebite boju ili bilo koji drugi efekat lebdenja kako biste mogli koristiti meni da posjetiteljima naznačite u kojem se dijelu stranice trenutno nalaze. U tu svrhu servis Netflix vrlo uspješno koristi svoju brendiranu crvenu boju:

      

      Učinite navigacioni meni „lepljivim“, odnosno da ostane na ekranu čak i pri skrolovanju, tako da uvek bude vidljiv. Ovo se odnosi na bilo koji stil navigacije: mobilni ili desktop, vidljivi i skriveni, horizontalni i vertikalni.

      Web lokacija Colored Lines ima šareni navigacijski meni baziran na ikonama koji ne nestaje dok se krećete po stranici.

      

      Korisnici mobilnih i desktop računara bi želeli da imaju meni koji odgovara njihovim potrebama, tako da ponuda jednog dizajna za sve vrste posetilaca neće raditi. Intuitova web stranica je odličan primjer zašto biste to trebali učiniti.

      Opcija menija radne površine:

      

      Mobitel:

      

      Ili nemaju mobilne posjetioce, ili ih jednostavno nije briga što ljudi moraju zumirati i skrolovati da bi pronašli bilo šta na tako nereagirajućoj stranici.

      Kada počnete da razvijate meni za mobilnu verziju sajta, ne zaboravite da učinite jasnijim i vidljivijim da se na meni može kliknuti. Granice su najbolji način da to učinite. Pogledajte primjer u nastavku:

      

      Stoga ih pokušajte ne koristiti - i u mobilnoj verziji i u verziji za desktop. Ne uspijevaju svi odabrati takve slike koje će biti razumljive i lako prepoznatljive. Brit & Co je uspio:

      

      Nema ništa loše u tome da imate duboke menije na više nivoa. Ali ne biste ih trebali kombinirati sa skrivenim menijima. Koristite mega dizajn menija i krušne mrvice da olakšate dalju navigaciju.

      Stranica Verizon Wireless uspjela je izbjeći kršenje oba ova pravila. Prvo, potpuno su transparentni u pružanju informacija koje imaju o navigacijskom sistemu i odradili su fantastičan posao organiziranja njegove strukture:

      

      Drugo, razborito su implementirali krušne mrvice u sistem. Bez obzira koliko daleko posjetioci odu u svom istraživanju stranice, uvijek se mogu vratiti.

      

      Ako želite koristiti opciju kreativne navigacije prilikom ulaska na stranicu, slobodno to učinite. Postavite glavni meni na mjesto koje korisnici očekuju.

      Mnogi dizajneri eksperimentišu sa iskačućim/slajd formama jer neočekivano kretanje na ekranu mora dobro da privuče pažnju posetilaca. Ali iskačuće prozore ne treba preneti na prozore koji najavljuju hitne ponude i slično, već ih treba koristiti radi navigacije, kao što je slučaj sa Bolden menijem sajta.

      

      Zaključak

      Pridržavanje svih pravila i vlastite intuicije prilikom dizajniranja navigacijskog menija nije dovoljno da usrećite ljude. Sve što ne ispunjava njihova očekivanja od vaše stranice ili izaziva zabunu, može vas koštati konverzija. Stoga je split testiranje obavezno kada se dizajnira navigacijski sistem. I ne samo.

      Da bi bilo zgodno navigaciju po sajtu, potrebna vam je navigacija, što sam uradio koristeći HTML i CSS skripte. Kao rezultat mog rada, možete vidjeti 2 vrste menija (vertikalni i horizontalni). A sada ću pokušati govoriti o zadacima koje bi, po mom mišljenju, meni za web stranicu trebao obavljati:

      • Jednostavnost upotrebe;
      • Navigacija mora biti kreirana za sve dijelove stranice;
      • Svaka stranica sajta treba da ima link do glavne stranice;
      • Idite na bilo koju stranicu sajta sa maksimalno 3 klika.

      Ovdje ću pokušati iznijeti što više materijala o kreiranju jelovnika, pripremite se, mnogi će možda imati poteškoća, barem ja jesam. I tako da počnemo!

      Prije svega, reći ću vam kako to učiniti. Prvo pišemo skriptu u stilu:

      #navigation ( širina: 560px; visina: 50px; margina: 0; padding: 0; background-image: url(img/gor_menu.jpg); background-repeat: no-repeat; background-position:center; ) #navigation ul ( stil liste: nijedan; margina: 0; padding: 0; ) #navigation ul li ( display: inline; margin: 0px; ) #navigation ul li a (visina:28px; display: block; float: lijevo; boja: #333333 text-decoration: font-size: url(img/menu_separator.jpg); /button_hover.jpg: background-position: left top ) #navigation ul li#active a (pozadinska slika: url(img/button_hover.jpg); x ; background-position: lijevo gore;

      Ne brinite, nema ništa loše u ovom kodu. Da vam bude jasnije, odmah ću napisati HTML kod za ovaj meni:

      • Dom
      • O sajtu
      • Zašto vam je potrebna web stranica?
      • Od autora
      • Kontakti
      • Forum

      Kao što vidite, imamo posla sa listom, koja bez stilskog lista nije ništa vredno truda. Operator div poziva varijable iz eksternog CSS stilskog lista, a onda se naša lista transformiše i pretvara u horizontalni meni koji po mom mišljenju izgleda lepo.

      • Uvod
      • Kreiranje okvira stranice
      • Kreiranje menija sajta
      • Sadržaj stranice
      • Korištenje PHP blokova
      • Kreiranje baze podataka
      • Odabir hostinga
      • Izvoz stranice na hosting

      Sada moramo malo objasniti na šta se ovo odnosi, pa mislim da ćete sami shvatiti:

      ...
      — sadrži cijelu strukturu menija. U nju će biti umetnuta gornja slika koju sam unaprijed pripremio u Photoshopu;

      

      ...
      — tijelo menija, sadrži neuređenu listu. U njega će biti umetnuta slika, koja će se vertikalno ponavljati i stvoriti pozadinu. Možda sam odabrala previše svijetle boje, ali po mom mišljenju ne škode očima;

      — sadrži okvir samog menija;

      • Kreiranje menija sajta
      — ovo je jedna od pozicija na kojoj ćete morati da umetnete potrebnu vezu u href="#";
      - sadrži donji dio.
      A ovako će izgledati skripta u našem CSS stilu:
      Div#menu ( width:144px; background:url(img/menu_1.jpg) top no-repeat; padding-top:40px; ) div#menubody ( background:url(img/menu_2.jpg) repeat-y; padding- lijevo:15px;) div#menubottom (visina:16px; background:url(img/menu_4.jpg) bottom no-repeat; ) ul#menulist ( width:100px; list-style-type:none; ) ul#menulist li (visina:32px; background:url(img/menu_3.gif) bottom repeat-x; ) ul#menulist a ( width:100px; height:25px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial , sans-serif:none; a ( pozadina: url(img/menu_5.jpg) lijevo repeat-y; )
      Mislim da ne morate objašnjavati CSS kod. Ako nešto nije jasno, uvijek možete pitati.
      Oba tipa menija su spremna. Napominjemo da u njima nismo koristili JavaScript, i to je prije "plus" kada pretraživači indeksiraju našu stranicu, ali svakako ne "minus" jer pretraživači ne indeksiraju JavaScript. Iako trenutno Google pretraživač to već počinje prepoznavati.
      Vjerovatno ste već davno primijetili da na stranici postoji više od dva menija i da imaju drugačiju strukturu. Nisam uređivao članak, kao prethodni.
      Ostaje samo da se stranice naše stranice popune sadržajem i možemo sa sigurnošću reći da je pola posla obavljeno, ali o tome ću govoriti u sljedećem članku.
      Horizontalni meni je lista sekcija web stranice, pa je logičnije označiti ga unutar elementa
      , a zatim primijeniti CSS stilove na njegove elemente. Ovaj izgled menija je najčešći zbog očiglednih prednosti u njegovom pozicioniranju na web stranici.

      Kako napraviti horizontalni meni: primjeri izgleda i dizajna

      HTML oznake i osnovni stilovi za horizontalni meni

      Podrazumevano se nalaze sve stavke liste vertikalno, koji zauzima cijelu širinu elementa kontejnera, koji zauzvrat zauzima cijelu širinu svog bloka kontejnera.

      HTML oznake za horizontalnu navigaciju

      • Stavka menija
      • Stavka menija
      • Stavka menija
      ...

      Horizontalni meni koji se nalazi unutar oznake može se dodatno postaviti unutar elementa

      i/ili
      ...
      . Zahvaljujući tome, html markupu se daje semantičko značenje, a također pruža dodatnu priliku za formatiranje bloka menija.

      Postoji nekoliko načina da ih postavite horizontalno. Prvo morate resetirati zadane stilove pretraživača za elemente navigacije:

      Ul ( stil liste: nema; /*ukloni oznake liste*/ margina: 0; /*ukloni gornju i donju marginu jednaku 1em*/ padding-left: 0; /*ukloni lijevi padding jednak 40px*/ ) a ( dekoracija teksta: nema; /*ukloni podvlačenje teksta linka*/)

      Metoda 1. li (prikaz: inline;)

      Pravljenje elemenata liste malim slovima. Kao rezultat toga, oni su pozicionirani horizontalno, sa razmakom od 0,4 em dodat na desnoj strani između njih (izračunato u odnosu na veličinu fonta). Da biste je uklonili, dodajte negativnu desnu marginu za li li (margin-right: -4px;) . Zatim stiliziramo linkove kako želimo.

      Metoda 2. li (float: lijevo;)

      Pokretanje elemenata liste. Kao rezultat toga, oni su postavljeni vodoravno. Visina bloka kontejnera ul postaje nula. Da bismo riješili ovaj problem, dodamo (prelijevanje: skriveno;) u ul, proširujući ga i na taj način dozvoljavajući mu da sadrži plutajuće elemente. Za veze dodajte (prikaz: blok;) i stilizirajte ih kako želite.

      Metoda 3. li (prikaz: inline-block;)

      Izrada elemenata liste inline-block. Nalaze se vodoravno, na desnoj strani se formira jaz, kao u prvom slučaju. Za veze dodajte (prikaz: blok;) i stilizirajte ih kako želite.

      Metoda 4. ul (prikaz: flex;)

      Pretvaranje ul liste u fleksibilan kontejner pomoću . Kao rezultat toga, elementi liste su raspoređeni horizontalno. Dodamo (prikaz: blok;) za veze i stiliziramo ih po želji.

      1. Prilagodljivi meni sa efektom podvlačenja kada pređete preko linka

      • Posao
      • O
      • Blog
      • Kontakt
      @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;).menu- main li:after (sadržaj: "|"; boja: #606060; display: inline-block; vertical-align:top; ) .menu-main li:last-child:after (sadržaj: nema;) .menu-main a ( dekoracija teksta: nema; porodica fontova: "Ubuntu Condensed", sans-serif; razmak između slova: 2px; pozicija: relativna; padding-bottom: 20px; margina: 0 34px 0 30px; veličina fonta: 17px; text-transform: prikaz velikih slova: boja .2s ) .menu-main a:visited (boja: #9d999d;); ) .menu-main a:prije, .menu-main a:after (sadržaj: ""; pozicija: apsolutna; visina: 4px; gore: automatski; desno: 50%; dolje: -5px; lijevo: 50%; pozadina : #feb386 .menu-main a:hover:before, .menu-main .current:before (lijevo: 0; 0;) @media (max-width: 550px) ( .menu-main (padding-top: 0;).menu-main li (display: block; ) .menu-main li:after (content: none;) . menu-main a ( padding: 25px 0 20px;

      margina: 0 30px; ) )

      @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( pozicija: relativna; pozadina: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:pre, .top-menu:after (sadržaj: ""; prikaz: blok; visina : 1px solidno #575350: 1px solidno #575350 .top-menu:after (border-bottom: 1px solid #575350; 575350 box-shadow: 0 2px 7px #ccc margin-top: 2px .menu-main (list-style: none; padding: 0 30px; margin: 0; font-size: text-align: center; pozicija: relativna ) .menu-main:prije, .menu-main:nakon (sadržaj: "\25C8"; visina reda: 1; pozicija: apsolutna; vrh: 50%; transformacija: translateY(-50%); (dekoracija teksta: nema; prikaz: inline-block; margina: 2px 5px; padding: 6px 15px; porodica fontova: "PT Sans", sans-serif; veličina fonta: 16px; boja: #777777; obrub-dno : 1px puna prozirna tranzicija: .3s linearna; ) .menu-main .current, .menu-main a:hover ( radijus granice: 3px; pozadina: #f3ece1; boja: #313131; sjena teksta: 0 1px 0 #fff; boja granice: #c6c6c6; ) @media (max-width: 500px) ( .menu-main li (display: block;) )

      3. Prilagodljivi meni sa jakom kapicom

      • Posao
      • O
      • Blog
      • Kontakt
      @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; ) .menu-main:after ( content: "" položaj: 20px pozadina: bela 70%, rgba(255,255,0) 0 -10px; background-repeat: repeat-x ) .menu-main li (display: inline-block;) .menu-main a ( text-decoration: none; display: inline-block; padding: 10px 30px; font-family: " PT Sans Caption", sans-serif; prijelaz: .3s linearni; -main a:prije, .menu-main a:after (sadržaj: ""; pozicija: apsolutna; vrh: calc(50% - 3px); širina: 6px visina: 50% pozadina: .5s ease-in-out (levo: 5px;); :after (desno: 5px;) .menu-main a:current:prije, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after (prozirnost:. 1;) .menu-main a.current, .menu-main a:hover (boja: #F58262;) @media(max-width:680px) ( .menu-main li (display: block;) )

      4. Prilagodljivi meni na traci

      @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-meni ( margina: 0 60px; pozicija: relativna; pozadina: #5A394E; senka okvira: umetnuti 1px 0 0 rgba(255,255,255,.1), umetnuti -1px 0 0 rgba(255,255,255,.1), umetnuti 15 0 150px -150px rgba(255,255,255,.12), umetnuti -150px 0 150px -150px rgba(255,255,255,.12) .top-menu:prije, .top-menu:after: (sadržaj: ";"; -indeks: 2; širina: 3px ) .top-menu:after (dole: 0; border-top: 1px isprekidana rgba(255,255,255,.2); ) .menu-main (list-style:); nema polja: 0; menu-main:after; 8px solidno #5A394E: rotate(360deg: -1) .menu-main: -30px; : 12px solid rgba(255, 255, 255, 0) .menu- main:after (desno: -30px; border-right: 12px solid rgba(255, 255, 255, 0); ) .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; boja: bijela; prijelaz: .3s linearni; ) .menu-main a.current, .menu-main a:hover (pozadina: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:pre, .menu-main:after (sadržaj: nema;) .menu-main a (prikaz: blok;) )

      5. Responsive meni sa logom u sredini

      @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (pozicija: relativna; pozadina: rgba(34,34,34,.2); ) .menu-main (stil liste: nema; margina: 0; padding: 0; ) .menu-main:after ( sadržaj: ""; prikaz: tabela; jasno: oba; ) .left-item (float: lijevo;) .right-item (float: desno;).navbar-logo ( pozicija: apsolutna; lijevo: 50%; vrh : 50%; transformacija: translate(-50%,-50%) .menu-main a (tekst-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; razmak između slova: "Arimo", boja bez serifa: .3s linearno;) @media (max-width: 830px); main ( padding-top: 90px; text-align: center; ) .navbar-logo ( položaj: apsolutna; lijevo: 50% ; vrh: 10px; transform: translateX(-50%) ) .menu-main li ( float: none: inline-block ) .menu-main a (line-height: normal; padding: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li; displej: blok;) )

      6. Responzivni meni sa logom na lijevoj strani

      @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (pozadina: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after (sadržaj: "" ; display: table; clear: both ) .navbar-logo (display: inline-block;) .menu-main (list-style: none; margin: 0; float: right; ) .menu-main; li (prikaz: inline-block;).menu-main a (dekoracija teksta: nema; prikaz: blok; pozicija: relativna; visina linije: 61px; padding-left: 20px; veličina fonta: 18px; razmak između slova : 2px-familija: "Arimo", sans-serif color:.3s linear .menu-main (sadržaj: ""; visina: 9px; lijevo: 50% translateX(6,5px prijelaz: .3s linearno: 1;) @media (max-width: 660px) ( .menu-main (float: none; padding-top); 20px ) .top-menu (text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:before (transform: rotate(45deg) translateX() -6px);) ) @media (max-width: 600px) ( .menu-main li (display: block;) )

      Brojni zahtjevi mojih upornih čitalaca i jednostavno radoznalih korisnika uticali su na svoje. Konačno sam napravio lekciju u kojoj ćemo naučiti kako napraviti dinamički VKontakte meni s efektom pritisnutih dugmadi! Po analogiji sa običnim internet stranicama, kada je posjećena veza označena na poseban način (pritisnuto dugme, podvlačenje, itd.) - napravićemo isti dizajn na VKontakteu, koristeći kreirane stranice i grafički dizajn. Za početak ćemo napraviti grafičke predloške u Photoshopu - kreirat ćemo zaglavlje menija i dvije vrste dugmadi. Zatim ćemo kreirati nekoliko stranica VKontaktea, prema stavkama u našem meniju. I na kraju, napravit ćemo lukav trik, koji će, u stvari, stvoriti iluziju praćenja veze. Lekcija je prilično složena i pogodna je za one koji se osjećaju sigurni u funkcionalnost Vkontaktea. Sve manipulacije ću izvoditi koristeći primjer vašu VKontakte grupu, gdje se ovaj efekat ostvaruje uživo. Dakle, hajdemo na posao!

      Korak 1. Kreirajte zaglavlje menija u Photoshopu
      Kreirajte dokument u Photoshopu širine 600 piksela. Visina može biti različita, po vašem nahođenju. U zaglavlje možete postaviti bilo koju određenu fotografiju, kolaž, informativni baner i druge grafičke slike. U ovom slučaju koristio sam ovaj reklamni baner dimenzija 600x172 piksela.
      

      Korak 2. Kreirajte navigacijsku traku u Photoshopu
      Sada moramo kreirati navigacijsku traku. U ovom primjeru koristio sam samo tekst kao dugmad. Ali prema vlastitom nahođenju, možete kreirati dugmad u boji i pisati tekst na njima. Radimo ovo - kreiramo pravougaonik od 600x56 piksela u Photoshopu i u ovom slučaju ga popunimo bijelom bojom. Zatim upisujemo stavke menija na liniju - oko 5-6 stavki, ne više. Veći broj bodova će izgledati stisnuto.

      Korak 3. Kreirajte pritisnutu navigacijsku traku u Photoshopu
      Sada treba da kreiramo aktivne veze, kao da su na njih kliknute. Koristio sam uobičajeno podvlačenje, ali možete koristiti drugi tekst ili boju pozadine da označite posjećeni link.

      Korak 4. Izrežite gotove slike
      U ovoj fazi treba da isečemo slike iz koraka 2 i koraka 3. Trebalo bi da imamo dva seta od po pet dugmadi - jedno dugme bez podvlačenja, drugo dugme sa podcrtanom. Dugmad za svaku pojedinačnu stavku (sa i bez podvlačenja) moraju biti iste veličine. Slika ispod prikazuje sav naš grafički dizajn - deset dugmadi i jedno zaglavlje menija.
      

      Korak 5. Kreirajte stranicu menija VKontakte
      Sada idemo na VKontakte. Naš zadatak je da napravimo zasebnu stranicu pod nazivom „Meni“. Za to ćemo koristiti sljedeći kod
      http://vk.com/pages?oid=-XXX&p=Page_Name
      gdje ćemo umjesto XXX zamijeniti id naše grupe, a umjesto teksta “Naziv stranice” pisati Menu. Sada moramo saznati ID grupe. Kako to učiniti? Idemo na glavnu stranicu grupe i gledamo naše postove na zidu - odmah ispod bloka "Dodaj objavu" piše "Svi postovi" - kliknite na ovaj link.
      

      Korak 6. Odredite ID grupe i uredite kod
      Idemo na stranicu i vidimo URL kao što je ovaj https://vk.com/wall-78320145?own=1, gdje su brojevi 78320145 u ovom primjeru id grupe. Zamjenjujemo naše podatke u izvorni kod i dobivamo zapis ovako:
      http://vk.com/pages?oid=-78320145&p=Menu(sa vašim brojevima!). Zalijepite ovu liniju u adresnu traku pretraživača i pritisnite Enter. Tako smo kreirali novu VKontakte stranicu i ona u početku izgleda ovako.
      

      Korak 7. Kreirajte preostale VKontakte navigacijske stranice
      Na sličan način kreiramo još četiri navigacijske stranice: Cijene, Kako naručiti, Tehničke specifikacije i Pitanja. Odnosno, kopiramo odgovarajući kod još četiri puta u adresnu traku pretraživača (sa vašim ID brojevima u primjeru ispod, mojim brojevima):

      http://vk.com/pages?oid=-78320145&p=Prices

      http://vk.com/pages?oid=-78320145&p=Kako naručiti

      http://vk.com/pages?oid=-78320145&p=Tehničke specifikacije

      http://vk.com/pages?oid=-78320145&p=Questions
      Imajte na umu da je u naslovu stranice od dvije riječi (Kako naručiti) razmak između riječi zamijenjen donjom crtom How_to order. Sada imamo pet gotovih stranica za svaku stavku menija. Nismo kreirali Portfolio stranicu jer se nalazi na stranici Meni

      Korak 8. Otpremite fotografije na prvu stranicu menija
      Na kreiranoj, još uvijek praznoj stranici (pogledajte 6. korak) izborniku kliknite na vezu Uredi ili vezu Ispuni sadržajem. Nakon toga vidimo panel za uređivanje. Ovdje moramo kliknuti na ikonu kamere sa funkcijom Upload photo. Važno! Uvjerite se da ste u modu za wiki označavanje. Prebacivanje režima je regulisano ikonom na desnoj ivici stranice.
      

      Korak 9. Rezultat nakon učitavanja slika
      Učitavamo naše slike koje smo kreirali u koraku 1 i koraku 2. Nakon učitavanja, vidimo kod kao na slici ispod, a sam meni izgleda ovako. Nakon svake promjene koda, ne zaboravite kliknuti na Sačuvaj stranicu, a zatim kliknite na Pregled da vidite rezultat.
      

      Korak 10. Uređivanje koda slike
      Sada je naš zadatak da zamijenimo sva svojstva bez granica sa svojstvom nopadding. I stavite prave dimenzije na prvu sliku, pošto je VKontakte smanjio sliku na 400 piksela prilikom učitavanja. Nakon svih izmjena trebali bismo dobiti sljedeći kod i meni.
      

      Korak 11. Dodajte linkove slikama
      Sada treba da stavimo linkove za svaku sliku. Veza mora biti umetnuta nakon nopadding| umjesto razmaka ispred završnih zagrada. Za prvu sliku (zaglavlje menija iz 1. koraka) možete dati link do glavne stranice grupe ili možete koristiti svojstvo nolink (promet; nakon nopaddinga bez razmaka). Za drugu karticu unesite adresu stranice za formatiranje stranica-78320145_49821289. To jest, puni URL slike https://vk.com/page-78320145_49821289, prvi dio sa domenom se može izostaviti. Ali za veze ka vanjskim stranicama, URL veze mora biti naveden u potpunosti.
      

      Korak 12. Kopirajte kod na preostale navigacijske stranice
      U ovom prilično jednostavnom koraku kopiramo posljednji kod iz prethodnog koraka i zalijepimo ga na preostale kreirane stranice - Cijene, Kako naručiti, Uslovi poslovanja i Pitanja. Nalazimo se na stranici, kliknite Uredi ili Popuni sadržajem (u modu smo wiki označavanja), zalijepite kod i kliknite Sačuvaj. I onda takođe na sledećoj stranici. Odnosno, sada imamo pet stranica, na svakoj od kojih meni izgleda potpuno isto. Ali već se možete kretati kroz meni - kada kliknete na link, na primjer Cijene, bit ćemo premješteni na stranicu Cijene itd.

      Korak 13. Pravljenje efekta pritisnutog dugmeta
      Sada moramo da promenimo po jednu sliku na svakoj od pet stranica (dugme bez podvlačenja zameniti dugmetom sa podcrtanom). Na primjer, na prvoj stranici izbornika učitavamo novu sliku, a zatim zamjenjujemo adresu stare slike u kodu novom (podvučena crvenom bojom). Zatim idemo na stranicu s cijenama, učitavamo sliku s podvučenim cijenama i mijenjamo je u kodu u adresu nove slike. Zatim idemo na stranice Kako naručiti, Projektni zadaci i Pitanja i na isti način radimo istu operaciju.
      

      Final.
      Kao rezultat toga, dobili smo efekat navigacije kada kliknete na link menija i on postane aktivan. No, budući da je grafički dizajn na svim stranicama gotovo isti, s izuzetkom aktivnog linka, stvara se iluzija navigacije, iako je u stvari prijelaz na drugu stranicu.

      Ovako dizajniran meni nije prilagođen mobilnim uređajima. Kada se veličina ekrana smanji, slike počinju da klize jedna ispod druge. Da biste napravili responzivni dizajn, morate koristiti tabele krutih verzija. Ali ovo je druga priča i naprednija tehnika. U međuvremenu, pogledajte različite opcije za grafički dizajn menija.
      

      

      

      

      

      

      

      
      
      
      Podijelite ovaj članak:
      Povezani članci
      
      17. aprila 2015
      Dodatne funkcije Adobe Acrobat Reader DC
      
      17. aprila 2015
      Kako promijeniti ime i prezime u Odnoklassniki?
      
      17. aprila 2015
      Šta učiniti ako "polje objekta nije otkriveno"
      
      17. aprila 2015
      Kako ga koristiti u poslovanju i zašto je besplatan?
      Vrste
      • Wi-fi podešavanje
      • Windows
      • Virusi
      • Internet
      • Programi
      • Repair
      Popularni članci
      • 

        Pretraživanje cijelog teksta Počnite indeksirati pretraživanje cijelog teksta u 1c
      • 

        Kako primiti paket od Aliexpressa u pošti: korak po korak instrukcije i preporuke Da li je moguće primiti paket u pošti?
      • 

        Nema internetske veze nakon uklanjanja virusa
      • 

        Multifunkcionalni uređaj - šta je to?
      • 

        Instalacija i početna konfiguracija ArchLinuxa
      • 

        Postavljanje lokalne mreže putem rutera
      Novi članci
      • Preuzmite japanske križaljke CrossMe za android v
      • Povezivanje s App Storeom nije uspjelo - kako to popraviti
      • Foto dekoder iz arw. Otvaranje ARW datoteka. Kviz: Koja ekstenzija datoteke je tip bitmap slike
      • Idealno rješenje za snimanje glasa kod kuće bez profesionalne opreme
      • Premještanje korisničkog profila pomoću standardnih Windows alata Prenošenje korisničkog profila Windows 7 na drugi disk