Kuinka tehdä kuminen responsiivinen valikko CSS: n avulla? Tee-se-itse vaakasuuntainen pudotusvalikko CSS:n ja HTML:n avulla. Laajenna valikko koko leveyteen.

Hyvää iltapäivää

Usein on tarpeen tehdä vaakasuora valikko, joka ulottuu koko päälohkon leveydelle riippumatta siitä, kuinka monta kohdetta se sisältää.

Tänään haluan näyttää sinulle, kuinka luoda juuri tällainen valikko.

Ruokalistamme tulee siis olemaan seuraava:

Se on venytetty täyteen leveyteen ja erottuu, kun osoitin viedään sen päälle. Valikko on pyöristetty sivuilta.

HTML-MERKINTÄ

Koti

Mielenkiintoisia uutisia

Toinen ruokalista!

Valikosta täysleveäksi käytin 100 % leveitä taulukoita. Jokaisessa taulukossa on valikkokohta div-säiliö. Sen mukaan, onko ensimmäinen, viimeinen vai välivalikon kohta div, vastaava luokka määritetään.

Jokaisessa div-säiliössä on 2 absoluuttisella sijoittelulla varustettua sivureunaa, jotka ovat välttämättömiä oikean näytön varmistamiseksi. Jos käytät vakioreunuksia, valikkokohtia vaihdettaessa teksti hyppää 1-2 pikseliä, mikä on hyvä.

Aktiivinen luokka vastaa valitusta valikon kohdasta ja korostaa sen.

Jokaisessa tuotteessa on kuva ja teksti. Käytämme pöytää varmistaaksemme, että tämä kaikki on kohdistettu tiukasti keskelle pystysuoraan. Pystysuuntaisen kohdistusominaisuuden ansiosta valikkokohtamme näkyvät aina sujuvasti eivätkä lähde pois.

CSS-SÄÄNNÖT

Ensin asetetaan tyylit valikon yleiselle näytölle:

Menu_container ( täyttö yläreunassa: 40 pikseliä; leveys: 100 %; korkeus: 47 kuvapistettä; reunavälit: 0 kuvapistettä; ) .menu_container td ( pystysuora kohdistus: keskellä; /* pystysuuntainen kohdistus */ ) .viimeinen_piste_valikko, .ensimmäinen_piste_valikko,_menud_piste leveys: 100%; korkeus: 47px; reuna: 1px kiinteä #dadbda; z-indeksi: 1000; sijainti: suhteellinen; reuna-vasen: ei mitään; ) .inner_table (leveys: 100%; korkeus: 100%; ) .inner_table td ( täyttö: 0 pikseliä; pystytasaus: keskellä; reuna: ei mitään; tekstin tasaus: vasemmalle; leveys: 150 pikseliä; täyttö-vasen: 4 kuvapistettä; ) .td.inner_table_title ( täyttö-ylä: 4px; fontin paino: lihavoitu; ) .td.inner_table_img (leveys: 40px!tärkeää; ) .sisätaulukko täyte-oikea: 10px; tekstin muunnos: isot kirjaimet; rivin korkeus: 13px; ) .inner_table_menu td.inner_table_img (leveys: 30px!tärkeää; korkeus: 30px!tärkeää; täyttö-vasen: 15px; )

Kauneuden vuoksi pyöristetään valikon sivuilla olevia kulmia:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-vasen-säde: 5px; border-right: 1px solid #dadbda; ) .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -oikean alareunan säde: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; reunus-ylä-oikea-säde: 5px; border-bottom-right-radius: 5px ;)

Nyt ruokalistamme on saanut kauniimman ilmeen:

Toistaiseksi ensimmäisellä pisteellä ei ole vasenta reunaa. Korjaamme sen vähän myöhemmin.

Lisätään nyt valikkoon hover-tehosteita.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( taustaväri: #CAE285: -moz background-line-image:-moz gradient(yläosa, #CAE285, #9FCB56); taustakuva: -webkit-gradient(lineaarinen, 0 0, 0 100%, alkaen(#CAE285), to(#9FCB56)); taustakuva: -webkit-lineaarinen -gradient(ylhäällä, #CAE285, #9FCB56); taustakuva: -o-lineaarinen gradientti(ylhäällä, #CAE285, #9FCB56); taustakuva: lineaarinen gradientti(alaan, #CAE285, #9FCB56); reunus: 1px solid #9FCB56; reunuksen väri: #aec671 #9fbb62 #87ac4a; reunus vasen: ei mitään; z-indeksi: 5000; ) /* määrittää reunat hoverissa */ .first_point_menu ( reunus: 1px solid #dadbda ; ) .first_point_menu:hover, .first_point_menu.active ( reunus: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( reunus: 1px solid #dadbda; border-point) :hover ( reunus: 1px kiinteä #9FCB56; reunus-vasen: ei mitään; reunan väri: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: ei mitään; )

Nyt ruokalistamme näyttää paljon mukavammalta, mutta toistaiseksi meillä ei ole reunuksia korostetuille valikon kohteille. Korjataan tämä!

/* sivureunusten tyylit */ .borderLeftSecond, .borderRightSecond ( näyttö: ei mitään; sijainti: absoluuttinen; leveys: 1px; korkeus: 47px; taustaväri: #9fbb62; yläosa: 0px; z-indeksi: 1000; ) /* reunusten absoluuttiset poikkeamat */ .borderLeftSecond (vasen: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond käsittelee tapauksia ensimmäinen ja viimeinen kohde */ .first_point_menu.active .borderLeftSecond ( näyttö: ei mitään; ) .last_point_menu.active .borderRightSecond ( näyttö: ei mitään; ) .last_point_menu:hover .borderLeftSecond ( näyttö: esto; )

Siinä kaikki!

Me teimme sen loistava menu venytetty koko ylälohkon leveydelle! Kohteet eivät mene päällekkäin, kun viet hiiren osoitinta, ja asettelu ei hyppää.

Vaakavalikko on luettelo verkkosivuston osioista, joten on loogisempaa sijoittaa 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

Oletusarvoisesti kaikki luetteloelementit on järjestetty pystysuunnassa, ja ne peittävät säiliöelementin koko leveyden, joka puolestaan ​​vie koko sen säilölohkon leveyden.

HTML-merkintä vaakasuuntaista navigointia varten

• Valikkokohta
• Valikkokohta
• Valikkokohta
...

Tunnisteen sisällä sijaitseva vaakasuora valikko voidaan lisäksi sijoittaa ... ja/tai ... -elementin sisään. Tämän html-merkinnän ansiosta semanttinen merkitys annetaan ja myös ilmestyy lisämahdollisuus alustaaksesi valikkolohkon.

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 hiiren osoitinta pidetään linkin päällä
• Tehdä työtä
• Noin
• Blogi
• Ottaa yhteyttä
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( listatyyli: ei mitään; marginaali: 40px 0 5px; täyte: 25px 0 5px; tekstin tasaus: keskellä; tausta: valkoinen; ) .menu-main li (näyttö: inline-block;).menu- main li:after ( sisältö: "|"; väri: #606060; näyttö: inline-block; vertical-align:top; ) .menu-main li:last-child:after (sisältö: ei mitään;) .menu-main a (tekstin koristelu: ei mitään; kirjasinperhe: "Ubuntu Condensed", ilman serifiä; kirjainten väli: 2px; sijainti: suhteellinen; täyttö-ala: 20px; marginaali: 0 34px 0 30px; fontin koko: 17px; tekstin muunnos: isot kirjaimet; näyttö: inline-block; siirtymä: väri .2s; ) .menu-main a, .menu-main a:visited (väri: #9d999d;) .menu-main a.current, .menu- main a:hover(väri: #feb386;) .menu-main a:ennen, .menu-main a:after (sisältö: ""; sijainti: absoluuttinen; korkeus: 4px; ylhäällä: automaattinen; oikea: 50%; alaosa : -5px; vasen: 50%; tausta: #feb386; siirtymä: .8s; ) .menu-main a:hover:ennen, .menu-main .current:before (vasemmalla: 0;) .menu-main a: hover:after, .menu-main .current:after (oikealla: 0;) @media (max-width: 550px) ( .menu-main (padding-top: 0;).menu-main li (näyttö: lohko; ) .menu-main li:after (sisältö: ei mitään;) .menu-main a ( täyte: 25px 0 20px; marginaali: 0 30 kuvapistettä; ) ) 2. Mukautuva valikko hääsivustolle
• Tehdä työtä
• Noin
• Blogi
• Ottaa yhteyttä
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( sijainti: suhteellinen; tausta: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:ennen, .top-menu:after ( sisältö: ""; näyttö: lohko; korkeus : 1px; reunus-ylä: 3px kiinteä #575350; reunus-ala: 1px kiinteä #575350; margin-ala: 2px; ) .ylävalikko:jälkeen (reunus-ala: 3px kiinteä #575350; reunus-ylä: 1px kiinteä #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main (luettelotyyli: ei mitään; täyte: 0 30px; marginaali: 0; fontin koko: 18px; tekstin tasaus: keskellä; sijainti: suhteellinen; ) .menu-main:ennen, .menu-main:after ( sisältö: "\25C8"; rivin korkeus: 1; sijainti: absoluuttinen; yläosa: 50%; muunnos: translateY(-50% ); ) .menu-main:ennen (vasen: 15px;) .menu-main:after (oikea: 15px;) .menu-main li ( näyttö: inline-block; täyte: 5px 0; ) .menu-main a (tekstikoristelu: ei mitään; näyttö: inline-block; marginaali: 2px 5px; täyte: 6px 15px; kirjasinperhe: "PT Sans", sans-serif; fontin koko: 16px; väri: #777777; reunus-ala : 1px kiinteä läpinäkyvä siirtymä: .3s lineaarinen; ) .menu-main .current, .menu-main a:hover (reunuksen säde: 3px; tausta: #f3ece1; väri: #313131; text-hadow: 0 1px 0 #ffff; border-color: #c6c6c6; ) @media (max-leveys: 500px) ( .menu-main li (näyttö: block
• Tehdä työtä
• Noin
• Blogi
• Ottaa yhteyttä
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( listatyyli: ei mitään; täyttö: 0 30px; marginaali: 0; fontin koko: 18px; tekstin tasaus: keskellä; sijainti: suhteellinen; tausta: valkoinen; ) .menu-main:after ( sisältö: ""; sijainti: absoluuttinen; leveys: 100%; korkeus: 20px; vasen: 0; alaosa: -20px; tausta: säteittäinen gradientti (valkoinen 0%, valkoinen 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px; taustan koko: 20px 20px; background-repeat: toista-x; ) .menu-main li (näyttö: inline-block;) .menu-main a (tekstin koristelu: ei mitään; näyttö: inline-block; marginaali: 0 15px; täyte: 10px 30px; kirjasinperhe: "PT Sans Caption", sans-serif; väri: #777777; siirtymä: .3s lineaarinen; sijainti: suhteellinen; .menu -main a:ennen, .menu-main a:after ( sisältö: ""; sijainti: absoluuttinen; yläosa: calc(50% - 3px); leveys: 6px; korkeus: 6px; reunuksen säde: 50%; tausta: #F58262; peittävyys: 0; siirtymä: .5 s helpotus sisään-ulos; ) .menu-main a:before (vasen: 5px;) .menu-main a:after (oikea: 5px;) .menu-main a. current:ennen, .menu-main a.current:after, .menu-main a:hover:ennen, .menu-main a:hover:after (opasiteetti: 1;) .menu-main a.current, .menu- main a:hover (väri: #F58262;) @media(max-width:680px) ( .menu-main li (näyttö: block;) ) 4. Mukautuva valikko nauhassa
• Tehdä työtä
• Noin
• Blogi
• Ottaa yhteyttä
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .ylävalikko ( marginaali: 0 60px; sijainti: suhteellinen; tausta: #5A394E; ruutuvarjo: upotettu 1px 0 0 rgba(255,255,255,.1), upotettu -1px 0 0 rgba(255,255,255,1,5), pxset 0 150px -150px rgba(255,255,255,.12), upotettu -150px 0 150px -150px rgba(255,255,255,.12); ) .top-menu:ennen, .top-menu (absoluuttinen sisältö:a) ; z-indeksi: 2; vasen: 0; leveys: 100 %; korkeus: 3px; ) .ylävalikko:ennen (ylä: 0; reuna-ala: 1px katkoviiva rgba(255,255,255,.2); ) .top- menu:after ( alaosa: 0; reunus yläreunassa: 1px katkoviiva rgba(255,255,255,.2); ) .menu-main ( listatyyli: ei mitään; täyttö: 0; marginaali: 0; tekstin tasaus: keskellä; ) . menu-main:ennen, .menu-main:after ( sisältö: ""; sijainti: absoluuttinen; leveys: 50px; korkeus: 0; yläosa: 8px; reunus-ylä: 18px kiinteä #5A394E; reunus-ala: 18px kiinteä # 5A394E; muunnos: kierrä (360 astetta); z-indeksi: -1; ) .menu-main:before (vasen: -30px; border-left: 12px solid rgba(255, 255, 255, 0); ) .menu- main:after (oikea: -30px; reunus-oikea: 12px solid rgba(255, 255, 255, 0); ) .menu-main li ( näyttö: inline-block; margin-right: -4px; ) .menu-main a ( tekstin koristelu: ei mitään; näyttö: inline-block; täyte: 15px 30px; font-family: "PT Sans Caption", sans-serif; väri: valkoinen; siirtymä: .3s lineaarinen; ) .menu-main a.current, .menu-main a:hover (tausta: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (margin: 0;) .menu-main li ( näyttö: block; margin-right: 0; ) .menu-main:ennen, .menu-main:after (sisältö: ei mitään;) .menu-main a (näyttö: block;) ) 5. Responsiivinen valikko logolla keskellä
• Tehdä työtä
• Noin
• Tarina
• Ottaa yhteyttä
• Myymälä
• Galleria
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( sijainti: suhteellinen; tausta: rgba(34,34,34,.2); ) .menu-main ( listatyyli: ei mitään; marginaali: 0; täyttö: 0; ) .menu-main:after (sisältö: ""; näyttö: taulukko; selkeä: molemmat; ) .left-item (float: left;) .right-item (float: right;).navbar-logo ( sijainti: absoluuttinen; vasen: 50%; alkuun : 50%; muunnos: käännä(-50%,-50%); ) .menu-main a (tekstin koristelu: ei mitään; näyttö: lohko; rivin korkeus: 80px; täyte: 0 20px; fontin koko: 18px ; kirjainväli: 2px; kirjasinperhe: "Arimo", sans-serif; fontin paino: lihavoitu; väri: valkoinen; siirtymä: .3s lineaarinen; ) .menu-main a:hover (tausta: rgba(0, . ; alkuun: 10px; muunnos: translateX(-50%); ) .menu-main li ( float: ei mitään; näyttö: inline-block; ) .menu-main a ( rivin korkeus: normaali; täyte: 20px 15px; fontti -koko: 16px; ) ) @media (max-leveys: 630px) ( .menu-main li (näyttö: block;) ) 6. Responsiivinen valikko logolla vasemmalla
• Tehdä työtä
• Noin
• Tarina
• Myymälä
• Galleria
• Ottaa yhteyttä
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( tausta: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); täyte: 20px; ) .top-menu:after (sisältö: "" ; näyttö: taulukko; selkeä: molemmat; ) .navbar-logo (näyttö: inline-blow li (näyttö: inline-block;).menu-main a ( tekstin koristelu: ei mitään; näyttö: lohko; sijainti: suhteellinen; rivin korkeus: 61 pikseliä; täyte-vasen: 20 kuvapistettä; kirjasinkoko: 18 kuvapistettä; kirjainvälit : 2px; kirjasinperhe: "Arimo", sans-serif; fontin paino: lihavoitu; väri: #F73E24; siirtymä:.3s lineaarinen; ) .menu-main a:before ( sisältö: ""; leveys: 9px; korkeus: 9px; tausta: #F73E24; sijainti: absoluuttinen; vasen: 50%; muunnos: käännä (45 astetta) translateX(6,5px); peittävyys: 0; siirtymä: .3s lineaarinen; ) .menu-main a:hover:ennen (opasiteetti: 1;) @media (max-leveys: 660px) ( .menu-main ( float: ei mitään; täyte-top: 20px; ) .top-menu ( tekstin tasaus: keskellä; täyte: 20px 0 0 0; ) .menu-main a (täyttö: 0 10px;) .menu-main a:before (muunnos: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-main li (näyttö: lohko;) )

Melko yleinen sivustovalikon asettelu, kun sen sisältävä säiliö vie koko sivulla saatavilla olevan leveyden. Tässä tapauksessa ensimmäinen kohde on vasemman reunan vieressä ja viimeinen oikean reunan vieressä, ja kaikkien elementtien välinen etäisyys on yhtä suuri. Tänään kerromme sinulle, kuinka tämä tehdään.

Tarjoamme sinulle esimerkin kumivalikon toteuttamisesta käyttämällä resurssi CSS:ää. Tässä valikossa kohteet sijaitsevat yhdellä rivillä. Javascriptiä ei käytetä. Valikon sisältö sisällytetään tavalliseen luetteloon. Tällaisen valikon pääominaisuus on sen monipuolisuus, joka ilmenee siinä, että sekä kohteiden lukumäärä että pituus voivat olla mitä tahansa.

Miten tämä toteutetaan?

Jokainen ohjelmoija voi tarjota oman tapansa ratkaista tietyn ongelman. Kaikki riippuu hänen mielikuvituksestaan, ammattitaidosta ja kyvyistä. Yleisin ratkaisu tähän ongelmaan on käyttää taulukkoa. Lisäksi monet suosittelevat JavaScriptin käyttöä. Kiirehdin pettymään niille, jotka ehdottavat näyttöominaisuuden käyttöä arvotaulukon tai taulukkosolun kanssa. Tämä menetelmä ei ole riittävän moniselaimen yhteensopiva.

Meidän ratkaisumme

Palvelumme rakentuu vankalle HTML5- ja CSS3-tiedon pohjalle.

Prosessin ydin perustuu tekstin tasausominaisuuteen tasausarvon kanssa. Muistutan niitä, jotka ovat unohtaneet: tämä ominaisuus suuntaa tekstin tasauksen säilön koko leveydelle.

Ratkaisuamme käytettäessä on noudatettava kahta pakollista sääntöä. Ensimmäinen on, että valikkokohdan säilön leveyden tulee olla pienempi kuin teksti. Eli ei yhdellä rivillä. Toinen tärkeä sääntö on, että sanoja venytetään tasaisesti riippumatta siitä, kuuluvatko ne samaan kohtaan vai eivät.

Alla on koodi, joka toimii esimerkkinä kumivalikon luomisesta:

HTML


< ul> < li>< a href= "#" >Koti< li>< a href= "#" >Blogi< li>< a href= "#" >Uutiset< li>< a href= "#" >Suosittu< li>< a href= "#" >Uusia tavaroita

ul ( text- align: justify; overflow: piilotettu; /* poistaa menetelmän sivuvaikutukset */ korkeus: 20px; /* poistaa myös tarpeettomat */ kursori: oletus ; /* asettaa kohdistimen alkuperäisen muodon */ marginaali : 50px 100px 0 100px; tausta: #eee; täyttö: 5px; ) li (näyttö: inline; /* tekee valikon kohdista tekstin */ ) li a (näyttö: inline- block; /* poistaa sananvaihdot valikossa */ väri: #444; ) a : leiju ( väri: #ff0000; ) ul: jälkeen ( /* muodostaa toisen rivin menetelmän laatimiseksi */ sisältö: "1" ; marginaali vasen: 100 %; korkeus: 1px; ylivuoto: piilotettu; näyttö: inline- block; )

Jotta voit työskennellä vanhassa hyvässä Internet Explorerissa, sinun on lisäksi lisättävä seuraava koodi CSS:ään

ul ( z- indeksi: lauseke(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-vasen: 100%; ) * html ul ( /* tarvitaan vain ie6 */ korkeus: 30px; )

Kun olet määrittänyt tarvittavat ominaisuusarvot ja koodin, saamme tämän kumivalikon:



Menetelmän haitat
• Äänenvoimakkuuden koodi
• Kyvyttömyys määrittää elementin aktiivista tilaa luokanvalitsimella. Tämä johtuu sanojen katkeamisesta kappaleissa (jos sellainen on). Ratkaisu tähän ongelmaan on lisätä toinen säilö luetteloelementtien sisään.
• Avattavassa valikossa sinun on mukautettava koodia ylivuodon negatiivisen vaikutuksen vuoksi.
Millä selaimilla se toimii?

6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Jatkamme sarjaa oppitunnilla pudotusvalikoista. Seuraavaksi on tee-se-itse -pudotusvalikko css:n avulla.

Jos päädyit tänne vahingossa tai etsit pudotusvalikon toista toteutusta, suosittelen siirtymään vanhempien osioon.

Tässä osiossa kuvataan vaakasuuntainen pudotusvalikko CSS- ja HTML-kielissä.

Sivulla navigointi:

Niin, tehtävämme:

tee vaakasuora valikko pudotusvalikosta css (ul li -luetteloissa) ilman jQueryä ja Javascriptiä sekä myös ilman taulukoita

koodissa.
Avattava vaakavalikko html

Ensinnäkin, ennen kuin alamme kirjoittaa koodia, meidän on tehtävä html-malli valikkoa varten.

Koska olemme tekemässä universaalia valikkoa, haluan tehdä siitä mahdollisimman samanlaisen kuin WordPress-valikkotulosteen. Mielestäni tämä on yksi yksinkertaisimmista ja monipuolisimmista HTML-valikkokoodeista. Se näyttää tältä:

• Koti
• Meistä
• Palvelumme
  • Palvelumme nro 1
  • Palvelumme nro 2
  • Palvelumme nro 3
  • Palvelumme nro 4
  • Palvelu 5
• Uutiset
• Yhteystiedot

Kuten koodista näet, avattava valikkomme otetaan käyttöön ul- ja li-luetteloissa. Tältä valikko näyttää ilman CSS-tyylejä:

Totta puhuen, se näyttää rumalta, tavalliselta listalta. Seuraavaksi meidän täytyy koristella tämä valikko käyttämällä CSS-tyylejä.

Vaakasuora pudotusvalikko CSS:ssä

CSS-tyylit avattavia valikoita ja muita varten ovat yhtä tarpeellisia kuin ilma. Loppujen lopuksi pudotusvalikon välilehti on tehty pseudo-class:hover perusteella.

Vaakasuuntaista pudotusvalikkoa varten tarvitsemme seuraavat tyylit:

#valikko1( sijainti: suhteellinen; näyttö: lohko; leveys: 100%; korkeus: automaattinen; z-indeksi: 10; ) #menu1 ul( sijainti: suhteellinen; näyttö: lohko; marginaali: 0px; täyte: 0px; leveys: 100 %; korkeus:automaattinen; listatyyli:ei mitään; tausta:#F3A601; ) #menu1 > ul::after( näyttö:lohko; leveys:100%; korkeus:0px; selkeä: molemmat; sisältö:" "; ) # menu1 ul li( sijainti:suhteellinen; näyttö:lohko; kelluva:vasen; leveys:auto; korkeus:auto; ) #menu1 ul li a(näyttö:lohko; täyte: 9px 25px 0px 25px; font-size:14px; font- perhe: Arial, sans-serif; väri: #ffffef; rivin korkeus: 1,3 em; tekstin koristelu: ei mitään; fontin paino: lihavoitu; tekstin muunnos: isot kirjaimet; korkeus: 36 kuvapistettä; laatikon koko: reuna-ruutu; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )

Tämä ei ole vielä loppu, vain osa vaakasuuntaisen päävalikon CSS:ää. Seuraavaksi kirjoitamme tyylejä valikon avattavaan luetteloon:

#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(näyttö:block;)/*tämä rivi toteuttaa pudotusmekanismi*/ #menu1 ul li ul li( float:ei mitään; leveys:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; leveys: 100 %; laatikon koko: reunus-laatikko; reunan yläosa: 1px kiinteä #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: hover( tausta: #FDDC96; väri:#6572BC; )

Siinä se nyt. Itse pudotusmekanismi toteutetaan yhdellä rivillä.

Katso iho tämän valikon avulla:

Riisi. 2 (vaakasuuntainen pudotusvalikko)

Alla on esittely avattavan valikon toiminnasta sekä linkki lähteiden lataamiseen. (Demo avautuu tämän sivun yläreunassa olevasta pudotusvalikosta, ei tarvitse klikata avaa uuteen ikkunaan 🙂 tai hiiren rullaa)

Täysleveä vaakasuuntainen pudotusvalikko

Suurin osa teistä voi moittia minua sanomalla, että yllä näytämäni valikot ovat terveisiä menneisyydestä ja osittain olette oikeassa, vaikka olen nähnyt viime aikoina tällaisia ​​valikoita.

Toivottavasti latasit yllä olevan esimerkin. Html-koodimme pysyy samana, mutta muutamme CSS:n kokonaan. Voit yksinkertaisesti ottaa CSS-koodin täältä ja liittää sen ladattavaan esimerkkiin tai katsoa demotilassa, kuinka se toimii.

#container( leveys: 1000 pikseliä; korkeus: automaattinen; marginaali: 0px automaattinen; täyte-ylä: 10 kuvapistettä; ) #menu1( sijainti: suhteellinen; näyttö: lohko; leveys: 100%; korkeus: automaattinen; z-indeksi: 10; ) #valikko1 ul( sijainti: suhteellinen; näyttö: lohko; marginaali: 0px; täyte: 0px; leveys: 100 %; korkeus: automaattinen; listatyyli: ei mitään; tausta: #F3A601; ) # menu1 > ul( tekstin tasaus: tasaa; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :suhteellinen; näyttö:inline-block; leveys:auto; korkeus:automaattinen; pystytasaus:ylös; tekstin tasaus:vasen; ) #menu1 ul li a( näyttö:lohko; täyte: 9px 35px 0px 35px; font-size :14px; font-family:Arial, sans-serif; väri:#ffffef; rivin korkeus:1,3em; tekstin koristelu: ei mitään; fontin paino: lihavoitu; tekstin muunnos: isot kirjaimet; korkeus: 36px; laatikon koko :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul(position:absolute; top:36px; left :0px; näyttö: ei mitään; leveys:auto; tausta:#EBBD5B; välilyönti: nowrap; ) #menu1 ul li:last-child ul(/*viimeinen kohde liitetään oikeaan reunaan*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this rivi toteuttaa mekanismin dropouts*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; täyte:7px 35px; leveys: 100% ; laatikon koko: reunus-laatikko; reunus yläosa: 1px kiinteä #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a: hover( tausta: #FDDC96; väri:#6572BC; )

Tämä esimerkki eroaa myös ensimmäisestä siinä, että avattava valikko, itse avattava valikko, venyy kaikkien valikon kohteiden leveyden mukaan.

Erittäin pitkille valikon vaihtoehdoille tämä vaihtoehto ei ehkä ole kovin kätevä, koska ne ylittävät rajat. Poista tämä ominaisuus käytöstä etsimällä ominaisuus "white-space:nowrap;" valitsimessa #menu1 ul li ul ja poista se.

Alta voit katsoa demon tai ladata vaakasuuntaisen pudotusvalikon lähteet:

Ilman erottimia tämä valikko näyttää niin hyvältä. Erottimet voidaan lisätä HTML:ään manuaalisesti, mutta jos sinulla on CMS, kuten WordPress, niiden lisääminen manuaalisesti ei ole kovin kätevää.

Vaakasuuntainen pudotusvalikko jakajilla

On olemassa useita kymmeniä vaihtoehtoja raidan (erottimen) lisäämiseen valikkokohtien väliin käyttämällä puhdasta CSS:ää. En kopioi vaihtoehtoja, jotka käyttävät::ennen tai::after tai paljon yksinkertaisempaa border-left, border-right.

On tilanteita, joissa asettelu on rakennettu niin upeasti, että et tule toimeen ilman jqueryä.

HTML-koodimme pysyy samana, sisällytämme vain jQuery-kirjaston ja sitä käyttävän tiedoston aivan alussa:

Heti jälkeen .

Kuten ymmärrät, sinun on luotava tiedosto script-menu-3.js ja lisää tähän pieni koodi:

$(dokumentti).ready(function())( $("#valikko1 > ul > li:not(:last-child)").after(" "); ));

Tällaisen valikon CSS-tyylit tulisi jättää ennalleen, + lisää tämä pala loppuun:

#menu1 ul li.razd( korkeus:28px; leveys:1px; tausta:#ffffff; margin-top:4px; )

Vaakasuuntainen avattava valikko erottimilla jQueryssa näyttää tältä:


Voit katsella esittelytilassa tai ladata vaakasuuntaisen valikkomallin alla:

Tämän ratkaisun edut ovat:

• valikko piirretään dynaamisesti;
• sisennykset erottimesta kappaleeseen ovat samat kaikkialla;
• kauniimpi ja joustavampi muotoilu.
Vaakasuora monitasoinen pudotusvalikko CSS+HTML

Koska puhumme monitasoisista avattavista valikoista, jotka ovat päällä, on luultavasti syytä jakaa ne alaryhmiin:

• vip-tyynyllä, kun osoittaa sivulle
• kolmannen tason ponnahdusvalikosta

Esimerkeissäni näytän monitasoisen CSS-valikon, jossa on 3 tasoa, niin mielestäni ei ole vaikea arvata, mitä on tehtävä.

Monitasoinen avattava valikko, jossa on sivupalkki

Ensin meidän on korjattava hieman HTML-koodiamme. Sinne lisätään pari riviä tasolle 3:

• Koti
• Meistä
• Palvelumme
  • Palvelumme nro 1
    • Lisäys palveluun 1
    • Lisäys palveluun 2
  • Palvelumme nro 2
    • Lisäys palveluun 3
    • Lisäys palveluun 4
  • Palvelumme nro 3
  • Palvelumme nro 4
  • Palvelu 5
• Uutiset
• Yhteystiedot
  • Tiekartta
    • Karttalisäosa
    • Lisäys karttaan 2
  • Palautelomake

#container( leveys: 1000 pikseliä; korkeus: automaattinen; marginaali: 0px automaattinen; täyte-ylä: 10 kuvapistettä; ) #menu1( sijainti: suhteellinen; näyttö: lohko; leveys: 100%; korkeus: automaattinen; z-indeksi: 10; ) #valikko1 ul( sijainti: suhteellinen; näyttö: lohko; marginaali: 0px; täyte: 0px; leveys: 100 %; korkeus: automaattinen; listatyyli: ei mitään; tausta: #F3A601; ) # menu1 > ul( tekstin tasaus: tasaa; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :suhteellinen; näyttö:inline-block; leveys:auto; korkeus:automaattinen; pystytasaus:ylös; tekstin tasaus:vasen; ) #menu1 ul li.razd( korkeus:28px; leveys:1px; tausta:#ffffff; margin-top:4px; ) #menu1 ul li a( näyttö:lohko; täyte: 9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; väri:#ffffef; rivin korkeus:1,3 em; tekstin koristelu: ei mitään; fontin paino: lihavoitu; tekstin muunnos: isot kirjaimet; korkeus: 36 kuvapistettä; laatikon koko: border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a ( tausta: #EBBD5B; väri:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*viimeinen kohde liitetään oikeaan reunaan*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*tämä rivi toteuttaa drop-out-mekanismin* / #menu1 ul li ul li( näyttö:lohko; leveys:auto; ) #menu1 ul li ul li a(näyttö:lohko; tekstin muunnos:ei mitään; korkeus:automaattinen; täyte: 7px 45px; leveys:100%; laatikko -sizing:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( tausta:#FDDC96; väri:#6572BC; ) #menu1 ul li ul li ul(ylä:0px; vasen:100%; näyttö:ei mitään; tausta:#fddc96; ) #menu1 > ul > li:viimeinen lapsi > ul ul(vasen:auto; oikea:100%;) #menu1 ul li ul li ul a(väri:#F38A01;)

Kopioimme tiedostot jQuerylle sellaisina kuin ne olivat edellisestä esimerkistä. Päätin jättää välilehdet, jotta ruokalista näyttäisi ainakin hieman paremmalta. Tietysti voit tehdä sen ilman niitä.

Näin kävi:
Tein 2 skiniä yhdessä näyttääkseni miltä pisara näyttää oikealta ja keskeltä.

Alta voit katsoa demon ja ladata esimerkin:

Monitasoinen avattava valikko, jossa ponnahduspainike on päällä

Otsikossa on vähän öljyä, mutta se toimii, pääasia on koodi.

Tämän esimerkin ydin on luoda täysleveä vaakasuuntainen pudotusvalikko, jossa on täysi leveä avattava valikko + monitasoinen.

En muuta HTML-koodia, se voidaan ottaa edellisestä esimerkistä. Jätämme myös erottimet jQueryyn.

Vain CSS muuttuu kokonaan:

#container( leveys: 1000 pikseliä; korkeus: automaattinen; marginaali: 0px automaattinen; täyte-ylä: 10 kuvapistettä; ) #menu1( sijainti: suhteellinen; näyttö: lohko; leveys: 100%; korkeus: automaattinen; z-indeksi: 10; ) #valikko1 ul( sijainti: suhteellinen; näyttö: lohko; marginaali: 0px; täyte: 0px; leveys: 100 %; korkeus: automaattinen; listatyyli: ei mitään; tausta: #F3A601; ) # menu1 > ul( tekstin tasaus: tasaa; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :suhteellinen; näyttö:inline-block; leveys:auto; korkeus:automaattinen; pystysuuntaus:ylös; tekstin tasaus:vasen; ) #valikko1 > ul > li(sijainti:staattinen;) #menu1 ul li.razd( korkeus :28px; leveys:1px; tausta:#ffffff; margin-top:4px; ) #menu1 ul li a(näyttö:lohko; täyte:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- serif; väri: #ffffef; rivin korkeus: 1,3 em; tekstin koristelu: ei mitään; fontin paino: lihavoitu; tekstin muunnos: isot kirjaimet; korkeus: 36 kuvapistettä; laatikon koko: border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; väri:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; leveys:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:ei mitään; leveys:100%; korkeus:0px; sisältö:" "; ) #menu1 ul li:hover > ul(display:block;)/*tämä rivi toteuttaa drop-out-mekanismin*/ #menu1 ul li ul li( näyttö :lohko; leveys:30%; float:vasen; ) #menu1 ul li ul li a(näyttö:lohko; tekstimuunnos:ei mitään; korkeus:automaattinen; täyte: 7px 45px; leveys:100%; box- sizing:border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background: #FDDC96; väri:#6572BC; ) #menu1 ul li ul li ul( ylhäällä:0px; vasen:100%; näyttö:ei mitään; tausta:#fddc96; z-index:15; ) #menu1 ul li ul li ul li (näyttö: lohko; float:ei mitään; leveys: 100%;) #menu1 ul li ul li ul a(väri:#F38A01; border-top: 1px solid #ffffff; )

Tältä valikko näyttää: Ainoa asia on, että sivustolla on oltava tarpeeksi tilaa, koska oikeanpuoleisessa viimeisessä kohdassa ei ole tilaa pudotusvalikolle. Tämä ongelma voidaan ratkaista käyttämällä:nth-child, mutta en vaivautunut.

Katso esittely vaakasuuntaisesta monitasoisesta avattavasta valikosta:

Kuten olet ehkä huomannut: myös pohjasuutin on täysleveä. Näin tehdään pisaroita useissa lohkoissa.

Siinä kaikki minulle, toivottavasti ainakin yksi esimerkeistäni sopii sinulle. Kiitos huomiostasi.

siitä on hyötyä sekä heille että minulle :)

Jos luit koko postauksen, mutta et löytänyt kuinka tehdä oma vaakasuuntainen pudotusvalikko css:ssä, kysy kommenteissa tai käytä sivustohakua.

Suosittelen myös vierailemaan pääsivulla https://site/vypadayushhee-menu/, sinne on koottu kaikki esimerkit ja tyypit pudotusvalikoista.

Aiheeseen liittyviä julkaisuja
• PHP-sovellusten profilointi ja virheenkorjaus xhprofilla ja FirePHP:llä

  Joskus ViewProfile.swf ja muut SWF -järjestelmävirheet voivat johtua Windowsin rekisteriongelmista. Useat ohjelmat voivat...

• VGP-palvelun etuoikeutettu tilaaja MTS:ssä Tilausten poistaminen käytöstä tekstiviestillä

  Venäjän alueella MTS-verkossa viestintäpalvelut tarjotaan tilaajille kokonaisuudessaan, jos tilin saldo on positiivinen. Vastaavasti,...