Valikon luominen html:llä ja css:llä. Käyttöliittymän kehittäjän opas: vaakasuuntaisten navigointipaneelien tyypit. Vaakasuora valikko keskellä

Esipuhe: Työskennellessään taittosuunnittelijana nöyrä palvelijasi huomasi, että ruokalistoja on monenlaisia; Samanaikaisesti sinun tulee käyttää omia tekniikoitasi kunkin asettelussa.
Yksityiskohdat ovat leikkauksen alla.

Tämä artikkeli on suunnattu enemmän aloitteleville taittosuunnittelijoille, mutta ehkä myös kokeneet ammattilaiset löytävät siitä jotain uutta tai viittaavat siihen hakuteoksena.
Aihe on rakennettu seuraavasti: ensin asetetaan tehtävä - kuvataan tarvittavan navigointilohkon tyyppi, sitten tarkastellaan tekniikoita, joiden avulla voit luoda juuri tällaisen navigoinnin.
Oletetaan, että tyylit kirjoitetaan semanttisesti oikean valikkorakenteen alle, joka näyttää suunnilleen tältä:

Koti
Tee tilaus
Palaute

Kun suunnittelet muulle doctypelle kuin html5:lle, jätä nav-elementti pois tai korvaa se vastaavalla div-elementillä.

No, aloitetaan!...

Valikkokohdat sijaitsevat oikealla/vasemmalla puolella

Tässä osiossa käsitellään navigointilohkoja, joissa elementit sijoitetaan oikealle/vasemmalle puolelle. Tällaisten lohkojen asettamiseen tilanteesta riippuen voit käyttää useita menetelmiä:

näyttö: inline;
kellua: vasen/oikea;
näyttö: inline-block.

Näyttö: inline

Milloin käyttää
Tätä menetelmää on suositeltavaa käyttää asetettaessa yksinkertainen valikko, jossa elementit esitetään yksittäisten sanojen muodossa, ilman täyttöä ja erotetaan vain välilyönneillä:

Kuinka tehdä se
li-elementtien CSS:ssä on asetettava display: inline -ominaisuus. Muuten, tämä poistaa myös merkit, jotka ovat tarpeettomia useimmissa tämän tyyppisissä valikoissa, koska ne sijaitsevat lisälohkoissa, jotka sisältyvät elementteihin, joissa on display: list-item, mutta puuttuvat inline-elementeistä.
Aseta ul:lle tekstin tasausominaisuus oikealle tai vasemmalle.

Huomautuksia

Tätä vaihtoehtoa käytettäessä on syytä muistaa, että upotettujen elementtien kohdalla pystyreunuksia ei oteta huomioon, mutta vaakasuuntaiset toimivat;
Jos tarvitset pikselin täydellisen asettelun, on mahdollista kohdata ongelma: eri selaimissa elementtien välisen tilan leveys on erilainen. Ongelman ratkaisemiseksi elementtien välinen etäisyys asetetaan marginaaleilla ja välilyönnit poistetaan;
Jos teet alleviivauksen valikkoelementissä linkkien alareunaan, nykyaikaisissa selaimissa saat kauniin animoidun valikon on:hover (JSFiddle).

Float: vasen/oikea

Milloin käyttää
Kun haluat tehdä valikon elementeistä, joissa on pehmuste" ja/tai kiinteä korkeus/leveys:

Kuinka tehdä se
Aseta float: left tai float:right li-elementeille. Jos haluat poistaa merkkejä, sinun on lisättävä näyttö: block tai list-style: none.

Huomautuksia

On tarpeen "tyhjentää" ul antamalla sille class.clearfix tai sijoittamalla elementti clear: molemmat sen loppuun, muuten ul:n korkeus on nolla; Voit lukea muista tavoista "puhdistaa" kellukkeita;
Esimerkki mielenkiintoisesta valikosta, jossa on kellukkeet: html5guy.

Näyttö: inline-block

Milloin käyttää
Tehtävät ovat samat kuin floatilla koodattaessa. Ja kyllä, kun tällaista ongelmaa ratkaistaan, inline-block putosi epätasaisessa taistelussa. Ensinnäkin tämän ratkaisun selainyhteensopivuus on alhaisempi kuin floatin, ja toiseksi rivilohkojen sekä rivielementtien väliin tulee usein tarpeettomia välilyöntejä. Nämä ongelmat voidaan ratkaista, mutta miksi luoda niitä?

Kuinka tehdä se
Aseta näyttö: inline-block li-elementeiksi. No, IE7:lle (jos tuet sitä) kirjoitamme *display:inline; *zoom: 1.

Navigointilohkot ovat symmetrisiä vasempaan ja oikeaan reunaan nähden

Tässä osiossa käsitellään symmetrisesti sijaitsevia navigointilohkoja. Tällaisia valikoita on useita; jokaisella niistä on oma asettelumenetelmänsä:

valikkokohdat on keskitetty;
valikon kohdat jakautuvat tasaisesti koko leveydelle, elementtien välillä on rako;
Valikkokohteet jakautuvat tasaisesti koko leveydelle, elementit täyttävät koko ul:n leveyden.

Valikkokohdat on kohdistettu keskelle

Milloin käyttää
Valikko sijaitsee keskellä:

Kuinka tehdä se
Valikkokohteiden tyypistä riippuen asetamme li-elementeille näyttö: inline tai display: inline-block (jos valikkokohdissa on täyte ja leveys ja/tai korkeus on määritetty). tekstin tasaus: keskellä.

Huomautuksia
Sallikaa minun toistaa: joskus on tarpeen poistaa välilyönnit sisäisten ja inline-lohkoelementtien välillä; Tämän ongelman ratkaisemiseksi löytyy useita tapoja.

Valikkokohdat on jaettu tasaisesti koko leveydelle, ja kohteiden välissä on tilaa

Milloin käyttää
Valikkokohdat on jaettu tasaisesti koko leveydelle, ja yksittäisten kohtien välillä on rakoja:

Kuinka tehdä se
Valikkokohteiden tyypistä riippuen aseta näyttö: inline tai display: inline-block li-elementeiksi. Aseta ylätaso (ul) tekstin tasaukseen: tasaa. Mutta perustelu ei toimi heti - sinun on täytettävä ensimmäinen rivi (jos et ole selvää, miksi näin on, käynnistä Word ja yritä venyttää useita sanoja täyteen leveyteen tasauksen avulla). Siksi ul-elementin loppuun lisäämme lisäelementin näytöllä: inline-block ja leveys: 100%, tai mikä vielä parempi, pseudoelementti::after, jolla on samat ominaisuudet.

Huomautuksia
Muistatko, että aiemmissa valikkotyypeissä poistimme välilyönnit elementtien väliltä, kun näyttöominaisuuden asetus oli inline ja inline-block? Joten tässä tapauksessa et voi tehdä tätä - selain tarvitsee välilyöntejä valikkokohtien välillä. Muuten, jos poistat välilyönnit joidenkin elementtien väliltä, voit ryhmitellä painikkeet (JSFiddle):

Valikon kohdat jakautuvat tasaisesti koko leveydelle, elementit täyttävät koko ul:n leveyden.

Milloin käyttää
Valikkokohtien välillä ei ole aukkoja, mikä tahansa määrä valikon kohtia vie koko leveyden:

Kuinka tehdä se
Kun tätä ongelmaa ratkaistaan, on houkutus muodostaa valikko taulukoilla; mutta emme aio rikkoa asiakirjan semantiikkaa, emmehän? Siksi käytämme näyttöä: table-cell for li ja display: table for ul; aseta sitten ul
Jos tarvitsemme tukea vanhemmille selaimille, käytämme polyfill-skriptiä, joka korvaa tällaiset lohkot IE6:n ja IE7:n taulukoilla tai organisoi varatoimituksia muilla tavoilla.

Huomautuksia
Kun asettelet valikkoa tällä tavalla, sinun on muistettava, että et voi sijoittaa elementtejä sijaintiin: absoluuttinen suhteessa taulukkosoluun.

Miksi?

Tosiasia on, että w3c-spesifikaatio ei määrittele sijaintia: suhteellinen toiminta taulukkosolussa, joten jokaisella selaimella voi olla omat ominaisuutensa.
Katso tätä esimerkkiä eri selaimissa (tarkastelemme erityisesti Mozilla Firefoxin toimintaa!).

Tämän ongelman ratkaisemiseksi sinun on asetettava soluun div, jonka suhteen se sijoitetaan.

Bottom line

Artikkelissa luetellaan valikoiden päätyypit ja niiden asettelun ominaisuudet. Toivon, että tämä materiaali on sinulle hyödyllinen, kiitos huomiosta.

Hyvää päivää, rakkaat lukijat. Tänään tarkastelemme aihetta " kuinka tehdä vaakasuora valikko HTML:n ja CSS:n avulla" Valikko sijaitsee pääsääntöisesti sivuston otsikossa ja on luettelo tärkeimmille sivuille johtavista linkeistä, sitä kutsutaan myös päävalikko. Käyttäjät napsauttavat jatkuvasti näitä linkkejä. Niiden järjestäminen ja valikon ulkoasu vaikuttavat käyttäjien käyttäytymiseen, tulokseen, heidän kokonaisvaikutelmaansa sivustostasi ja tietysti .

HTML-koodi vaakavalikoille

Aikoinaan sivuston päävalikko tehtiin kuvista, taulukoista, salamasta ja ehkä jostain muustakin, mutta nykyään on suosituin ja myös oikea tapa luoda valikko "lista"-tageilla.

Tunnisteita käytetään valikoiden luomiseen
,
Ja .

Esimerkki html-tunnisteiden käyttämisestä valikon luomiseen alla olevassa koodissa:

Koti
Palvelut
hinnat
Yhteystiedot

Vakio-CSS-tyylit vaakasuuntaisille valikoille

ul ( listatyyli: ei mitään; /*poista luettelomerkit*/ marginaali: 0; /*poista täyte*/ täyttö-vasen: 0; /*poista täyte*/ ) a ( tekstin koristelu: ei mitään; /*poista alleviivaus linkkiteksti*/ ) li ( float:left; /*Aseta luettelo vaakasuoraan valikon käyttöönottamiseksi*/ margin-right:5px; /*Lisää valikkokohtiin sisennys*/ )

Saamme otsikkoon valmiin ylävalikon ilman erityisiä tyylejä tai kelloja ja pillejä, tätä voidaan kutsua tulevan kauniin menusi kehykseksi. Jos kopioit ja liität tämän html- ja css-tiedoston, se näyttää tältä.

Esimerkki kehyksestä (mallista) tulevaa valikkoa varten

Kaikki osoittautui melko yksinkertaiseksi, tietysti haluat heti kauniin päävalikon, mutta ymmärtämättä perusasiat et yksinkertaisesti pysty luomaan hyvää valikkoa ilman virheitä html- ja css-tiedostoissa.

Valikon vaakasuoraan tekemiseen käytetään myös useita muita CSS-menetelmiä float:left; esim. näyttö:inline-block; tai display:flex; , mutta on suositeltavaa käyttää yllä kuvattua menetelmää.

Täytetään valikkomallimme eri tyyleillä ja tehdään se kaunis.

Esimerkkejä kauniista vaakasuuntaisesta valikosta verkkosivustolle

Nyt annan useita valmiita esimerkkejä valmiilla vaakasuuntaisella valikkosuunnittelulla.

Voit luoda kaikki ”kauneuteen” verkkosivustollesi itse sen sijaan, että etsit Internetistä. Helpoin tapa tehdä tämä on käyttää jotakin alla olevista esimerkeistä perustana.

Yksinkertainen sininen valikko erillisillä kohteilla

CSS-tyylit ylävalikossa

Alla on tämän valikon tyylit. HTML pysyy samana kuin valikossa "kehys".

Ul ( listatyyli: ei mitään; /*poista luettelomerkit*/ marginaali: 0; /*poista täyte*/ täyttö-vasen: 0; /*poista täyte*/ margin-top: 25px; /*tee täyttö yläreunaan* / ) a ( text-decoration: ei mitään; /*poista linkkitekstin alleviivaus*/ tausta:#30A8E6; /*lisää taustan valikkokohtaan*/ color:#fff; /*muuta linkkien väriä */ täyte: 10px /*lisää sisennys*/ font-family: arial /*muuta fonttia*/ border-radius:4px /*lisää pyöristys*/ -moz-transition: kaikki 0.3s 0.01s helppous; /*teke sujuva siirtyminen*/ -o-transition : kaikki 0,3 s 0,01 s helppous ) a:hover ( tausta:#1C85BB;/*lisää hover-tehoste*/; ) li ( float:left; /*Aseta luettelo vaakasuoraan valikon toteuttamiseksi*/ margin-right:5px; /*Lisää valikkokohtiin sisennys*/ )

Päävalikko sijaitsee värillisellä viivalla punaisella taustalla

CSS-valikon tyylit väriviivalla

ul ( listatyyli: ei mitään; /*poista luettelomerkit*/ marginaali: 0; /*poista täyte*/ täyttö-vasen: 0; /*poista täyte*/ margin-top: 25px; /*tee täyttö yläreunaan* / background:#FF4444 /*lisää taustan koko valikkoon (korvaamalla tämän parametrin muutat koko valikon väriä)*/ korkeus: 50px /*asettaa korkeuden*/ ) a ( teksti-koriste; : ei mitään /*poista linkin tekstin alleviivaus* / background:#FF4444 /*lisää taustan valikkokohtaan (korvaamalla tämän parametrin muutat kaikkien valikon kohteiden väriä)*/ color:#fff; /*muuta linkkien väriä*/ padding:0px 15px /*lisää täyte*/ font-family: arial /*muuta fonttia*/ line-height:50px*/ näyttö: lohko-oikea: 1px kiinteä #F36262 /*lisää reunus oikealle*/ -moz-transition : kaikki 0.3s 0.01s helpottaa /*tekee sujuvasti 0.3s 0.01; s helppous; -webkit-siirtyminen: kaikki 0,3 s 0,01 s helppo / )

HTML+CSS:n avattava valikko

Toteutusta varten ylimääräinen avattava (pudotusvalikko) -valikko sivustolla Jokaisen valikkokohdan kohdalla meidän on lisättävä ylimääräinen luettelo kohteista minkä tahansa vaakavalikon linkin HTML-koodiin ja muutettava CSS-tyylejä. Tyyleissä käytämme yksinkertaista temppua - pudotusvalikon näyttöä muutetaan viemällä hiiren osoitin haluamasi kohteen kohdalle ylävalikosta. Otetaan esimerkiksi "palvelut" -kohta.

Esimerkki yksinkertaisen pudotusvalikon luomisesta

Pudotusvalikon HTML-koodi

Koti
Palvelut
- Palvelu 1
- Pitkä palvelu 2
- Palvelu 3
hinnat
Yhteystiedot

Pudotusvalikko CSS-tyylit

ul ( listatyyli: ei mitään; /*poista luettelomerkit*/ marginaali: 0; /*poista täyte*/ täyttö-vasen: 0; /*poista täyte*/ margin-top: 25px; /*tee täyttö yläreunaan* / tausta:#819A32 /*lisää taustan koko valikkoon*/ korkeus: 50px /*asettaa korkeuden*/ ) a ( tekstin koristelu: ei mitään; /*poista linkkitekstin alleviivaus*/ tausta: #819A32 /*lisää taustan valikkokohtaan*/ color:#fff /*muuta linkkien väriä*/ täyttö: 0px 15px: /*muuta fonttia; */ rivin korkeus: 50px*/ näyttö: 1px solid #677B27 /*lisää reunus oikealle*/ -moz-transition: kaikki 0.3s 0.01s; sujuva siirtyminen*/ -o-siirtymä: kaikki 0,3 s 0,01 s helppous -webkit-siirtymä: kaikki 0,3 s 0,01 s helppo :left /*Aseta luettelo vaakasuoraan toteuttaaksesi valikon* / position:relative /*asettaa sijainnin*/ ) /*Piilotetun pudotusvalikon tyylit*/ li > ul ( position:absolute; yläosa: 25px; näyttö: ei mitään; ) /*Tee piilotettu osa näkyväksi*/ li:hover > ul ( display:block; width:250px; /*Aseta avattavan valikon leveys*/ ) li:hover > ul > li ( float:none; /*Poista vaakasuora asento* / )

Ja ymmärtääksesi tarkalleen, mitä palveluita ja luokkia sinulla pitäisi olla, suosittelen, että luet materiaalin: .

Yritin kertoa sinulle mahdollisimman lyhyesti vaakasuuntaisen päävalikon luomisesta, useiden mallipohjien tekemisestä, yksinkertaisten tyylien lisäämisestä siihen ja kauniin tekemisestä, avattavan valikon tekemisestä sivustollesi. Mukavuuden vuoksi olen koonnut kaikki yllä esitetyt valikot yhteen html-tiedostoon, jonka voit ladata alta. Se näyttää kuvakaappauksesta:

Kiitos huomiostasi.

Jos verkkosivustosi on enemmän kuin yksittäinen verkkosivu, sinun kannattaa harkita navigointipalkin (valikon) lisäämistä. Valikko on verkkosivuston osa, joka on suunniteltu auttamaan vierailijoita navigoimaan sivustolla. Mikä tahansa valikko on luettelo linkeistä, jotka johtavat sivuston sisäisille sivuille. Helpoin tapa lisätä navigointipalkki sivustollesi on luoda valikko käyttämällä CSS:ää ja HTML:ää.

Pystysuuntainen valikko

Ensimmäinen vaihe pystysuoran valikon luomisessa on luettelomerkityn luettelon luominen. Meidän on myös pystyttävä tunnistamaan luettelo, joten lisäämme siihen id-attribuutin, jonka tunniste on "navbar". Jokainen elementti

listamme sisältää yhden linkin:

Seuraava tehtävämme on nollata luettelon oletustyylit. Meidän on poistettava ulompi ja sisäinen pehmuste itse luettelosta ja luettelomerkit luettelokohteista. Aseta sitten haluamasi leveys:

#navbar ( marginaali: 0; täyte: 0; listatyylityyppi: ei mitään; leveys: 100 kuvapistettä; )

Nyt on aika muotoilla itse linkit. Lisäämme niihin taustavärin, muutamme tekstiparametreja: värin, fontin koon ja painon, poistamme alleviivauksen, lisäämme pieniä sisennyksiä ja määritämme näytön uudelleen elementti rivistä lohkoon. Lisäksi luetteloon on lisätty vasen ja alakehys.

Tärkein osa muutoksissamme on sisäisten elementtien uudelleenmäärittely lohkoelementeiksi. Nyt linkkimme vievät koko luettelon kohteiden käytettävissä olevan tilan, eli linkin seuraamiseksi meidän ei enää tarvitse siirtää kohdistinta tarkasti tekstin päälle.

#navbar a ( taustaväri: #949494; väri: #fff; täyte: 5px; tekstin koristelu: ei mitään; fontin paino: lihavoitu; reunus vasen: 5px kiinteä #33ADFF; näyttö: block; ) #navbar li ( border-left: 10px solid #666 border-bottom: 1px solid #666;

Olemme yhdistäneet kaikki yllä kuvatut koodit yhdeksi esimerkiksi, nyt klikkaamalla kokeilupainiketta pääset esimerkkisivulle ja näet tuloksen:

Asiakirjan nimi

Yrittää "

Kun siirrät hiiren valikkokohdan päälle, sen ulkoasu voi muuttua ja herättää käyttäjän huomion. Voit luoda tällaisen tehosteen käyttämällä pseudo-class:hover.

Palataan aiemmin käsiteltyyn pystyvalikkoesimerkkiin ja lisätään tyylisivuun seuraava sääntö:

#navbar a:hover ( taustaväri: #666; reunus vasen: 5px kiinteä #3333FF; ) Kokeile »

Vaakasuora valikko

Edellisessä esimerkissä tarkastelimme pystysuuntaista navigointipalkkia, joka löytyy useimmiten verkkosivustoilta pääsisältöalueen vasemmalla tai oikealla puolella. Kuitenkin valikot, joissa on navigointilinkkejä, sijaitsevat usein myös vaakasuorassa web-sivun yläosassa.

Vaakasuuntainen valikko voidaan luoda muotoilemalla tavallinen luettelo. Näytä ominaisuus elementeille

sinun on määritettävä arvo inline, jotta luettelon kohteet sijaitsevat peräkkäin.

Jos haluat sijoittaa valikon kohdat vaakasuoraan, luo ensin luettelomerkitty luettelo linkeillä:

Kirjoitetaan luetteloomme pari sääntöä, jotka nollaavat luetteloissa käytetyn oletustyylin, ja määritetään luettelokohteet uudelleen lohkosta riviin:

#navbar ( marginaali: 0; täyte: 0; list-style-type: ei mitään; ) #navbar li ( näyttö: inline; ) Kokeile »

Nyt meidän tarvitsee vain määritellä vaakasuuntaisen valikon tyyli:

#navbar ( marginaali: 0; täyttö: 0; listatyyli: ei mitään; reunus: 2px kiinteä #0066FF; reunuksen säde: 20px 5px; leveys: 550px; tekstin tasaus: keskellä; taustaväri: #33ADFF; ) #navbar a ( väri: #fff; täyte: 5px 10px; tekstin koristelu: ei mitään; fontin paino: lihavoitu; näyttö: inline-block; leveys: 100px; ) #navbar a:hover (reunuksen säde: 20px 5px taustaväri: #0066FF ) Kokeile »

Pudotusvalikosta

Luotavassa valikossa on päänavigointilinkit, jotka sijaitsevat vaakasuorassa navigointipalkissa, ja alikohdat, jotka näkyvät vain, kun hiiren osoitin vie valikkokohdan, johon nämä alakohdat liittyvät.

Ensin meidän on luotava valikkomme HTML-rakenne. Sijoitamme tärkeimmät navigointilinkit luettelomerkkiluetteloon:

Sijoitamme alikohteet erilliseen luetteloon ja upotamme ne elementtiin

, joka sisältää alakohtien ylälinkin. Nyt meillä on selkeä rakenne tulevaa navigointipalkkia varten:

Yrittää "

Aloitetaan nyt CSS-koodin kirjoittaminen. Ensin sinun on piilotettava alikohteiden luettelo käyttämällä näyttöä: none, jotta ne eivät näy verkkosivulla koko ajan. Tarvitsemme sen alikohtien näyttämiseksi vietäessä hiiren osoittimen elementin päälle

lista on muutettu uudelleen lohkoelementiksi:

#navbar ul ( näyttö: ei mitään; ) #navbar li:hover ul ( näyttö: esto; )

Poistamme oletussisennykset ja -merkit molemmista luetteloista. Listaelementit navigointilinkeillä tehdään kelluviksi, jolloin ne muodostavat vaakasuuntaisen valikon, mutta alakohtia sisältäville listaelementeille asetetaan float: none; niin, että ne näkyvät toistensa alapuolella.

#navbar, #navbar ul ( marginaali: 0; täyttö: 0; list-style-type: ei mitään; ) #navbar li ( float: left; ) #navbar ul li ( float: ei mitään; )

Seuraavaksi meidän on varmistettava, että avattava alivalikko ei paina navigointipalkin alapuolella olevaa sisältöä alas. Tätä varten asetamme luettelon kohteiden sijainnin: suhteellinen; , ja luettelo, joka sisältää alakohtien sijainti: absoluuttinen; ja lisää ylin ominaisuus, jonka arvo on 100 %, jotta absoluuttisesti sijoitettu alivalikko näkyy täsmälleen linkin alapuolella.

#navbar ul ( näyttö: ei mitään; sijainti: absoluuttinen; ylhäällä: 100%; ) #navbar li ( kellua: vasen; sijainti: suhteellinen; ) #navbar ( korkeus: 30px; ) Kokeile »

Pääluettelon korkeus on lisätty tarkoituksella, koska selaimet eivät pidä kelluvaa sisältöä elementtisisällönä, ilman korkeuden lisäämistä selain ohittaa listamme ja listaa seuraava sisältö kiertyy valikoihimme.

Nyt meidän tarvitsee vain muotoilla molempien luettelomme tyyli, ja pudotusvalikko on valmis:

#navbar ul ( näyttö: ei mitään; taustaväri: #f90; sijainti: absoluuttinen; yläosa: 100%; ) #navbar li:hover ul ( näyttö: lohko; ) #navbar, #navbar ul ( marginaali: 0; täyte: 0; listatyylinen tyyppi: ei mitään korkeus: 100%; ) #navbar li a (näyttö: lohko; täyte: 6px; leveys: 100px; väri: #fff; tekstin koristelu: ei mitään; tekstin tasaus: keskellä; ) #navbar ul li ( float: ei mitään; ) #navbar li:hover ( taustaväri: #f90; ) #navbar ul li:hover ( taustaväri: #666; )

Vaakasuora valikko on luettelo verkkosivuston osioista, joten on loogisempaa merkitä se elementin sisään

, ja käytä sitten CSS-tyylejä sen elementteihin. Tämä valikon asettelu on yleisin, koska sen sijoittelussa web-sivulla on ilmeisiä etuja.

Kuinka tehdä vaakasuora valikko: asettelu- ja suunnitteluesimerkkejä

HTML-merkinnät ja perustyylit vaakasuuntaiseen valikkoon

Oletuksena kaikki luettelon kohteet sijaitsevat pystysuoraan, joka peittää säiliöelementin koko leveyden, joka puolestaan vie koko säiliölohkonsa leveyden.

HTML-merkintä vaakasuuntaista navigointia varten

Valikkokohta

Valikkokohta
Valikkokohta

Tagin sisällä oleva vaakasuuntainen valikko voidaan lisäksi sijoittaa elementin sisään

...

On olemassa useita tapoja sijoittaa ne vaakasuoraan. Ensin sinun on nollattava navigointielementtien oletustyylit:

Ul (luettelotyyli: ei mitään; /*poista luettelomerkit*/ marginaali: 0; /*poista ylä- ja alamarginaali, joka on yhtä suuri kuin 1em*/ täyttö-vasen: 0; /*poista vasen täyttö, joka vastaa 40 kuvapistettä*/ ) a (tekstin koristelu: ei mitään; /*poista linkkitekstin alleviivaus*/)

Menetelmä 1. li (näyttö: rivi;)

Luettelon elementtien kirjoittaminen pienillä kirjaimilla. Tämän seurauksena ne on sijoitettu vaakasuoraan, ja niiden väliin on lisätty oikealle puolelle 0,4em rako (laskettu fontin koon mukaan). Poista se lisäämällä negatiivinen oikea marginaali li li:lle (margin-right: -4px;) . Seuraavaksi muotoilemme linkit haluamallamme tavalla.

Menetelmä 2. li (kelluke: vasen;)

Listan elementtien saattaminen kellumaan. Tämän seurauksena ne asetetaan vaakasuoraan. Säiliölohkon ul korkeudesta tulee nolla. Tämän ongelman ratkaisemiseksi lisäämme (ylivuodon: piilotettu;) ul:aan laajentaen sitä ja siten sallien sen sisältää kelluvia elementtejä. Lisää linkkejä varten (näyttö: block;) ja muotoile ne haluamallasi tavalla.

Menetelmä 3. li (näyttö: inline-block;)

Luetteloelementtien tekeminen inline-block. Ne sijaitsevat vaakasuorassa, oikealle puolelle muodostuu rako, kuten ensimmäisessä tapauksessa. Lisää linkkejä varten (näyttö: block;) ja muotoile ne haluamallasi tavalla.

Menetelmä 4. ul (näyttö: flex;)

ul-luettelon tekeminen joustavaksi säiliöksi käyttämällä . Tämän seurauksena luetteloelementit on järjestetty vaakasuoraan. Lisäämme linkeille merkin (näyttö: block;) ja muotoilemme ne haluamallasi tavalla.

1. Mukautuva valikko alleviivauksella, kun osoitinta pidetään linkin päällä

2. Mukautuva valikko hääsivustolle

3. Mukautuva valikko kampasimpukoilla

4. Mukautuva valikko nauhassa

5. Responsiivinen valikko, jonka keskellä on logo

6. Responsiivinen valikko logolla vasemmalla

Ei kauan sitten julkaistiin uusi hypertekstimerkintästandardi, html5, joka avasi verkkovastaaville valtavan mahdollisuuden parantaa hakurobottien ymmärtämistä sivuston rakenteesta. Muutokset vaikuttivat myös navigointimerkintöihin.

Käytettäessä 4. html-standardia sivuston optimaalinen valikkoasettelu oli seuraava:

< ul class = "nav" > < li>< a href= "#" >Valikkokohta 1 < li>< a href= "#" >Valikkokohta 2 < li>< a href= "#" >Valikkokohta 3

Mitä sitten? Kaikki on erittäin loogista ja tiivistä. W3C-dokumentaation mukaan ul-tunnistetta tulisi käyttää merkitsemään luetteloita, joissa on jotain, ja mikä on valikko, jos ei linkkiluettelo resurssimme tiettyihin rakenteellisiin osiin?

Uusi lähestymistapa HTML5:n valikkoasetteluun

Viidennen html:n julkaisun myötä saimme tietää uuden nav-tunnisteen olemassaolosta ja siitä, että sitä näyttäisi käytettävän myös valikoiden merkitsemiseen, ja ilman pitkiä puheita vanhan ja uuden tiedon symbioosi johti seuraavaan rakenteeseen:

< nav> < ul> < li>< a href= "#" >Valikkokohta 1 < li>< a href= "#" >Valikkokohta 2 < li>< a href= "#" >Valikkokohta 3

Ensi silmäyksellä kaikki on hyvin, ja toisella silmäyksellä tässä ei ole paljon virheitä, MUTTA! Listojen tarkoitus on yksinkertaisesti luetella asiat järjestyksessä. Niitä ei ole tarkoitettu navigointimerkintöihin. Ja jos meillä ei aiemmin ollut oikeastaan valinnanvaraa navigoinnin merkitsemisessä, niin uudessa todellisuudessa kaikesta on tullut paljon yksinkertaisempaa.

Jotta hakurobotti ymmärtäisi, että sen edessä on sivustonavigointielementti, pelkkä navigointitunnisteen läsnäolo on enemmän kuin tarpeeksi. Ja sitten voimme yksinkertaistaa kaikkea niin paljon kuin mahdollista:

< nav> < a href= "#" >Valikkokohta 1 < a href= "#" >Valikkokohta 2 < a href= "#" >Valikkokohta 3

Tämän HTML 5:n valikon merkinnän vaihtoehdon eduista voimme korostaa seuraavia:

Vähentämällä sivulla olevan koodin määrää helpotamme selainten ja hakurobottien käsittelyä, millä on positiivinen vaikutus sivuston hakukoneoptimointiin.
Vähemmän tunnisteita tarkoittaa dokumentin lyhyempää DOM-rakennetta, mikä on myös lisäetu sivun käsittelyyn eri sovelluksilla.
Mitä tiiviimpi koodi on, sitä selkeämpi ja helpompi se on ymmärtää.

Kuinka luoda sisäkkäisiä valikoita html5:ssä?

Vaikka valikon sisäkkäisyys uusilla standardeilla näyttää ensi silmäyksellä epätavalliselta, viidennen html-tunnisteen tarkoituksen tunteessa tämä rakenne tulee melko helposti ymmärrettäväksi:

< nav> < section> < a href= "#" >Valikkokohta 1 < nav> < a href= "#" >Valikon alakohta 1 < a href= "#" >Valikon alakohta 2 < a href= "#" >Valikon alakohta 3 < a href= "#" >Valikkokohta 2 < a href= "#" >Valikkokohta 3

Osiotunnisteen avulla yhdistämme linkkiryhmän yhdeksi loogiseksi valikkoelementiksi, minkä jälkeen toimimme samankaltaisella periaatteella kuin sisäkkäisten luetteloiden periaate: käyttämällä toista navigointipainiketta ensimmäisen sisällä, raportoimme, että tämän tagin linkit kuuluvat alempi navigointitaso, eli sanomme, että linkit, jotka se tulee, eivät sisällä kohteita, vaan valikon alakohtia.

Tämä muotoilu, vaikka se ei olekaan ensisilmäyksellä tuttu, on silti monella tapaa yksinkertaisempi kuin vastaava luetteloilla tehty rakenne.

Yhteenvetona

Vaikka listalähestymistapa on suurelta osin vanhentunut, siinä ei silti ole mitään vikaa. Se, haluatko yksinkertaistaa koodia vai ei, riippuu suurelta osin halustasi ja projektin ominaisuuksista.

Jos esimerkiksi valikon suunnitteluun tarvitset lisäelementtejä, joihin sinun täytyy ripustaa kaikenlaisia hienoja ominaisuuksia CSS: ssä, on parempi käyttää luetteloita, jotka tarjoavat ne sinulle, kuin veistää tyhjiä divejä linkkien ympärille.