Pudotusvalikot css- ja html-muodoissa. Vaakasuoraan keskitetty valikko käyttäen vain CSS:ää
Olen pitkään halunnut kirjoittaa artikkelin alivalikon tekemisestä CSS:n avulla. Monet ihmiset tekevät sen JQueryssä ja se osoittautuu melko hyvin, mutta kokonaisuus perusperiaate Kerron tässä, kuinka alivalikkoja luodaan CSS:n avulla. Ja sitten tästä pohjasta alkaen voit parantaa alivalikkoa edelleen.
Tässä CSS-koodi heti:
* html ulli (
kellua: vasen;
}
* html ulli a (
korkeus: 1 %;
}
ul(
border-bottom: 1px solid #000;
listatyyli: ei mitään;
marginaali: 0;
pehmuste: 0;
leveys: 100 pikseliä;
}
ulli (
asema: suhteellinen;
}
ulli a (
näyttö: lohko;
reunus: 1px solid #000;
reuna-ala: 1px;
täyte: 5px;
teksti-koriste: ei mitään;
}
li ul (
näyttö: ei mitään;
vasen: 99px;
sijainti: absoluuttinen;
alkuun: 0;
}
li:hover ul (
näyttö: lohko;
}
Tärkeintä tässä on "li:hover ul" -valitsin. Itse asiassa se näyttää valikon sisällön. Oletuksena se on "näyttö: ei mitään", ja kun viet hiiren osoittimen valikon kohdan päälle, alivalikosta tulee "näyttö: lohko", eli näkyvä. Se on tärkeintä. Lisäksi kahdessa ensimmäisessä valitsimessa (* ) on CSS-hakkerointi IE:lle, muuten mikään ei toimi tässä selaimessa ilman sitä. Kaikki muu on ulkomuoto, jota voi tietysti muuttaa.
Tässä on HTML-koodi:
Koti
Valikko 1
Alavalikko 1
Alavalikko 2
Alavalikko 3
Valikko 2
Alavalikko 4
Alavalikko 5
Alavalikko 6
Alavalikko 7
Alavalikko 8
Jos ajattelet huolellisesti tätä rakennetta, kaikki käy hyvin selväksi. ul-tunniste luo valikon. Jos ul on toisen ul:n sisällä, se on jo alivalikko. Ja li-tunniste vastaa tietystä valikon kohdasta.
Tietysti valikko on yksinkertaisin sekä logiikan ja rakenteen että suunnittelun suhteen. Tietysti voit käyttämällä JQueryä tehdä tasainen aukko. Voit myös muuttaa ulkoasua, mutta koko periaate pysyy samana kuin tässä CSS- ja HTML-kielellä kirjoitetussa alavalikossa.
Hei rakkaat blogini lukijat! Tämän päivän artikkeli on erittäin hyödyllinen aloitteleville taittosuunnittelijoille. Koska tänään luomme yksinkertaista vaakasuora valikko. Ennen kuin siirrymme suoraan asetteluun, haluan sanoa muutaman sanan siitä, miksi päätin valita tämän tietyn aiheen artikkelille.
Itse asiassa kaikki on melko yksinkertaista, kun ajattelin sivuston seuraavan oppitunnin aihetta, aloin muistaa ja analysoida kokemustani ulkoasun opiskelusta, mitä minun piti käsitellä alkuvaiheessa vakiinnuttuani taittosuunnittelija, mikä oli minulle käsittämätöntä tätä alaa opiskellessa jne. Esitin itselleni kaikki nämä kysymykset ymmärtääkseni paremmin, mikä voisi olla kiinnostavaa taittosuunnittelijan uraansa aloittavalle henkilölle. Ja henkilökohtaisesti, heti kun aloin opiskella taittoa, eniten kysymyksiä heräsi asettelusta erilaisia valikoita, varsinkin jos me puhumme monitasoisesta valikosta. Ja niin tänään puhumme valikosta ja tarkemmin vaakavalikosta. Joten aloitetaan!
Aloitetaan vaakasuuntaisen valikkomme laatiminen!Kuten luultavasti arvasit, ensimmäinen asia, joka meidän on tehtävä, on luoda HTML-sivu tavallisella merkinnällä ja liittää siihen tyylitiedosto. En mene yksityiskohtiin tämä vaihe, koska toivon edelleen, että et ole niin aloittelija, että minun täytyy kertoa sinulle yksityiskohtaisesti, mitä vartalo ja pää ovat ja miten tyylit liittyvät toisiinsa. Sanonpa vain, että ruokalistamme tyylien lisäksi css-tiedosto Kirjoitan yksinkertaisimman nollauksen nollatakseni tyylit ja saavuttaakseni saman sisennyksen kaikissa selaimissa. Itse asiassa yksinkertaisin nollaukseni näyttää tältä:
Emme kerro vielä mitään yksityiskohtaisesti tyylien nollauksesta, koska tämä on pohjimmiltaan toisen artikkelin aihe, ainoa asia, joka sinun on tiedettävä yllä olevasta koodista, on se, että kiitos tämä koodi Kaikki kirjoittamamme sivuelementit nollaavat marginaalin ja täytteen, jotta sivumme näyttäisi samalta kaikissa selaimissa.
Mitä meissä siis on? tässä vaiheessa? Meillä on html-sivu vakiomerkinnällä:
Vaakasuora valikko
Ja meillä on tähän sivuun yhdistetty tyylitiedosto (minulle se on style.css), jossa on seuraava sisältö:
Seuraava askel on html:n luominen merkintä ruokalistallemme.
Merkintöjen luominen valikkoonKäytämme merkinnöissämme uusi tunniste, joka ilmestyi HTML5:ssä, päätin heti totutella sinut uusiin tunnisteisiin seuratakseni trendiä ja standardia. Huolimatta siitä, että vanhemmat selaimet eivät tue uusia HTML 5 -tageja, suosittelen silti niiden käyttöä asettelussasi, koska on aikaisin tai myöhemmin, sinun on silti vaihdettava niihin, aivan kuten asettelusuunnittelijat vaihtoivat aikoinaan taulukkoasettelu estää, tämä on todellisuutta, on parempi seurata suuntausta!
Ja koska puhumme jo uuden tukemisesta html-tunnisteet 5, jotta meillä ei olisi ongelmia tämän kanssa vanhemmissa selaimissa, meidän on sisällytettävä asiakirjamme erikoiskirjasto- html5shiv. Tämä tehdään lisäämällä sisään
sivusi otsikko, jossa on seuraava koodi:
Kaikki tämän jälkeiset tagit (ja muut HTML5:een liittyvät tagit) havaitaan normaalisti vanhemmissa selaimissa.
Palataan suoraan merkintään. Seuraavaksi meidän on lisättävä tunnisteeseemme luettelomerkitty luettelo, joka näyttää minulle tältä:
- Koti
- Meistä
- Portfolio
- Blogi
- Yhteystiedot
Olemme siis ilmeisesti saaneet merkinnät valmiiksi, on aika alkaa kirjoittaa tyylejä, sillä nyt ruokalistamme ei näytä lievästi sanottuna kovin hyvältä:
Kirjoitustyylit vaakavalikkoonJa niin, ensimmäinen asia, joka meidän on tehtävä valikon asettelussa, on poistaa luettelomerkit, emme tietenkään tarvitse niitä, teemme sen seuraavasti:
Ul( listatyyli:ei mitään; )
Tämän jälkeen ruokalistamme näyttää tältä:
En oikein pidä siitä, että valikkomme on juuttunut selaimen reunoille, korjataan se:
Tällä koodilla asetimme valikon leveyden, annoimme sille 50 kuvapisteen ylä- ja alamarginaalit ja sijoitimme sen keskelle. Kukapa ei tiedä, onko lohkoelementillä leveyttä paikantamista varten tämä elementti tiukasti keskellä, meidän on vain annettava sille ulkoinen marginaali (marginaali) oikealle ja vasemmalle arvolla auto.
Seuraava askel on tehdä valikoistamme vaakasuora, tämä tehdään asettamalla elementit
Menu li( float:left; )
Koko ruokalistamme on nyt vaakasuuntainen.
Jos et ymmärrä mitä tarkalleen tapahtui ja mitä se tekee kelluva omaisuus Suosittelen googlaamaan tietoa aiheesta tämä omaisuus ja tutkia sitä perusteellisesti, koska
Yksikään sivu taitto ei selviä ilman sitä, voin kertoa sen sinulle varmasti. No okei, jatketaan!
Menu li a( display:block;/* Tee linkistä lohkoelementti*/ padding:12px 20px;/* Aseta täyte */ text-decoration: ei mitään; /* poista alaviiva*/ color:#fff;/* tee linkin väristä valkoinen */ background:#444;/* tee taustaväristä tumma */ font:14px Verdana, sans-serif;/* aseta fontin koko ja nimi */ )
Tässä on yksi eniten tärkeitä sääntöjä- näyttö:block;. Tosiasia on, että linkit ovat oletusarvoisesti upotettuja elementtejä ja rivielementit on sisennetty eri selaimet käytetään eri tavoin, joten linkistä kannattaa tehdä lohkoelementti ja vasta sitten soveltaa siihen ulkoisiin tai sisäisiin sisennyksiin liittyviä ominaisuuksia. En halua rasittaa sinua nyt tarpeetonta tietoa ajan myötä todellisia esimerkkejä ymmärrät, miksi tämä painotus on asetettu tähän.
Katsotaan mitä saamme, päivitä selainsivu ja se on siinä!:
Kuten näette, se ei näytä pahalta, voimme sanoa, että periaatteessa ruokalistamme on valmis. Ainoa asia, joka on vielä tehtävä, on linkkien valon säätäminen leijuttaessa, ja minusta näyttää siltä, että valikko näyttää paremmalta kohteiden välisillä erottimilla.
Aloitetaan erottimilla:
Valikko li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )
Mitä olemme tehneet täällä? Kyllä, kaikki on hyvin yksinkertaista, asetamme pisteemme (
Katsotaan taas mitä saamme:
Minusta se on paljon parempi erottimien kanssa.
Valikko li a:hover( background:#888; )
Jälleen käyttämällä erityistä pseudoluokkaa, tällä kertaa hiiri, asetamme linkin värin, kun viemme hiiren sen päälle, katso:
Minusta se on siistiä :) Toivottavasti päädyt samaan menuun kuin minulla.
Lopetan tähän tämä oppitunti, Toivon todella, että siitä oli sinulle hyötyä ja nyt tiedät kuinka luoda yksinkertainen vaakasuora valikko puhdas html ja css. Tietenkin loimme yksitasoisen valikon, josta tulee hieman monimutkaisempi kaksitasoinen valikko (jossa on sisäkkäinen luettelo), mutta tämä on toisen oppitunnin aihe, siinä kaikki. Tule uudestaan, olen iloinen!!!
Jos verkkosivustosi on enemmän kuin yksi 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ä, joihin johtaa sisäiset sivut sivusto. Eniten yksinkertaisella tavalla navigointipalkin lisääminen sivustoon luo valikon, jossa on CSS:n avulla ja HTML.
Pystysuuntainen valikkoEnsimmä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
Seuraava tehtävämme on nollata oletusluettelotyylit. Meidän on poistettava ulkoiset ja pehmuste itse luettelossa ja merkit luettelon kohteissa. 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äri, muuta tekstiparametreja: väri, kirjasinkoko ja paino, poista alleviivaukset, lisää pieniä sisennyksiä ja määritä näyttö 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 otsikko #navbar ( marginaali: 0; täyttö: 0; list-style-type: ei mitään; leveys: 100px; ) #navbar li ( reunus-vasen: 10px solid #666; border-bottom: 1px solid #666; ) # 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ö: lohko; )
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 valikkoEdellisessä 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 tyylillä tavallinen lista. Näytä ominaisuus elementeille
Jos haluat sijoittaa valikon kohdat vaakasuoraan, luo ensin ranskalaiset viivat 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 on vain päätettävä muotoilu vaakasuuntaiselle valikkollemme:
#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 »
PudotusvalikostaLuotavassa 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
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
#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 muodostaen vaakavalikon, 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äälistan 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ö kiertää valikon ympärillä.
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; )
Kirjoittajalta: Toivotan sinut tervetulleeksi blogiimme verkkosivustojen rakentamisesta. Tämä on uudelle spesifikaatiolle omistettu artikkelisarja, ja tänään haluaisin kertoa sinulle kuinka tehdä valikko html5:ssä ja miten tämä prosessi eroaa samasta aiemmat versiot Kieli.
Mitkä ovat erotEnsinnäkin haluan sanoa, että erittely ei ole niin uusi - se aloitti kehitystyönsä jo vuonna 2009. Itse asiassa sitä on tapahtunut siitä lähtien jatkuvaa kehitystä– html5:een ilmestyy uusia ominaisuuksia, nykyaikaiset selaimet yhä enemmän tukea näille samoille mahdollisuuksille, jotta pian niistä voidaan puhua täysi tuki Tämä tekniikka, vaikka se ei ole yksi kokonaisuus, on pikemminkin joukko uusia ominaisuuksia, joista jokainen on itsenäinen.
No, okei, mutta mitä eroa on päänavigoinnin (valikon) luomisessa, koska luet artikkelia tästä aiheesta, siinä pitäisi ehdottomasti olla joitain eroja. No, miten menu luotiin aiemmin? Tyypillisesti tähän käytettiin luettelomerkeillä varustettua luetteloa, joka sijoitettiin lisäsäiliöön kaikkea navigointia varten - tavalliseen div.
Joten uusien tunnisteiden myötä voit nyt tehdä sen paremmin - sen sijaan div-tunniste kääri valikko naviksi - uuteen semanttiseen elementtiin, joka on luotu erityisesti keräämään siihen tärkeimmät linkit ja ryhmittelemään ne yhteen.
Voit lisätä navigointiin joko luettelon tai vain joukon linkkejä. Minusta tuntuu, että tämä on vielä yksinkertaisempaa ja oikea ratkaisu, vaikka monissa malleissa voit silti nähdä valikon toteutuksen käyttämällä ul, li, a -tageja.
Mielenkiintoista on, että navigointisäiliö luotiin erityisesti sivun tärkeimpiä linkkejä varten. Itse asiassa sivulla voi olla useampi kuin yksi tällainen säilö, mutta sinun tulee sijoittaa niihin vain ne linkit, jotka todella muodostavat päänavigointi(esimerkiksi yläpäävalikko ja sen kopio sivun alatunnisteessa).
Kuinka tehdä vaakasuora valikko html5:lläKoti Palvelut Yhteystiedot Arvostelut
Et tarvitse edes kehystä luettelossa, kaikki näytetään aluksi yhdellä rivillä, koska linkit ovat rivin elementtejä.
Toinen asia on, että ne ovat suunnittelultaan hyvin rajallisia sisäisten ominaisuuksiensa vuoksi. Voit käyttää vain seuraavia ominaisuuksia: väri, kirjasinkoko, marginaalit. Jos haluat määrittää tietyn taustavärin, tehdä erottimet ja lisätä täyttöjä (tai määrittää kunkin valikkokohdan koon), et voi tehdä tätä rivillä.
Tässä meidän on muutettava pisteemme muotoiksi lohkon elementtejä. Tätä varten heidän on kirjoitettava ominaisuus:
näyttö: lohko; |
Nyt ne menevät ylhäältä alas, eli navigointimme on muuttunut pystysuoraksi. Jos haluat muuttaa sen takaisin vaakasuuntaiseksi, sinun on lisättävä tiettyjä ominaisuuksia. Esimerkiksi sen sijaan lohkon tyyppi määritä niille lohkoviiva tai anna heille (kelluke: vasemmalle). Lue lisää näistä menetelmistä.
Pystysuuntainen navigointiYleensä tehdä pystysuora valikko html5:ssä he käyttävät listaa, mutta yllä antamani merkintä sopii myös meille. Kuten huomasit, jos muunnat linkit estolinkeiksi, ne asettuvat automaattisesti peräkkäin ylhäältä alas, koska kaksi lohkoa ei voi olla samalla rivillä.
Nyt voit hakea heihin tarvittavat säännöt rekisteröinti Lohkoilla on paljon enemmän ominaisuuksia kuin sisäinen elementti, joten sinulla on paljon enemmän vaihtoehtoja. Lisäsin esimerkiksi nämä:
a(tekstin koristelu: ei mitään; väri: #fff; täyte: 5px; kirjasinkoko: 22px; näyttö: lohko; tausta: lineaarinen gradientti(oikealle, rgba(96,108,136,1) 0%,rgba(63,76,107) ,1) 100 % leveys: 200px;
teksti - koristelu : ei mitään ; väri: #fff; täyte: 5px; fontin koko: 22px; näyttö: lohko; tausta: lineaarinen - gradientti (oikealle, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%); leveys: 200px; teksti - tasaa : keskelle |
Ihmiset käyttävät usein JavaScriptiä avattavan valikon luomiseen. Mutta itse asiassa tämä voidaan tehdä puhdas CSS. Ja tässä opetusohjelmassa opit tekemään sen.
ToimintaperiaateAluksi, jotta ymmärrät avattavien elementtien toimintaperiaatteen, katsotaanpa yksinkertaista esimerkkiä. Otetaan yksinkertainen html-koodi käytettäväksi:
Vie hiiri päälleni > Olen piilotettu osa
ja käytä seuraavia tyylejä tähän koodiin:
Esimerkki_näytetty ( display:inline-block; ) .example_hidden ( display:none; ) .example_shown:hover .example_hidden ( display:inline-block; )
CSS:ssä piilotimme halutun osan tekstistä muuttamalla sen näytön muotoon display:none;. Kun siirrät osoittimen (:hover) pääelementin.esimerkki_näytetyn päälle, alielementti.esimerkki_näytetään näyttötyyppinsä näkyväksi. Pudotusvalikot on rakennettu tällä periaatteella.
Avattavan valikon luominenSiirrytään nyt itse valikon toteuttamiseen. Järjestämiseen käytämme listatunnisteita ul ja li
Kuten koodista näkyy, pääluettelo, jossa on id = “menu”, on vastuussa valikon näkyvistä osista. Osioihin laitamme toisen ul-luettelon, joka sisältää avattavia linkkejä, kun viet hiiren osion valikkokohdan otsikon päälle. Käytä nyt seuraavia tyylejä tähän elementtijoukkoon:
/*Reset padding*/ ul, li ( margin:0; padding:0; list-style-type:none; ) /*Aseta päävalikon sisältävän lohkon parametrit*/ #menu ( display:block; position: absoluuttinen ylhäällä :100px ) /*Valikkoosioiden tyylit*/ #menu > li ( näyttö:inline-block; korkeus: suhteellinen menu*/ #menu > li > ul ( position:absolute; top:20px; display:none; ) /*Do piilotettu osa näkyvä*/ #valikko > li:hover > ul ( display:block; )
Näissä tyyleissä haluan keskittyä neljään asiaan:
Tällä tavalla voimme sitoa pudotusvalikot eivät johonkin ikkunan koordinaattiin, vaan päävalikon osaan. Oikeastaan top:20px määrittää pystysuuntaisen poikkeaman pääosan yläreunasta.
Pudotuslistat ovat kauniita kätevä tapa lähettää suuri menu pienessä tilassa. Mutta tällä menetelmällä on valtava haitta: se ei toimi mobiililaitteet. Miksi? Koska heillä ei periaatteessa ole käsitystä leijumisesta. Niissä on napsautuksia, vetämistä. Mutta osoitinta ei ole. Älä siis unohda näitä käyttäjiä ja tee heille erillinen valikkototeutus.
