Vertikalni i vodoravni izbornik u html-u. Sjajan pregled prekrasnih višerazinskih izbornika s codepen-om

Kreirajmo jednostavan horizontalni navigacijski izbornik za web mjesto. Da bismo to učinili, koristit ćemo jednostavne tehnike koje će rezultirati ispravnim prikazom našeg izbornika u svim preglednicima.

Dakle, počnimo. Napravimo popis s imenima našeg jelovnika. Nazivi stavki neka budu: “Početna”, “Novosti”, “Proizvodi”, “Usluge”, “Partneri”, “Kontakti”. Napravite novu datoteku pod nazivom menu.html, na primjer, pomoću programa Dreamweawer ili pomoću običnog notepada. U njega, između oznaka tijela, postavljamo naš jelovnik. Ovo je uobičajeni popis ul s grafičkim oznakama s li elementima. Naravno, svaku stavku izbornika činimo poveznicom, gdje umjesto URL-a ubacujemo hash #. Koristeći Photoshop, izradite sliku veličine 3x30 px, s gradijentnom ispunom kao što je prikazano na slici ispod. Datoteku ćemo spremiti u GIF formatu. Nazovimo to bg.gif. Ova slika služit će kao pozadinska slika našeg jelovnika.

Evo sadržaja datoteke menu.html:

• Dom
• Vijesti
• Proizvodi
• Usluge
• Partneri
• Kontakti

Sada zasebno kreirajmo datoteku stila pod nazivom main.css. Njegov popis prikazan je u cijelosti u nastavku.

Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*poravnajte popis ulijevo*/ width:auto;/*postavite širinu auto na temelju tip i sadržaj popisa */ background-image: url(bg.gif); /*postavljanje pozadinske slike*/ background-repeat:repeat-x; /*ponavljanje naše slike vodoravno*/ list-style:none; /*ukloni markere popisa*/ background-color:#4778c3; /*postavi boju pozadine za sliku*/ font-size:13px; /*postavi veličinu fonta*/ font-family:Arial, Helvetica, sans-serif ; /*postavite font*/ ) ul li ( float:left; /*poravnajte elemente liste ulijevo*/ ) ul a ( display:block; /*predstavite veze izbornika kao blok elemente*/ width:100px; /* postavite veličinu bloka*/ visinu:30px; /* i visinu bloka*/ text-align:center; /*centrirani natpis*/ line-height: 2.1em; /*prored*/ text-decoration:none; /* uklonite podcrtavanje s poveznica*/ color:#fff; /*boja teksta veze - bijela*/ border-right:#fff solid 1px; /*obrub na desnoj strani bloka (bijela linija 1px)*/ ) ul a: lebdi (boja:#ccc; /*link mijenja boju kada se prijeđe pokazivačem*/ )

Mislim da ne bi trebalo biti pitanja o sadržaju datoteke main.css, savjete sam napisao dovoljno detaljno i jasno u komentarima, pa se neću ponavljati. Ne zaboravite ga povezati s našom stranicom menu.html pomoću

Rezimirati. Kao rezultat toga, dobili smo horizontalni izbornik u potpunosti za više preglednika koji izgleda isto ne samo u svim modernim preglednicima, već iu takvim rijetkostima kao što su IE 5.5 i IE 6.0. Svi elementi izbornika predstavljeni su kao blok elementi i imaju iste dimenzije od 100 px širine i 30 px visine. Kao separator za stavke izbornika koristi se dizajn blok elementa koji koristi bijeli desni rub debljine 1px. Ovo je praktički najjednostavniji način implementacije horizontalnog izbornika. Naravno, po želji ga možete modificirati, učiniti ga ljepšim i funkcionalnijim koristeći maštu, CSS svojstva i dodatne grafičke elemente. dobro i naš horizontalni izbornik izgleda otprilike ovako:

Prednosti ovog rješenja:
Lako za napraviti
Jednostavan kod
Bez tablica ili javascripta
Kompatibilnost s više preglednika: izbornik izgleda jednako u svim preglednicima
Koristi se samo jedan crtež
Minimalni kôd na stranici menu.html
Minimalni kôd za implementaciju stilova u main.css

Datoteke korištene u ovom primjeru mogu se preuzeti u arhivi

Zadatak

Napravite vodoravni izbornik čije stavke imaju proizvoljan nagib (slika 1).

Riža. 1. Prikaz izbornika s kosim stavkama

Riješenje

Transformacija svojstva stila odgovorna je za transformaciju elementa, a kao njegova vrijednost koristi se funkcija skewX koja postavlja željeni nagib. Lakše je postaviti kut nagiba u stupnjevima, na primjer, 30 stupnjeva je 30 stupnjeva od okomice. Transformacija također utječe na sve podređene elemente, pa će i tekst unutar elementa biti nagnut, što ne utječe najbolje na njegovu čitljivost i ljepotu. Stoga je važno ponovno primijeniti nagib na tekst, ali u drugom smjeru; da biste to učinili, jednostavno promijenite znak ispred vrijednosti stupnjeva.

Preglednici podržavaju svojstvo transform uglavnom svojim vlastitim prefiksima, tako da biste ga radi univerzalnosti u stilovima trebali ponoviti nekoliko puta s istom vrijednošću, dodajući -moz- za Firefox, -webkit- za Safari i Chrome, -o- za Operu i -ms - za preglednik Internet Explorer kao što je prikazano u primjeru 1.

Primjer 1: Stavka izbornika Nagib

HTML5 CSS3 IE Cr Op Sa Fx

• Joker
• Pazuzu
• Palpatine
• Doktor Doom

U ovom primjeru, vodoravni izbornik stvoren je pomoću popisa s grafičkim oznakama. Kako bi se osiguralo da je popis vodoravan, elementu li u stilovima dodaje se svojstvo prikaza s vrijednošću inline-block. Za nagib upotrijebite svojstvo transformacije s funkcijom skewX i vrijednošću -30º. Ovo se svojstvo također primjenjuje na veze unutar popisa, ali uz pozitivnu vrijednost od 30º, ovo osigurava da se slova prikazuju ispravno, a ne nakošeno.

Preglednici Chrome, Safari i Firefox koriste svojstvo transformacije na block ili inline elementima, tako da veze imaju svojstvo prikaza postavljeno na block .

U ovom vodiču ćemo kreirati horizontalni izbornik u CSS-u. Naravno, možete koristiti gotova rješenja, na primjer, unajmiti programere za CMS Made Simple. Ipak, ne tražite lake načine, zar ne? :zlostavljati:

Korak 1 - HTML označavanje

Prvo, moramo stvoriti stavke popisa s oznakom za svaku stavku u našem horizontalnom izborniku. Za stvaranje podizbornika morate dodati još jedan podređeni popis unutar nadređenog.

• Link #1
• Veza #2
• Padajući popis
  • Dokumentacija
  • Poruke
  • Registracija
• Veza #3
• Veza #4
• Veza #5

Korak 2 - Stvorite CSS stilove za vodoravni izbornik

U početku, izbornik izgleda okomito, da bismo to popravili, napisat ćemo neke stilove, urediti uvlake, obrube, boju pozadine i zaokružiti kutove. Širina i visina će biti fiksne. Poravnat ćemo elemente izbornika ulijevo koristeći float: lijevo (tako da navigacija dobije horizontalnu strukturu).

Izbornik, .menu ul, .menu li, .menu a ( margina: 0; padding: 0; obrub: ništa; obris: ništa; ) .menu ( visina: 40px; širina: 505px; pozadina: #4c4e5a; pozadina: - webkit-linearni-gradijent(gore, #5c5e6a 0%,#3c3d44 100%); pozadina: -moz-linearni-gradijent(gore, #5c5e6a 0%,#3c3d44 100%); pozadina: -o-linearni-gradijent( gore, #5c5e6a 0%,#3c3d44 100%); pozadina: -ms-linearni-gradijent(gore, #5c5e6a 0%,#3c3d44 100%); pozadina: linearni gradijent(gore, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; ) .menu li (position: relative; list-style: none; float: left; display: block ; visina: 40px; )

Napišimo neko vrijeme sljedeći stil, skrivajući padajući popis. To će olakšati uređivanje.

Korak 3 - Stil izbornika veze

Zatim ćemo napisati stilove koji dodaju neka osnovna CSS svojstva kao što su vrsta fonta, boje, ispuna itd. Zatim ćemo dodati sjenu za tekst i prijelaze boja kako bismo stvorili gladak učinak gdje se boja ne mijenja trenutno, već u određenom intervalu. Da bismo stvorili razdjelnik veza, dodajmo obrub s lijeve i desne strane, a zatim uklonimo lijevi obrub s prve veze i desni obrub s posljednje veze. Kada prijeđete pokazivačem iznad izbornika, promijenit će se samo boja.

Izbornik li a ( display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #494942; border-right: 1px solid #4f5058; font- obitelj: Helvetica, Arial, sans-serif; težina fonta: podebljano; veličina fonta: 13px; boja: #f4f4f4; sjena teksta: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : boja .3s ease-in-out; -moz-transition: boja .3s ease-in-out; -o-transition: boja .3s ease-in-out; -ms-transition: boja .3s ease-in- out; prijelaz: boja .3s ease-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: lebdite > a ( boja: #9fde63; )

Korak 4 - padajući izbornik

Prije svega, uklonimo ovu liniju koda koju smo dodali u drugom koraku.

Izbornik ul ( prikaz: ništa; )

Sada ćemo urediti stil za podizbornik. Dodajmo pozicioniranje podizbornika od 40px na vrhu i 0px lijevo od stavke izbornika i dodajmo zaobljene kutove na dnu. Postavimo neprozirnost na nulu i promijenimo je na 1 dok lebdimo kako bismo stvorili efekt blijeđenja/ispadanja. Za efekt klizanja gore/dolje moramo postaviti visinu popisa na 0px kada je padajući izbornik skriven i na 36px kada lebdimo iznad padajućeg izbornika.

Izbornik ul ( položaj: apsolutni; vrh: 40px; lijevo: 0; neprozirnost: 0; pozadina: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- radijus: 0 0 4px 4px; -webkit-transition: neprozirnost .3s lakoća .1s; -moz-transition: neprozirnost .3s lakoća .1s; -o-transition: neprozirnost .3s lakoća .1s; -ms-transition: neprozirnost . 3s ease .1s; prijelaz: neprozirnost .3s ease .1s; ) .menu li:hover > ul ( neprozirnost: 1; ) .menu ul li ( visina: 0; preljev: skriven; padding: 0; -webkit-prijelaz: visina .3s lakoća .1s; -moz-prijelaz: visina .3s lakoća .1s; -o-prijelaz: visina .3s lakoća .1s; -ms-prijelaz: visina .3s lakoća .1s; prijelaz: visina .3s lakoća . 1s; ) .menu li:hover > ul li ( visina: 36 px; preljev: vidljiv; ispuna: 0; )

Postavite širinu padajućeg izbornika na koji se može kliknuti na 100 piksela. Nakon svake poveznice dodao sam obrub da ih razdvojim. Uklonit ćemo obrub u zadnjoj vezi.

Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #464649; ) .menu ul li:last-child a ( border: none; )

Da biste dovršili horizontalni CSS izbornik, morate dodati ikonu za svaki padajući podizbornik. Da bismo to učinili, stvorit ćemo prilagođenu klasu za svaki od podizbornika i dodati pozadinsku sliku.

Izbornik a.d ( pozadina: url(docs.png) no-repeat 6px center; ) .menu a.m ( background: url(bubble.png) no-repeat 6px center; ) .menu a.s ( background: url(arrow.png) no -ponovite 6px centar; )

Zaključak

Uspješno smo izradili horizontalni padajući izbornik koristeći CSS3 stilove i bez njega, iako je i to bilo moguće. Ako imate pitanja, javite mi u komentarima.

(preuzimanja: 395)

Ako je vaša web stranica više od jedne web stranice, razmislite o dodavanju navigacijske trake (izbornika). Izbornik je dio web-mjesta osmišljen kako bi posjetiteljima pomogao u kretanju web-stranicom. Bilo koji izbornik je popis poveznica koje vode do internih stranica stranice. Najlakši način za dodavanje navigacijske trake na vašu stranicu je stvaranje izbornika pomoću CSS-a i HTML-a.

Vertikalni izbornik

Prvi korak u stvaranju okomitog izbornika je stvaranje popisa s grafičkim oznakama. Također ćemo morati moći identificirati popis, pa ćemo mu dodati id atribut s identifikatorom "navbar". Svaki element