Olen juba ammu tahtnud kirjutada artiklit selle valmistamise kohta alammenüü CSS-is. Paljud inimesed teevad seda JQuery ja päris hästi tuleb välja aga kogu loomise aluspõhimõte alammenüü CSS-is Ma avaldan selle siin. Ja siis, alustades sellest baasist, saate alammenüüd veelgi täiustada.
Ma toon selle kohe CSS-kood:
* html ulli (
ujuk: vasak;
}
* html ulli a (
kõrgus: 1%;
}
ul(
border-bottom: 1px solid #000;
loendi stiil: puudub;
marginaal: 0;
polsterdus: 0;
laius: 100 pikslit;
}
ulli (
asend: suhteline;
}
ulli a (
kuva: plokk;
ääris: 1px solid #000;
ääris-alumine: 1px;
polster: 5px;
tekst-kaunistus: puudub;
}
li ul (
kuva: puudub;
vasakul: 99 pikslit;
positsioon: absoluutne;
ülemine: 0;
}
li:hover ul (
kuva: plokk;
}
Kõige tähtsam on siin valija " li:hover ul". Tegelikult näitab see menüü sisu. Vaikimisi on see " ekraan: puudub" ja kui hõljutate kursorit menüüüksuse kohal, muutub alammenüüks: " kuva: plokk" ehk nähtav. See on kõige tähtsam. Ka kahes esimeses valijas (mis * ) on tulemas CSS-i häkkimine Sest I.E., muidu ei tööta selles brauseris midagi ilma selleta. Kõik muu on välimus, mida saab muidugi muuta.
Toon ja HTML kood:
Kodu
Menüü 1
Alammenüü 1
Alammenüü 2
Alammenüü 3
Menüü 2
Alammenüü4
Alammenüü 5
Alammenüü 6
Alammenüü7
Alammenüü 8
Kui selle struktuuri üle hoolikalt mõelda, saab kõik väga selgeks. Tag ul- koostab menüü. Kui ul on teise sees ul, siis on see juba alammenüü. Silt li vastutab konkreetse menüüpunkti eest.
Menüü on muidugi kõige lihtsam, nii loogiliselt ja ülesehituselt kui ka disainilt. Muidugi võite kasutada JQuery teha sujuv ava. Saate muuta ka disaini, kuid kogu põhimõte jääb samaks, mis selles CSS-is ja HTML-is kirjutatud alammenüü.
Viime oma idee ellu, kasutades kõige tavalisemat CSS. Järgmises artiklis, kui mäletan, kirjeldan sama efekti kasutades jQuery. Kuid praegu alustame selle meetodi analüüsimist. Kuid kõigepealt soovitan vaadata, mis lõpuks juhtub:
Kõigepealt kirjutame HTML meie menüü kood. Menüü saab olema lihtne. Näiteks on sellel 2 üksust, millest igaühel on alamüksustega rippmenüü.
Ma arvan, et siin on kõik selge, kõige lihtsam 2-tasemeline menüü. Nagu öeldud, on menüüs kaks põhilist punkti, vajadusel saab lisada nii palju kui soovid. Siis peate lihtsalt lisama stiile, mis teevad kõik võlu :)
#slow_nav > ul( laius: 500px; margin:25px auto 0; ) #slow_nav > ul > li( list-style: none; display: inline-block; position:relative; polster:0; ) #slow_nav a(text- dekoratsioon:puudub;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: none: font-size: 15px /* Need read on vajalikud animatsiooni korrektseks toimimiseks ; -moz-transition:max-height 0,4s lineaarne; 1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a ( polster:5px 12px; color:#ffff; display:block; ) #slow_nav li ul li :hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position: suhteline; ) #slow_nav li ul li:first-child:before( sisu:""; asukoht: absoluutne; laius: 1 pikslit; kõrgus: 1 pikslit; ääris: 5 pikslit, läbipaistev; ääris-alumine-värv: # 333; vasak: 10 pikslit; ülemine :-10px)
CSS-kood ei ole väike, kuid see pole oma olemuselt keeruline. Kui teil on küljendusoskused, saate hõlpsalt aru saada, mis ja kuidas. Toon välja vaid mõned olulised punktid.
Esimene asi on animatsioon ise. Vajalik kood on koodi kommentaarides esile tõstetud - /* Neid ridu on vaja animatsiooni korrektseks toimimiseks */. Kustutada ei saa, vastasel juhul lakkab animatsioon töötamast. Selles kooditükis määrasime algselt kõrguseks null pikslit -
maksimaalne kõrgus: 0 pikslit; ja määrake vara ületäitumine:varjatud; et peita meie lastemenüü ehk rippmenüü. Järgmisena seadistame brauseriülese atribuudi üleminek, mis esitab animatsiooni.
Veebikomplekti üleminek: max-kõrgus 0,4s lineaarne; -moz-üleminek:max-kõrgus 0,4s lineaarne; üleminek:max-kõrgus 0,4s lineaarne;
Siin saate muuta ainult animatsiooni aega. Hetkel on kellaajaks seatud 0,4 sekundit. Kohe pärast animatsiooni seadistamist lisati atribuut uue kõrguse määramiseks peamenüü üksuste kohal hõljutades:
#slow_nav li:hover ul( max-height:300px; )
Siin on pilt. Kõrgus on seatud fikseeritud maksimumile. Kui teie rippmenüü kõrgus on suurem, muutke väärtust suuremaks. Vastasel juhul kärbitakse teie menüü 300 piksli kõrguseks.
Seda meetodit saab rakendada mitte ainult ise kirjutatud menüüde puhul, vaid ka samade dünaamiliste menüüde puhul, mida loovad näiteks sisuhaldussüsteemid WordPress. Selleks peate stiile veidi muutma ja ongi kõik. See tähendab, et te ei pea kasutama esimest HTML-koodi, vaid ainult stiile. Stiilides peate ID-nime #slow_nav asendama olemasolevaga ja võib-olla mõnda muud pisiasja näpistama. Ma ei hakka detailidesse laskuma. Iga juhtum nõuab personaalset lähenemist, nii et vabandage :) Ma andsin idee ja meetodi ning teie otsustada, kas seda kasutada või mitte.
See on kõik, tänan tähelepanu eest. 🙂
Autorilt: Tere kõigile. Millegipärast seostavad veebimeistrid rippmenüüd skriptidega, kuid pikka aega saab sellist navigeerimist teha täiesti lihtsalt puhta CSS-i abil. Pealegi pole selline menüü halvem. Täna näitan teile, kuidas luua css-is rippmenüüd. Jagan nii-öelda retsepti.
Tunniplaan ja meie menüü ülesehitus
Üldiselt otsustame kõigepealt, kuidas me menüü ise koostame. HTML5-s on tavaline viis selle loomiseks navigeerimiskonteineris täpploendi abil. Teeme just seda. Eemaldame markerid hiljem css-i abil, me ei vaja neid menüüs üldse.
Tegelikult kirjutan kohe märgistuse pesastatud loenditega html-is. See tähendab, et meie loend on kahetasandiline - see sisaldab muid loendeid. Nimelt on iga kauba kohta 1 nimekiri, millest saab rippmenüü.
Siin on oluline punkt, milleks on see, et võib-olla ei pea te rippmenüüd tegema iga üksust, vaid ainult mõnda. Pole probleemi, ilma rippmenüüdeta üksustes me lihtsalt ei loo pesastatud loendeid.
Tegelikult siin see on, kogu märgistus:
< nav id = "nav" > < ul > < li > < a href = "#" >Lõige 1< / a > < ul class = "second" > < li > < a href = "#" >Alapunkt< / a > < / li > < li > < a href = "#" >Alapunkt< / a > < / li > < li > < a href = "#" >Alapunkt< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punkt 2< / a > < ul class = "second" > < li > < a href = "#" >Alapunkt< / a > < / li > < li > < a href = "#" >Alapunkt< / a > < / li > < li > < a href = "#" >Alapunkt< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punkt 3< / a > < ul class = "second" > < li > < a href = "#" >Alapunkt< / a > < / li > < li > < a href = "#" >Alapunkt< / a > < / li > < li > < a href = "#" >Alapunkt< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punkt 4< / a > < ul class = "second" > < li > < a href = "#" >Alapunkt< / a > < / li > < li > < a href = "#" >Alapunkt< / a > < / li > < li > < a href = "#" >Alapunkt< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Ma saan aru, et see on tohutu. See on pesastatud loendite probleem, et peate kirjutama palju koodi. Kuid pidage meeles, et teeme 4 põhipunkti ja igaühe jaoks on rippmenüü.
Tegelikult andsin kogu navigeerimisele navi identifikaatori ja kõikidele pesastatud loenditele stiiliklassi sekund, et mõista, et need on pesastatud.
Suurepärane, meil on märgistus valmis, saate tulemust vaadata:
Jah, see näeb kohutav välja. Kuid nüüd lubame css-i ja mõne minuti pärast muudetakse meie navigeerimist. Teeme tööd.
CSS-stiilide kirjutamine
Esimese asjana lähtestan kõikide elementide polsterduse vaikeseadetele. Need jäävad meie teele, parem on hiljem ise taane seada, kui see on vajalik.
*( veeris: 0; täidis: 0; )
marginaal: 0; polsterdus: 0; |
#nav( kõrgus: 70 pikslit; ) #nav ul( loendi stiil: puudub; )
#nav( kõrgus: 70 pikslit; #navul( list - style : none ; |
Nüüd peame otsustama, milline on meie menüü. Horisontaalne või vertikaalne? Soovitan kõigepealt teha horisontaalne ja vaadata kõike selle näites. Selleks peate kirjutama järgmised stiilid:
#nav > ul > li( ujuv: vasak; laius: 180 pikslit; asukoht: suhteline; )
#nav > ul > li( ujuk: vasak; laius: 180 pikslit; asend: suhteline; |
Pange tähele, et märki > kasutades viitame loendiüksustele, mis on otseselt pesastatud ul-i, mis on otse pesastatud nav-i. See on väga oluline, kuna see takistab stiili rakendamist pesastatud loendiüksustele. Fakt on see, et minu idee kohaselt asuvad põhiloendis olevad üksused horisontaalselt ja pesastatud - vertikaalselt.
Kuid loomulikult saate seda teha teisiti, vastavalt oma ideele. Saate veenduda, et kõik punktid on ühel real.
Igatahes, ülaltoodud kood loodan, et saate aru. See sunnib põhiloendi üksusi vasakule lükkama, nii et need kõik ilmuksid samale reale, kuigi need on plokkelemendid. Andsin neile ka selge laiuse ja suhtelise asukoha.
Miks positsioneerimine? See on vajalik pesastatud loendite absoluutseks positsioneerimiseks. Kui olete CSS-is positsioneerimist õppinud, siis ilmselt teate, et kui anda plokile suhteline positsioneerimine, saab kõik selles olevad elemendid paigutada absoluutselt sellesse konkreetsesse ploki, mitte kogu brauseriaknasse.
Seni on meil seni tehtud järgmist:
Sellelt ekraanipildilt võite juba ette kujutada ligikaudset tulemust. Muidugi peame esemed ikka ilusti kujundama, et silmad navigeerimist vaadates armu ei anuks.
#nav li a(ekraan: plokk; taust: #90DA93; ääris: 1px tahke #060A13; värv: #060A13; polster: 8px; teksti joondamine: keskel; teksti kaunistamine: puudub; ) #nav li a:hover( taust: #2F718E )
#navli a( kuva: plokk; taust : #90DA93; ääris : 1px solid #060A13; värv : #060A13; polster: 8px; tekst - joondus : keskel ; tekst - kaunistus : puudub ; #nav li a:hover( taust : #2F718E; |
Esiteks tuleb lingid ise blokeerida. See on vajalik polsterduse toimimiseks ja kõigi omaduste õigeks rakendamiseks. Järgmisena täpsustan tausta värvid, teksti, raami parameetrid, sisemise polsterduse ja tsentreeritud teksti joonduse. Lõpuks võtan tagasi linkide allajoonimise.
Kõiki neid parameetreid ei pea täpsustama nii, nagu mina tegin. Värve saab suvaliselt valida, teha teistsuguse raami või üldse mitte kasutada, taandeid saab vähendada või suurendada.
Pange tähele, et antud juhul me ei kasutanud märki >, seega kehtivad ülaltoodud reeglid kõikidele linkidele, sealhulgas pesastatud lõikudele. Nüüd on meil järgmised asjad:
Suurepärane, kuid mõistate, et alamüksused ei tohiks olla nähtavad, need peaksid avanema, kui hõljutate kursorit soovitud üksuse kohal. Ilma selleta näeb meie menüü välja nagu tabel. Noh, on aeg peita pesastatud üksused.
#nav li .second(kuva: puudub; asukoht: absoluutne; ülemine: 100%; )
#nav li .second( kuva: puudub; positsioon: absoluutne; ülemine: 100%; |
Esiteks peidame täielikult pesastatud loendid. Teiseks anname neile absoluutse positsioneerimise ja ülemise koordinaadi: 100%. See tähendab, et rippmenüü kuvatakse selgelt selle põhiüksuse alla, kuhu see kuulub, selgelt 100% selle üksuse kõrgusest.
Nüüd näeme veebilehel ainult peamenüüd, mida me vajame.
Rakendame väljalangemise
Meil jääb üle kõige tähtsam – realiseerida kukkumine ise. Selles pole midagi keerulist, vaadake seda koodi:
#nav li:hover .second(kuva: block; )
#nav li:hover .second( kuva: plokk; |
See kood töötab laitmatult. Kui hõljutate kursorit peamenüü üksuse kohal, muutub alamloend nähtavaks. Lisaks sellele ainult loend, mis on pesastatud üksuses, mille kohal kursor hõljub.
On ainult üks väike probleem – pesastatud üksuste laius ei ühti peamiste üksuste laiusega. Kuid seda saab väga lihtsalt lahendada sobivate stiilide lisamisega:
#nav li li( laius: 180 pikslit; )
#navlili( laius: 180 pikslit; |
See on kõik, probleem lahendatud:
Kõik töötab ideaalselt. Kui hõljutate kursorit põhiüksuse kohal, kuvatakse sellele vastav rippmenüü. Kui liigutate kursori küljele, siis see kaob. Kui liigutate kursori pesastatud üksustele, saate neil klõpsata ja minna saidi soovitud jaotisesse. Seetõttu oleme loonud teie jaoks väga lihtsa ja kerge rippmenüü, millel puuduvad skriptid.
Menüü teisendamine vertikaalseks
Noh, okei, me oleme horisontaalse navigeerimise täiesti välja mõelnud, kuid lisaks sellele leidub veebisaitidel väga sageli vertikaalset navigeerimist ja see võib olla ka rippmenüü. Tegelikult on menüü muutmine horisontaalsest vertikaalseks väga lihtne, peame muutma vaid paari koodirida.
Esiteks peate põhiloendi üksustest eemaldama float:left. Just see omadus tagab, et meie üksused kuvatakse ühel real, kuid miks me seda vajame, kui navigeerimine peab olema vertikaalne?
Nüüd jääb üle vaid muuta #nav li .second valija ehk pesastatud loendite reegleid, nimelt tuleb need veidi teistmoodi paigutada. Nagu nii:
#nav li .second( kuva: puudub; asukoht: absoluutne; vasak: 100%; ülemine: 0; )
#nav li .second( kuva: puudub; positsioon: absoluutne; vasakule: 100%; ülemine: 0; |
See tähendab, et ühe koordinaadi asemel on vaja registreerida kaks. Esiteks ütlesin horisontaalse navigeerimise puhul, et plaanipäraselt tuleks põhipunktide all kuvada alammenüü punkte. Vertikaalse menüü puhul see ei sobi – üksused tuleks kuvada küljel.
Seetõttu muudame ülaosa: 100% vasakule: 100%. Lisaks vajame ka ülemist koordinaati. Seadsime selle väärtuseks 0, et alammenüü oleks samal tasemel kui üksus, millele see vastab.
See on kõik, nüüd töötab kõik nii nagu peab. Saate seda testida. Nagu näete, ma ei valetanud, kui ütlesin, et pean vaid paar rida koodi ümber kirjutama.
Horisontaalne mitme tasemega menüü
Sama lähenemisviisi kasutades saate vajadusel luua rohkem menüütasemeid. Näiteks loome peamenüü neljanda üksuse jaoks loendi, mis pesastatakse ühte alamüksusesse.
Ülesanne
Looge rippmenüü, kasutades CSS-i ja HTML-i tööriistu.
Lahendus
Kõigepealt loome loendi, asetame selle horisontaalselt ja kujundame selle välimuse stiili. Sellest saab peamenüü ja seejärel koostame selle üksuste jaoks rippmenüü.
Saime sellise nimekirja:
Joonis 1. Ettevalmistustööd.
Pange tähele: lingi stiil muutub, kui hõljutate kursorit selle kohal. Seda rakendatakse pseudoklassi :hover abil. See pseudoklass määrab elemendi stiili, kui kursor liigutatakse selle kohal ilma hiirenuppu vajutamata. Kui on nupuvajutus, on see teine pseudoklass.
Liigume nüüd oma probleemi lahendamise juurde. Teeme üksuse "Teenused" jaoks rippmenüü, lisame rippmenüü jaotised: "Osta", "Müün", "Vaheta". Need üksused on eraldi loend, mis on pesastatud märgendisse
Loome selle loendi ja lisame selle välimust kirjeldavad stiilid.
Nüüd on meil selline nimekiri:
Joonis 2. Ettevalmistustööd. Muidugi pole see see, mida me vajame. Vaikimisi peaks see loend olema peidetud ja muutuma nähtavaks ainult hiirekursori hõljutamisel. Elemendi saab peita reegli reegli abil (kuva : puudub). Ja kui hõljutate kursorit, peate selle aktiveerima, muutes reeglid uuesti nähtavaks (kuva: inline-block).
Nüüd muutub meie menüü sisse ja välja, kuid me peame seda näitama olemasolevate elementide kohal, muutmata olemasolevate plokkide juba seatud piire.
Selleks, et elementi saaks kuvada ilma teiste elementide kuvamist mõjutamata, peab see olema positsioneeritud absoluutväärtusega .
Mida me siin tegime:
- positsioneerimisreegel (positsioon : suhteline ;). Seda tehakse nii, et pesastatud loendi absoluutsete positsioneerimiskoordinaatide aruandlus algab selle ploki vasakust ülanurgast, mitte ekraani nurgast.
- Lisatud emaelemendile
- reegel (kõrgus: 20 pikslit ;). Seadsime selle kõrguse, et ripploendit oleks mugavam paigutada.
- Seadke ripploendisse absoluutne positsioneerimine (positsioon : absoluutne ;) ja määrake koordinaadid: ülemine ja vasakpoolne .
Rippmenüü töötab nüüd õigesti.
Joonis 3. Lõplik versioon. Muidugi saate siin muuta rippmenüü ilusamaks, kuid meie ülesande jaoks sellest piisab.
Haridusprobleem on lahendatud. Hüvasti.
Mihhail, 20.09.2014 - 12:28
Millegipärast ei ole mu kommentaar nähtav - ma dubleerin selle:
===========
Tänan, aga minu jaoks (Int.Expl-8 all) menüü ei rippu. Need. Rida "ul. nav li:hover ul (kuva: blokeeri;)"
Ütle mulle, milles asi?
Soovid materjali esitamiseks:
Oleks tore selles reas (ul.aaaaa li:hover ul (kuva: plokk;)) selgitada, milline osa sellest vastutab "menüü rippmenüü" eest ja milline osa vastutab üksuste peitmise eest sügavamale pesitsusaste
Hea oleks anda näidete igale reale kommentaar selle kohta, mida see teeb.
Eelkõige pole selge, miks rida "
