Se on usein tarpeen tehdä vaakasuuntainen 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Ä
Kotiin
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:
/* sivureunusten tyylit */ .borderLeftSecond, .borderRightSecond ( näyttö: ei mitään; sijainti: absoluuttinen; leveys: 1px; korkeus: 47px; taustaväri: #9fbb62; yläosa: 0px; z-indeksi: 1000; ) /* reunojen absoluuttiset poikkeamat */ .borderLeftSecond (vasen: 0px; , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover) (esim. 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ö: lohko; )
Siinä se!
Saimme erinomaisen menun koko ylälohkon leveydelle! Kohteet eivät mene päällekkäin, kun viet hiiren osoitinta, ja asettelu ei hyppää.
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, kun CSS-apua resurssillesi. 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ään. 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=
"#"
>Kotiin<
li><
a href=
"#"
>Blogi<
li><
a href=
"#"
>Uutiset<
li><
a href=
"#"
>Suosittu<
li><
a href=
"#"
>Uusia kohteita
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ö: rivinvaihto; /* poistaa sananvaihdot valikosta; 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;
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:
luoda vaakasuuntaisen valikon pudotusvalikosta css lista(ul li -luetteloissa) ilman jQueryä ja Javascriptiä ja myös ilman taulukoita
koodissa. Avattava vaakavalikko html
Ensinnäkin, ennen kuin alamme kirjoittaa koodia, meidän on tehtävä valikkoon html-malli.
Koska olemme tekemässä universaalia valikkoa, haluan tehdä siitä mahdollisimman samanlaisen kuin mahdollista WordPress-valikko. Mielestäni tämä on yksi yksinkertaisimmista ja universaali HTML valikkokoodit. Se näyttää tältä:
Kotiin
Tietoja 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:
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: border-box: 1px solid #ffffff ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li 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.
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 puhtaan CSS:n avulla. 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:
Välittömästi sen 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;
) #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; tekstimuunnos: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ä
En muuta HTML-koodia, se voidaan ottaa edellisestä esimerkistä. Jätämme myös erottimet jQueryyn.
) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; leveys:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; leveys:100% content:" " ) #menu1 ul li:hover > ul(display:block;)/*tämä rivi toteuttaa dropout-mekanismin*/ #menu1 ul li (näyttö: leveys: 30%; float:left ) laatikko ) #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 float: ei mitään;) #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.
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.
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.
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 sijaitsevat vaakasuorassa, jossa oikea puoli niiden väliin lisätään 0,4 em:n väli (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ä
Riisi. 2 (vaakasuuntainen pudotusvalikko)
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ä.
