Matagal ko nang gustong magsulat ng artikulo kung paano gumawa submenu sa CSS. Maraming tao ang gumagawa nito JQuery at ito ay lumiliko out medyo mahusay, gayunpaman, ang kabuuan pangunahing prinsipyo paglikha submenu sa CSS Sasabihin ko dito. At pagkatapos, simula sa base na ito, mapapabuti mo pa ang submenu.
Dadalhin ko agad CSS code:
* html ulli (
lumutang: kaliwa;
}
* html ulli a (
taas: 1%;
}
ul(
border-bottom: 1px solid #000;
list-style: wala;
margin: 0;
padding: 0;
lapad: 100px;
}
ulli (
posisyon: kamag-anak;
}
ulli a (
display: block;
hangganan: 1px solid #000;
border-bottom: 1px;
padding: 5px;
text-dekorasyon: wala;
}
li ul (
display: wala;
kaliwa: 99px;
posisyon: ganap;
tuktok: 0;
}
li: hover ul (
display: block;
}
Ang pinakamahalagang bagay dito ay ang tagapili " li: hover ul". Sa katunayan, ipinapakita nito ang mga nilalaman ng menu. Bilang default, ito ay " display: wala", at kapag nag-hover ka sa isang menu item, ang submenu ay magiging: " display: block", iyon ay, nakikita. Ito ang pinakamahalagang bagay. Gayundin sa unang dalawang tagapili (na may * ) ay darating CSS hack Para sa I.E., kung hindi, walang gagana sa browser na ito kung wala ito. Lahat ng iba ay hitsura, na, siyempre, ay maaaring baguhin.
dala ko at HTML code:
Bahay
Menu 1
Submenu 1
Submenu 2
Submenu 3
Menu 2
Submenu4
Submenu 5
Submenu 6
Submenu7
Submenu 8
Kung iisipin mong mabuti ang istrukturang ito, magiging napakalinaw ang lahat. Tag ul- lumilikha ng menu. Kung ul ay nasa loob ng isa pa ul, pagkatapos ito ay isa nang submenu. Isang tag li ay responsable para sa isang partikular na item sa menu.
Siyempre, ang menu ay ang pinakasimpleng, kapwa sa mga tuntunin ng lohika at istraktura, at sa mga tuntunin ng disenyo. Siyempre, maaari mong gamitin JQuery gumawa ng isang maayos na pagbubukas. Maaari mo ring baguhin ang disenyo, ngunit ang buong prinsipyo ay mananatiling pareho sa ito submenu na nakasulat sa CSS at HTML.
Ipatupad natin ang ating ideya gamit ang pinakakaraniwan CSS. Sa susunod na artikulo, kung naaalala ko, ilalarawan ko ang parehong epekto gamit jQuery. Ngunit sa ngayon, bumaba tayo sa pagsusuri. ang pamamaraang ito. Ngunit una, iminumungkahi kong tingnan kung ano ang mangyayari sa huli:
Una sa lahat, magsulat tayo HTML ang aming menu code. Ang menu ay magiging simple. Halimbawa, magkakaroon ito ng 2 item, bawat isa ay magkakaroon ng drop-down list na may mga subitem.
Sa tingin ko ang lahat ay malinaw dito, ang pinakasimpleng 2-level na menu. Tulad ng sinabi ko, ang menu ay may dalawang pangunahing mga item, maaari kang magdagdag ng marami hangga't gusto mo kung kinakailangan. Pagkatapos ay kailangan mo lamang magdagdag ng mga istilo na gagawa ng lahat ng mahika :)
#slow_nav > ul( width: 500px; margin:25px auto 0; ) #slow_nav > ul > li(list-style: none; display: inline-block; position:relative; padding:0; ) #slow_nav a(text- palamuti: wala;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: wala; text-align: center: font-size: 15px; tamang operasyon mga animation */ max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear; /* end */ ) #slow_nav li:hover ul( max-height:300px; ) #slow_nav li ul li(background-color:#333; border-bottom:1px solid #888; ) #slow_nav li ul li:last -bata( border-bottom: wala; ) #slow_nav li ul li a( padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li:hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position:relative; ) #slow_nav li ul li:first-child:before( content:""; position:absolute; width:1px; height:1px; border: 5px solid na transparent; Ang CSS code ay hindi maliit, ngunit hindi ito likas na kumplikado. Kung mayroon kang mga kasanayan sa layout, madali mong malaman kung ano at paano. I-highlight ko lang ang ilang mga punto na mahalaga. Ang unang bagay ay ang animation mismo.
Kinakailangang code ang mga komento sa code ay naka-highlight - /* Ang mga linyang ito ay kailangan para gumana nang tama ang animation */. Hindi ka makakapagtanggal mula sa, kung hindi ay hihinto sa paggana ang animation. Sa piraso ng code na ito, una naming itinakda ang taas sa zero pixels - max-height:0px; at itakda ang ari-arian
overflow:hidden;
upang itago ang aming child menu, iyon ay, ang dropdown. Susunod na nag-set up kami ng cross-browser property paglipat, na magsasagawa ng animation.
Webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear;
Narito ang isang larawan. Ang taas ay nakatakda sa isang nakapirming maximum, kung ang taas ng iyong drop-down na menu ay mas malaki, pagkatapos ay baguhin ang halaga sa isang mas malaki. Kung hindi, ang iyong menu ay puputulin sa 300 pixels ang taas.
Ang pamamaraang ito ay maaaring ilapat hindi lamang sa mga self-written na menu kundi pati na rin sa pareho dynamic na menu, na nilikha ng mga sistema ng pamamahala ng nilalaman, halimbawa WordPress. Upang gawin ito kailangan mong mag-tweak ng kaunti ang mga estilo at iyon na. Iyon ay, hindi mo kailangang gamitin ang unang HTML code, mga istilo lamang. Sa mga istilo, kailangan mong palitan ang pangalan ng ID na #slow_nav ng kung ano ang mayroon ka, at maaaring mag-tweak ng iba pang maliliit na bagay. Hindi ko na idedetalye. Kailangan sa bawat okasyon personal na diskarte, so excuse me :) Nagbigay ako ng ideya at paraan, at nasa iyo ang desisyon kung gagamitin ito o hindi.
Iyon lang, salamat sa iyong pansin. 🙂
Mula sa may-akda: Hello sa lahat. Para sa ilang kadahilanan, iniuugnay ng mga webmaster ang mga drop-down na menu sa mga script, ngunit sa mahabang panahon ang naturang pag-navigate ay ganap na ligtas na magagawa sa puro css. Bukod dito, ang gayong menu ay hindi magiging mas masahol pa. Ngayon ay ipapakita ko sa iyo kung paano lumikha ng isang dropdown na menu sa css. Ibabahagi ko, kumbaga, ang recipe.
Lesson plan at layout ng aming menu
Sa pangkalahatan, magpasya muna tayo kung paano tayo gagawa ng menu mismo. Sa html5 sa karaniwang paraan ito ay itinuturing na lumikha nito sa nav container gamit bullet na listahan. Gawin na lang natin. Aalisin namin ang mga marker mamaya gamit ang css, hindi namin kailangan ang mga ito sa menu.
Actually, magsusulat ako kaagad sa html markup na may mga naka-nest na listahan. Iyon ay, ang aming listahan ay magiging dalawang antas - ito ay maglalaman ng iba pang mga listahan. Ibig sabihin, para sa bawat item ay mayroong 1 listahan, na bubuo ng drop-down na menu.
meron mahalagang punto, na maaaring hindi mo kailangang gawing drop-down ang bawat item, ngunit ilan lang. Walang problema, kung gayon sa mga item na walang mga dropdown ay hindi kami gumagawa ng mga nested na listahan.
Sa totoo lang, narito, lahat ng markup:
< nav id = "nav" > < ul > < li > < a href = "#" >Punto 1< / a > < ul class = "second" > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punto 2< / a > < ul class = "second" > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punto 3< / a > < ul class = "second" > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punto 4< / a > < ul class = "second" > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Naiintindihan ko na ito ay napakalaki. Ito ang problema sa mga nested list, na kailangan mong magsulat ng maraming code. Ngunit tandaan ang katotohanan na gumagawa kami ng 4 na pangunahing punto at para sa bawat isa ay magkakaroon ng drop-down na menu.
Sa totoo lang, ibinigay ko sa buong nabigasyon ang nav ng identifier, at lahat ng naka-nest ay naglilista ng class class na pangalawa upang maunawaan na sila ay naka-nest.
Mahusay, handa na ang markup, maaari mong tingnan ang resulta:
Oo, mukhang kakila-kilabot. Ngunit ngayon ay isasama namin sa css trabaho at sa loob lamang ng ilang minuto ay mababago ang ating nabigasyon. Magtrabaho tayo.
Pagsusulat ng mga istilo ng CSS
Ang unang bagay na gagawin ko ay i-reset ang lahat ng padding sa default para sa lahat ng mga elemento. Makakagambala lang sila sa atin; mas mabuting itakda ang mga indent sa ibang pagkakataon, kung saan ito kinakailangan.
*( margin: 0; padding: 0; )
margin: 0; padding: 0; |
#nav( height: 70px; ) #nav ul(list-style: none; )
#nav( taas: 70px; #navul( list-style: wala; |
Ngayon kailangan nating magpasya kung ano ang magiging menu natin. Pahalang o patayo? Iminumungkahi kong gawin muna ang pahalang at makita ang lahat sa halimbawa nito. Upang gawin ito kailangan mong isulat ang mga sumusunod na estilo:
#nav > ul > li( float: left; width: 180px; position: relative; )
#nav > ul > li( lumutang: kaliwa; lapad: 180px; posisyon: kamag-anak; |
Tandaan na gamit ang > sign, tinutukoy namin ang listahan ng mga item na direktang naka-nest sa ul, na direktang naka-nest sa nav. Napakahalaga nito dahil pinipigilan nitong mailapat ang estilo sa mga naka-nest na item sa listahan. Ang katotohanan ay, ayon sa aking ideya, ang mga item sa pangunahing listahan ay matatagpuan nang pahalang, at sa mga nested - patayo.
Ngunit, siyempre, magagawa mo ito nang iba, alinsunod sa iyong ideya. Maaari mong tiyakin na ang lahat ng mga punto ay nasa isang linya.
Anyway, ang code sa itaas ay sana maintindihan mo. Pinipilit nito ang mga pangunahing item sa listahan na itulak sa kaliwa upang lumitaw silang lahat sa parehong linya, kahit na sila ay mga elemento ng block. Binigyan ko rin sila ng tahasang lapad at kamag-anak na pagpoposisyon.
Bakit positioning? Ito ay kinakailangan upang pagkatapos ay ganap na iposisyon ang mga nested na listahan. Kung pinag-aralan mo ang pagpoposisyon sa CSS, malamang na alam mo na kung magbibigay ka ng isang block na kamag-anak na pagpoposisyon, kung gayon ang lahat ng mga elemento dito ay maaaring ganap na maiposisyon sa loob ng partikular na bloke na ito, at hindi ang buong window ng browser.
Pansamantala, narito ang mayroon tayo sa ngayon:
Mula sa screenshot na ito maaari mo nang isipin ang tinatayang resulta. Siyempre, kailangan pa rin nating idisenyo nang maganda ang mga bagay upang ang mga mata ay hindi humingi ng awa kapag tinitingnan ang nabigasyon.
#nav li a( display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; ) #nav li a:hover( background: #2F718E )
#navli a( display: block; background : #90DA93; hangganan : 1px solid #060A13; kulay : #060A13; padding: 8px; text - align : center ; text-dekorasyon: wala; #nav li a:hover( background : #2F718E; |
Una, ang mga link mismo ay kailangang gawing block. Ito ay kinakailangan para gumana ang padding at mailapat nang tama ang lahat ng mga katangian. Susunod, tinukoy ko ang mga kulay ng background, teksto, mga parameter ng frame, panloob na padding at nakasentro na pagkakahanay ng teksto. Sa wakas, binabawi ko ang salungguhit ng mga link.
Ang lahat ng mga parameter na ito ay hindi kailangang tukuyin sa paraang ginawa ko. Maaari mong piliin ang mga kulay nang arbitraryo, gumawa ng ibang frame o hindi gamitin ito sa lahat, ang mga indent ay maaaring mabawasan o tumaas.
Mangyaring tandaan na sa sa kasong ito Hindi namin ginamit ang > sign, kaya malalapat ang mga tinukoy na panuntunan sa lahat ng link, kabilang ang mga nasa nested na talata. Kaya ngayon mayroon kaming mga sumusunod:
Mahusay, ngunit nauunawaan mo na ang mga sub-item ay hindi dapat makita, dapat itong bumukas kapag nag-hover ka gustong item. Kung wala ito, ang aming menu ay mukhang isang mesa. Well, oras na para itago ang mga nested item.
#nav li .second( display: wala; posisyon: absolute; tuktok: 100%; )
#nav li .second( display: wala; posisyon: ganap; tuktok: 100%; |
Una, itinago namin ang ganap na naka-nest na mga listahan. Pangalawa, tanungin natin sila ganap na pagpoposisyon at nangungunang coordinate: 100%. Nangangahulugan ito na malinaw na lalabas ang dropdown na menu sa ibaba ng pangunahing item na kinabibilangan nito, malinaw na nasa 100% ng taas ng item na iyon.
Ngayon nakikita lamang namin ang pangunahing menu sa web page, na kung ano ang kailangan namin.
Ipatupad natin ang dropout
Ano ang natitira para sa amin na gawin ay ang pinakamahalagang bagay - upang mapagtanto ang pagbagsak mismo. Walang kumplikado tungkol dito, tingnan ang code na ito:
#nav li:hover .second( display: block; )
#nav li:hover .second( display: block; |
Ang code na ito ay gagana nang walang kamali-mali. Kapag nag-hover ka sa isang pangunahing item sa menu, makikita ang sublist. Bukod dito, ang listahan lang na naka-nest sa item kung saan nag-hover ang cursor.
Mayroon lamang isang maliit na problema - ang lapad ng mga nested item ay hindi tumutugma sa lapad ng mga pangunahing. Ngunit ito ay napakadaling malutas sa pamamagitan ng pagdaragdag ng naaangkop na mga estilo:
#nav li li(lapad: 180px; )
#navlili( lapad: 180px; |
Iyon lang, nalutas ang problema:
Lahat ay gumagana nang mahusay. Kapag nag-hover ka sa pangunahing item, lilitaw ang isang drop-down na menu na nauugnay dito. Kung ililipat mo ang cursor sa gilid, mawawala ito. Kung ililipat mo mismo ang cursor sa mga nested na item, maaari mong i-click ang mga ito at pumunta sa kinakailangang seksyon site. Kaya, gumawa kami para sa iyo ng napakasimple at magaan na drop-down na menu na walang mga script.
Kino-convert ang menu sa vertical
Well, okay, ganap na naming naisip ang pahalang na nabigasyon, ngunit bukod dito, ang vertical nabigasyon ay madalas na matatagpuan sa mga website at maaari rin itong maging isang drop-down. Sa katunayan, ang pagpapalit ng menu mula sa pahalang patungo sa patayo ay napakadali lamang;
Una, kakailanganin mong alisin ang float:left mula sa pangunahing mga item sa listahan. Ang pag-aari na ito ang nagsisiguro na ang aming mga item ay ipinapakita sa isang linya, ngunit bakit kailangan namin ito kung ang nabigasyon ay dapat na patayo?
Ngayon ang natitira na lang ay baguhin ang mga panuntunan para sa #nav li .second selector, iyon ay, para sa mga nested list, ibig sabihin, kailangan nilang iposisyon nang medyo naiiba. ganito:
#nav li .second( display: wala; posisyon: absolute; kaliwa: 100%; tuktok: 0; )
#nav li .second( display: wala; posisyon: ganap; kaliwa: 100%; tuktok: 0; |
Iyon ay, kinakailangang magrehistro ng dalawang coordinate sa halip na isa. Una, sa kaso ng pahalang na nabigasyon, sinabi ko na, gaya ng binalak, ang mga submenu na item ay dapat ipakita sa ilalim ng mga pangunahing item. Sa kaso ng isang vertical na menu, hindi ito angkop - ang mga item ay dapat na ipinapakita sa gilid.
Samakatuwid, binago namin ang tuktok: 100% sa kaliwa: 100%. Bilang karagdagan, kailangan din natin ang nangungunang coordinate. Itinakda namin ito sa 0 upang ang submenu ay nasa parehong antas ng item na katumbas nito.
Iyon lang, ngayon ang lahat ay gumagana ayon sa nararapat. Maaari mo itong subukan. Tulad ng nakikita mo, hindi ako nagsinungaling nang sabihin ko na kailangan ko lamang na muling isulat ang ilang linya ng code.
Pahalang na menu na may ilang antas
Gamit ang halos parehong diskarte, maaari kang lumikha ng higit pang mga antas ng menu kung kinakailangan. Halimbawa, gumawa tayo ng listahan para sa ikaapat na item ng pangunahing menu, na ilalagay sa isa sa mga sub-item.
Gawain
Gumawa ng dropdown na menu gamit ang CSS at HTML na mga tool.
Solusyon
Una, gumawa tayo ng isang listahan, ilagay ito nang pahalang, at i-istilo ang hitsura nito. Ito ang magiging pangunahing menu, at pagkatapos ay gagawa kami ng drop-down na menu para sa mga item nito.
Nagtapos kami sa isang listahan tulad nito:
Larawan 1. Gawaing paghahanda.
Pakitandaan: nagbabago ang istilo ng link kapag nag-hover ka dito. Ito ay ipinatupad gamit ang :hover pseudo-class. Ang pseudo-class na ito ay tumutukoy sa istilo ng isang elemento kapag ang cursor ay nag-hover sa ibabaw nito nang hindi pinindot ang pindutan ng mouse. Kung mayroong isang pindutan na pindutin, ito ay isa pang pseudo-class.
Ngayon ay magpatuloy tayo sa paglutas ng ating problema. Gumawa tayo ng drop-down na menu para sa item na "Mga Serbisyo," magdagdag ng mga drop-down na seksyon: "Buy", "Sell", "Exchange". Ang mga item na ito ay isang hiwalay na listahan na naka-nest sa isang tag
Gawin natin ang listahang ito at magdagdag ng mga istilong naglalarawan sa hitsura nito.
Ngayon mayroon kaming listahang ito:
Larawan 2. Gawaing paghahanda. Siyempre, hindi ito ang kailangan natin. Bilang default, ang listahang ito ay dapat na nakatago at makikita lamang sa mouseover. Maaari mong itago ang isang elemento gamit ang panuntunan ng panuntunan (display : none ). At kapag nag-hover ka sa cursor, kailangan mong i-activate ito sa pamamagitan ng paggawang makikita muli ang mga panuntunan (display: inline-block).
Ngayon ang aming menu ay nawawala at lumilitaw, ngunit kailangan namin itong lumitaw sa itaas ng mga umiiral na elemento nang hindi binabago ang na itinatag na mga hangganan umiiral na mga bloke.
Upang maipakita ang isang elemento nang hindi naaapektuhan ang pagpapakita ng iba pang mga elemento, dapat itong nakaposisyon na may halagang absolute .
Ang ginawa namin dito:
- panuntunan sa pagpoposisyon (posisyon : kamag-anak ;). Ginagawa ito upang ang pag-uulat ng ganap na mga coordinate sa pagpoposisyon ng nested na listahan ay magsisimula sa kaliwang sulok sa itaas ng bloke na iyon, at hindi sa sulok ng screen.
- Idinagdag sa elemento ng magulang
- panuntunan (taas : 20px ;). Itinakda namin ang taas nito upang gawing mas maginhawang iposisyon ang drop-down na listahan.
- Itakda ang absolute positioning (position : absolute ;) sa dropdown list at itakda ang mga coordinate: itaas at kaliwa .
Gumagana na ngayon nang tama ang dropdown na menu.
Larawan 3. Huling bersyon. Siyempre, dito maaari mong gawing mas maganda ang drop-down na menu, ngunit para sa mga layunin ng aming gawain, ito ay sapat na.
Nalutas ang problema sa edukasyon. paalam.
Mikhail Sab, 09/20/2014 - 12:28
Kahit papaano ay hindi nakikita ang komento ko - kino-duplicate ko ito:
===========
Salamat, ngunit para sa akin (sa ilalim ng Int.Expl-8) ang menu ay hindi bumababa. Yung. Ang linyang "ul. nav li:hover ul (display: block;)"
Sabihin mo sa akin, ano ang problema?
May mga kagustuhan para sa pagtatanghal ng materyal:
Mainam na ipaliwanag sa linyang ito (ul.aaaaa li:hover ul (display: block;)) kung aling bahagi nito ang responsable para sa "drop-down ng menu", at aling bahagi ang responsable para sa pagtatago ng mga item sa mas malalim antas ng pugad
Masarap magbigay ng komento sa bawat linya sa mga halimbawa tungkol sa kung ano ang ginagawa nito.
Sa partikular, hindi malinaw kung bakit ang linya "
