Responzivni horizontalni izbornik s čistim CSS3. Okomiti izbornik sa CSS-om Okomiti izbornik sa css ikonama
Dobar dan, dragi čitatelji. Danas ćemo pogledati temu " kako napraviti horizontalni izbornik koristeći HTML i CSS" Izbornik se u pravilu nalazi u zaglavlju web mjesta i predstavlja popis poveznica na najvažnije stranice, također se naziva glavni izbornik. Korisnici će stalno klikati na te poveznice. Način na koji ih rasporedite i kakav dizajn odredite za izbornik utjecat će na ponašanje korisnika, konverziju, njihov ukupni dojam o vašoj stranici i, naravno, .
HTML kod za horizontalni izbornik
Nekada davno glavni meni za web stranicu bio je pravljen na slikama, tablicama, flashu i možda još nečemu, ali danas postoji najpopularnija i ujedno ispravna metoda izrade menija pomoću “list” oznaka.
Primjer korištenja html oznaka za izradu izbornika u donjem kodu:
Dom
Usluge
Cijene
Kontakti
Standardni CSS stilovi za horizontalne izbornike
ul ( list-style: none; /*ukloni oznake popisa*/ margina: 0; /*ukloni padding*/ padding-left: 0; /*remove padding*/ ) a ( text-decoration: none; /*ukloni podcrtano tekst veze*/ ) li ( float:left; /*Postavite popis vodoravno za implementaciju izbornika*/ margin-right:5px; /*Dodajte uvlaku stavkama izbornika*/ )
Dobivamo gotov gornji izbornik u zaglavlju, bez ikakvih posebnih stilova ili zvona i zviždaljki, to se može nazvati okvirom vaše budućnosti prekrasan jelovnik. Ako kopirate i zalijepite ovaj html i css, izgledat će ovako.
Primjer okvira (predloška) za vaš budući jelovnik
Sve je ispalo prilično jednostavno, vi, naravno, želite lijep glavni izbornik odmah, ali bez razumijevanja osnova, jednostavno nećete moći stvoriti dobar izbornik bez grešaka u html i css.
Također postoji nekoliko drugih CSS metoda koje se koriste za pravljenje vodoravnog izbornika osim float:left; npr. display:inline-block; ili display:flex; , ali preporuča se koristiti gore opisanu metodu.
Ispunimo naš predložak jelovnika različitim stilovima i izradimo ga lijep.
Primjeri lijepog horizontalnog izbornika za web stranicu
Sada ću dati nekoliko gotovih primjera s gotovim horizontalnim dizajnom izbornika.
Sve “ljepotice” za svoju web stranicu možete kreirati sami, umjesto da tražite na Internetu. Najlakši način da to učinite je korištenje jednog od donjih primjera kao osnove.
Jednostavan plavi izbornik s odvojenim stavkama
CSS stilovi za gornji izbornik
Ispod su stilovi za ovaj izbornik. HTML ostaje isti kao u izborniku "okvir".
Ul ( list-style: none; /*ukloni oznake popisa*/ margina: 0; /*ukloni ispunu*/ padding-left: 0; /*ukloni ispunu*/ margin-top:25px; /*napravi ispunu na vrhu* / ) a ( text-decoration: none; /*uklonite podcrtavanje teksta veze*/ background:#30A8E6; /*dodajte pozadinu stavci izbornika*/ color:#fff; /*promijenite boju poveznica */ padding:10px; /*dodajte uvlaku*/ font-family: arial; /*promijenite font*/ border-radius:4px; /*dodajte zaokruživanje*/ -moz-transition: sve 0,3s 0,01s lakoća; /*napravi glatki prijelaz*/ -o-transition: svih 0,3s 0,01s lakoće; -webkit-transition: svih 0,3s 0,01s lakoće; ) a:hover ( pozadina:#1C85BB;/*dodaj efekt lebdenja*/ ) li ( float:left; /*Postavite popis vodoravno da implementirate izbornik*/ margin-right:5px; /*Dodajte uvlaku stavkama izbornika*/ )
Glavni izbornik smješten na obojenoj liniji s crvenom pozadinom
CSS stilovi izbornika na liniji u boji
ul ( list-style: none; /*ukloni oznake popisa*/ margina: 0; /*ukloni ispunu*/ padding-left: 0; /*ukloni ispunu*/ margin-top:25px; /*napravi ispunu na vrhu* / background:#FF4444; /*dodajte pozadinu cijelom izborniku (zamjenom ovog parametra promijenit ćete boju cijelog izbornika)*/ height: 50px; /*postavite visinu*/ ) a ( text-decoration : ništa; /*uklonite podcrtavanje teksta veze* / pozadinu:#FF4444; /*dodajte pozadinu stavci izbornika (zamjenom ovog parametra promijenit ćete boju svih stavki izbornika)*/ boja:#fff ; /*promijenite boju poveznica*/ padding:0px 15px; /*dodajte padding*/ font-family: arial; /*promijenite font*/ line-height:50px; /*poravnajte izbornik okomito*/ prikaz : blok; border-desno: 1px solid #F36262; /*dodajte rub desno*/ -moz-transition : svih 0,3s 0,01s lakoća; /*napravite glatki prijelaz*/ -o-transition: svih 0,3s 0,01s ease; -webkit-transition: all 0,3s 0,01s ease; ) a:hover ( background:#D43737;/ *dodajte efekt lebdenja*/ ) li ( float:left; /*Postavite popis vodoravno za implementaciju Jelovnik*/ )
Padajući izbornik u HTML+CSS-u
Za provedbu dodatni padajući (padajući) izbornik na stranici Za bilo koju stavku izbornika moramo dodati dodatni popis stavki u HTML kod za bilo koju poveznicu iz horizontalnog izbornika i promijeniti CSS stilove. U stilovima ćemo se poslužiti jednostavnim trikom - mijenjanjem prikaza padajućeg izbornika tako što ćemo lebdjeti iznad stavke koju trebamo u gornji izbornik. Na primjer, uzmimo stavku "usluge".
Primjer izrade jednostavnog padajućeg izbornika
HTML kod padajućeg izbornika
Dom
Usluge
Usluga 1
Duga služba 2
Usluga 3
Cijene
Kontakti
Padajući izbornik CSS stilovi
ul ( list-style: none; /*ukloni oznake popisa*/ margina: 0; /*ukloni ispunu*/ padding-left: 0; /*ukloni ispunu*/ margin-top:25px; /*napravi ispunu na vrhu* / background:#819A32; /*dodajte pozadinu cijelom izborniku*/ height: 50px; /*postavite visinu*/ ) a ( text-decoration: none; /*uklonite podcrtavanje teksta veze*/ pozadinu: #819A32; /*dodajte pozadinu stavci izbornika*/ color:#fff; /*promijenite boju poveznica*/ padding:0px 15px; /*dodajte uvlaku*/ font-family: arial; /*promijenite font */ line-height:50px; /*poravnaj izbornik okomito*/ display: block; border-right: 1px solid #677B27; /*dodaj rub desno*/ -moz-transition: sve 0,3 s 0,01 s ease; /*napravi glatki prijelaz*/ -o-transition: svih 0,3s 0,01s ease; -webkit-transition: svih 0,3s 0,01s ease; ) a:hover ( pozadina:#D43737;/*dodaj efekt lebdenja */ ) li ( float:left; /*Postavite popis vodoravno da implementirate izbornik* / position:relative; /*postavite položaj za pozicioniranje*/ ) /*Stilovi za skriveni padajući izbornik*/ li > ul ( pozicija: apsolutna; gore:25px; prikaz: ništa; ) /*Učini skriveni dio vidljivim*/ li:hover > ul ( display:block; width:250px; /*Postavite širinu padajućeg izbornika*/ ) li:hover > ul > li ( float:none; /*Ukloni vodoravno pozicioniranje* / )
A da biste točno razumjeli koje usluge i kategorije trebate imati, preporučujem da pročitate materijal: .
Pokušao sam vam reći što je moguće kraće o tome kako stvoriti glavni horizontalni izbornik, napraviti nekoliko predložaka, kako mu dodati jednostavne stilove i učiniti ga ljepšim, kako napraviti padajući izbornik za svoju stranicu. Radi praktičnosti, sakupio sam sve gore navedene izbornike u jednu html datoteku koju možete preuzeti u nastavku. Izgleda kao snimak zaslona:
Hvala na pažnji.
Postoji puno gotovih rješenja za izradu takvih panela pomoću jQueryja, zasebnih dodataka i modula za raznih sustava upravljanje web mjestom. Sve je ovo jako dobro, ali je li moguće implementirati bočne klizne ploče isključivo koristeći CSS? Naravno, možete! Ali budite oprezni))), imajući na umu da ne podržavaju svi preglednici moderna CSS3 svojstva jednako dobro.
Ne tako davno on je “na planini proizveo” rješenje i primjer rada. Jedan od prvih komentara bio je: “ajmo to pomaknuti u stranu...”. Zašto ne? hajmo)).
Danas ću vam reći i pokazati vam primjer kako možete koristiti "CSS magiju" za stvaranje potpuno funkcionalnog klik-to-klik izbornika. Za početak, po ustaljenoj tradiciji, pogledat ćemo živi primjer rada panela, zatim ćemo zajedno s onima kojima je to potrebno razmotriti cijeli scenarij, što, kako i zašto. Predviđajući pitanja, pripremio sam opcije za položaj izbornika, i s lijeve i s desne strane:
HTML oznaka
Započnimo analizu s prekidačem ploče, za koji koristimo standardnu zastavu ():
Postavite potvrdni okvir na vrh dokumenta, po mogućnosti odmah iza oznake
. Pišemo skriveni atribut, izravno označavajući "skriveno" stanje ovog elementa, a također dodjeljujemo jedinstveni identifikator, na primjer id="nav-toggle", za povezivanje s for atributom oznake
