Adaptive menu gamit ang CSS. Paano gumawa ng isang goma na tumutugon na menu gamit ang css

Ang isang adaptive na menu para sa isang modernong website ay hindi lamang isang luho, ngunit isang pangangailangan. Ang kasaganaan ng mga modernong device ay nangangailangan ng mga webmaster na lumikha ng isang layout na lohikal na ipinapakita sa mga screen ng iba't ibang mga resolution. At sa ilang mga kaso, ang paglikha ng isang tumutugon na menu ay mas mahirap kaysa sa disenyo mismo, kaya naman kailangang isaalang-alang ang isyung ito.

Malaking screen na menu

Upang maunawaan ang pangkalahatang layout ng isang menu, kakailanganin mo munang lumikha ng istraktura ng menu sa HTML at i-istilo ito gamit ang CSS. Pagkatapos, batay sa natanggap na materyal, maaari mong pagbutihin ang adaptive template. Kaya ang istraktura ng HTML ay magiging ganito.

Dalawang-item na menu sa HTML

Kakailanganin mong magdagdag ng mga istilo ng CSS sa resultang menu. Dapat nilang ipahiwatig ang laki at kulay ng font, background, at pagpoposisyon ng block.

Proseso ng onboarding

Ang paglikha ng simpleng pag-andar para sa isang regular na screen ng computer ay simple, at ito ay makikita sa halimbawa. Ang isang adaptive na menu para sa isang site ay nilikha lamang kapag mayroong isang bagay upang gumana, iyon ay, kapag naidagdag na ang mga item sa nabigasyon. Ang pinakamainam na opsyon sa menu para sa mga mobile device at tablet ay ang icon ng hamburger - isang parisukat na patlang kung saan ang tatlo ay iguguhit Kapag pinindot, lahat ng mga item sa menu ay bubukas. Upang lumikha ng naturang nabigasyon, kailangan mong magdagdag ng mga tag sa HTML na dokumento.

Susunod, kakailanganin mong magdagdag ng mga naaangkop na istilo sa mga tag na ito upang lumikha ng isang visual na nakakaakit at nababasa na menu. Bilang karagdagan sa visual na disenyo ng nabigasyon at icon ng menu, kailangan mong idisenyo ang posisyon ng imahe nang naaayon. Kaya, ang condition menu_icon span:nth-child(1) (top:0 px) ay ipinakilala. Iyon ay, ang indentation ng imahe mula sa itaas ay magiging zero pixels. Katulad nito, kailangan mong magtakda ng mga halaga para sa iba pang mga panig.

Ngayon ang tumutugon na menu ay halos handa na. Ito ay nagkakahalaga ng pagbibigay pansin sa kundisyon: Bilang default, ang icon ng menu ay hindi makikita sa site, kaya kailangan mong magdagdag ng karagdagang klase na may sumusunod na kundisyon sa dokumento ng CSS: .menu__icon (display: inline-block;) . Gagawin nitong nakikita ang nabigasyon.

Bilang karagdagan, kailangan mong magdagdag ng isang gawain sa cascading style sheet na magtatago ng mga talata at subparagraph kung kinakailangan. Upang gawin ito, kailangan mong magtakda ng nakapirming posisyon ng menu sa CSS, idisenyo ang display at pagkakahanay. Nakatago ang mga item gamit ang mga kundisyon na overflow:auto; opacity:0; z-index:1000. Maaari mo ring idagdag ang klase ng menu__links-item, na magsasaad ng istilo para sa mga item sa menu, ngunit ito ay sa kahilingan ng developer.

Finishing touch

Kaya, halos kumpleto na ang CSS responsive menu. Upang ito ay maipakita kapag nag-click ka sa icon, kailangan mong magdagdag ng mga function. Para sa pagiging simple, mas mainam na gumamit ng jQuery, ngunit kung gusto mo, maaari kang lumikha ng purong JavaScript. Sa parehong mga kaso ang parehong kundisyon ay gagamitin:

(function($)($(function() $(".menu__icon").on("click", function() $(this).closest(".menu").toggleClass("menu_state_open");)) ;));))(jQuery).

Tinatapos nito ang layout ng adaptive navigation. Ngunit ito ay isa lamang sa ilang mga opsyon para sa paglikha ng ganitong uri ng pag-andar, kaya sulit na isaalang-alang ang iba. Kahit iilan lang sa kanila.

Nang walang pagbabago ng mga pamantayan

Inaasahan ng karamihan ng mga gumagamit ng Internet na makakita ng navigation bar sa tuktok ng site. Ito ay naging isang uri ng pamantayan, kaya ang adaptive horizontal menu ay dapat magkaroon ng isang disenteng hitsura. Magagawa ito gamit ang CSS, pareho sa mga halimbawang ibinigay sa itaas, at sa pamamagitan ng pagkonekta ng script ng handler. Sa pangkalahatan, ang paggawa ng tumutugon na menu ay binubuo ng 3 hakbang:

Pagsusulat ng mga HTML tag

Pag-istilo sa mga ito gamit ang Cascading Style Sheets (CSS).

Pag-angkop ng isang umiiral na menu.

Naturally, ang lahat ng mga site ay may sariling mga menu bar, ngunit kung ang mapagkukunan ay nilikha sa isang CMS, kung gayon magiging mas madaling lumikha ng isang bagong adaptive na menu.

Bootstrap

Ang paglikha ng tumutugon na pag-andar ay hindi isang seryosong problema kung gumagamit ka ng mga tool sa Bootstrap. Ang mga template para sa paglikha ng isang pahalang na menu ay inilatag na dito. Kailangan mo lang kumonekta sa bootstrap.js file resource. Sa tulong ng balangkas na ito, nagkakaroon ng pagkakataon ang webmaster na lumikha ng nabigasyon ng anumang kumplikado. Ang isang tumutugon na menu na may Bootstrap ay nilikha gamit ang ilang code.

Mga tampok ng pamamaraan

Ang code na ito ay maaaring mahirap, ngunit ito ay naiintindihan. Ito ay nagkakahalaga ng noting na ang pangunahing papel dito ay nilalaro ng tag nav, na responsable sa paglikha ng nabigasyon at hitsura nito. Ang mga lalagyan ay konektado din dito lalagyan-likido At lalagyan, na nagtatakda ng lapad ng mga puntos. Sa tulong nila, maaari mong pilitin ang menu na palawakin sa mga screen ng iba't ibang mga resolution o iwanan itong maayos.

Ang mga klase ay may mahalagang papel sa paglikha ng adaptive functionality dito. gumuho At navbar-collapse sino ang may pananagutan sa istilo. Ang menu mismo ay nilikha sa pamamagitan ng pagsusulat ng mga item na inilalagay nang pahalang.

Kung gagamitin mo ang framing code na ito upang lumikha ng nabigasyon, sa mga malalawak na screen ay magmumukha itong pahalang na banner. Sa simula magkakaroon ng pangalan ng mapagkukunan, at pagkatapos ay ang mga item sa isang mahigpit na tinukoy na pagkakasunud-sunod. Sa mga makitid na screen, tanging ang pangalan ng site at ang icon ng hamburger ang ipapakita, na, kapag na-click, ay ipapakita ang mga item sa menu sa isang patayong listahan.

Dropdown na menu

Ang mapagkukunan ng Bootstrap ay magiging isang mahusay na katulong para sa paglikha ng tumutugon na drop-down na menu. Para magawa ito, palitan lang ang tag line

mula sa nakaraang halimbawa hanggang sa code sa ibaba.

Mga drop-down na item

Magagawa ito para sa isang item o para sa ilan. Lalabas ang isang arrow na nakaturo pababa malapit sa posisyon na may mga drop-down na sub-item. Kapag na-click, lalabas ang ginawang listahan. Kung ang nabigasyon ay ipinapakita sa isang maliit na screen, ang item na may drop-down na listahan ay ipapahiwatig din ng isang arrow, ngunit may direksyon sa kanan. Kapag na-click, isa pang patayong listahan ng mga sub-item ang lalabas.

Multi-level na menu

Gayunpaman, maaari kang lumikha hindi lamang gamit ang Bootstrap. Kung hindi nakakonekta ang library na ito, maaari kang lumikha ng tumutugon na multi-level na menu gamit ang HTML at CSS at pagkatapos ay ikonekta ang PHP function.

Una, kailangan mong lumikha ng isang hindi nakaayos na listahan sa isang HTML file na may kasamang iba pang mga listahan. Upang gawin ito, dapat mong gamitin ang mga karaniwang tag

. Hindi rin natin dapat kalimutan ang tungkol sa pagbuo ng mga klase na mamaya ay ipoproseso ng CSS cascading style sheet. Upang gawing mas malinaw, sulit na magbigay ng isang maliit na halimbawa ng mga listahan ng pagsulat at paglikha ng mga klase.
Ang animation ng tumutugon na dropdown na menu ay itinakda gamit ang isang cascading style sheet. Dito kailangan mong tukuyin ang mga parameter para sa menu kapag ang screen ay nabawasan ng 50, 75 at 25%. Ang diskarte na ito sa paglikha ng adaptive functionality ay nagsisiguro ng karampatang layout, kung saan ang menu ay hindi "umalis".
At sa wakas, kailangan mong ipasok ang function na ipinahiwatig sa ibaba sa dokumento.

Kung ang site ay hindi naisip sa pamamagitan ng paggamit ng anumang mga pag-andar maliban dito, kailangan mo pa ring lumikha ng isang hiwalay na dokumento ng script para dito. Kung ilalagay mo ito sa simpleng HTML, lalabas lang ito sa window ng browser bilang bahagi ng text at hindi gagana.
JQuery
Ang isa pang mahusay na solusyon ay ang lumikha ng isang navigation bar gamit ang isang JQuery plugin. Ang isang adaptive na menu sa naturang serbisyo ay tumatagal lamang ng ilang minuto. Ang plugin mismo ay maaaring ma-download sa Internet, mayroon itong simple at malinaw na interface na madali at madaling gamitin. Kaya't hindi dapat magkaroon ng mga problema sa pagkonekta sa file ng mga estilo.
Pagkatapos maikonekta ang style file, kailangan mong magsulat ng script para gumawa ng adaptive navigation.
Pagkatapos nito, kailangan mong likhain ang nabigasyon kung hindi pa ito umiiral. Ang lahat dito ay gumagana ayon sa prinsipyo: "Lahat ng mapanlikha ay simple." Sa isang HTML na dokumento kailangan mong lumikha ng isang bullet na listahan sa isang tag nav. Maaari mong gamitin ang halimbawang ibinigay nang mas maaga o isang pinasimpleng bersyon nito, na kamukha ng ipinapakita sa ibaba.
Sa yugtong ito ng trabaho, ang logo lamang ang ipapakita sa browser, at ang menu mismo ay itatago. Upang lumitaw ito, kailangan mong magdagdag ng isang function na nagdudulot ng mga pagbabago sa plugin - okayNav.

var navigation = $("#nav-main").okayNav();

Ngayon ay maaari mong tingnan ang mga resulta ng trabaho. Sa normal na lapad ng window ng browser, ang menu na ito ay mukhang ganap na normal, ngunit kung babawasan mo ang screen, mawawala ang mga huling item. Sa halip, lumilitaw ang tatlong malalaking tuldok, na matatagpuan patayo. Kapag pinindot, tila lumilipat ang mga ito, kumukuha ng pahalang na posisyon, at makikita ang mga nakatagong item sa menu sa isang patayong listahan sa kanang sulok sa itaas ng screen.
Ang solusyon na ito ay mukhang napaka-moderno, at ang animation effect na ginamit ay naglalagay ng mapagkukunan sa isang paborableng liwanag sa mga bisita.
Joomla
At ang huling opsyon para sa paglikha ng adaptive menu gamit ang Joomla system. Ito ay isang libreng serbisyo sa paggawa ng website na isang sistema ng pamamahala ng nilalaman ng CMS. At tulad ng nabanggit na sa simula, kung ang site ay nilikha gamit ang isang CMS, at kailangan mong baguhin ang umiiral na menu sa adaptive, kung gayon ito ay pinakamahusay na simulan ang paglikha ng pag-andar ng site mula sa pinakaunang tag. Tulad ng sa mga nakaraang halimbawa, kailangan mong lumikha ng isang bullet na listahan ng menu sa HTML. Para lamang sa bawat item kailangan mong magsulat ng iyong sariling klase. Sa kabuuan, ang lahat ay mukhang nasa ibaba.
Susunod na kailangan mong magdagdag ng mga estilo. Pinakamainam na itakda ang lahat ng padding sa 0 px at ilapat ang box-sizing: border-box. Gagawin nitong posible na mapanatili ang tinukoy na lapad ng mga elemento, gaano man karaming mga indent ang mayroon. Susunod, para sa parent menu element (div), dapat mong itakda ang lapad sa 90% at pagkatapos ay simulan ang pag-istilo ng bawat item nang paisa-isa.
Maaari mong alisin ang mga hangganan, baguhin ang kulay at punan, at gumawa ng isang disenyo na lalabas kapag nag-hover ka sa cursor. Sa isang salita, gawin ang lahat na tumutugma sa disenyo ng mapagkukunan. Ang huling hakbang ng paglikha ng tumutugon na menu ng Joomla ay ang pag-convert nito. Kadalasan, ang Joomla ay gumagawa ng isang menu na, kapag nagbago ang laki ng screen, ay awtomatikong itinayong muli, na nahahati sa ilang linya. Ginagawa ang lahat sa CSS, ang tanging function na kailangang isama ay ang kondisyon ng cross-browser. Nagbibigay-daan ito sa menu na magmukhang pareho sa iba't ibang browser.
Pag-andar ng cross-browser

Ang paglikha ng tumutugon na menu ay talagang hindi madali; ito ay nangangailangan ng kaalaman at karanasan. Ang lahat ng mga halimbawang inilarawan ay isang maliit na bahagi lamang ng mga posibleng variation, ngunit kahit na ang mga ito ay maaaring maging kapaki-pakinabang kung ang isang tao ay may pangunahing kaalaman sa HTML at CSS.

Portal na may masalimuot na mga menu. Nagpasya kaming magsulat lamang ng mga script kung hindi namin mahanap ang kailangan namin online. Maraming iba't ibang mga nabigasyon na may iba't ibang mga tampok ang naisip. Sa kabutihang palad para sa amin, halos lahat ay natagpuan maliban sa isa. Gayunpaman, bago magsimulang magtrabaho sa pagsulat ng menu na ito, nagawa pa rin naming mahanap kung ano ang kailangan namin.
Sinubukan namin ang ilang mga adaptive na menu. Sa paksang ito, nagpasya akong pumili ng mga pinaka-kapaki-pakinabang at kawili-wili na kailangan naming subukan. Ang lahat ng mga adaptive na menu ay hindi magkatulad at eksklusibong idinisenyo para sa mga partikular na gawain.
Kaya. Narito ang 5 adaptive na menu para sa lahat ng okasyon.
flexMenu Ito mismo ang menu na napakahirap hanapin at ang functionality kung saan magsisimula na kaming magsulat.
flexMenu - isang menu na angkop para sa mga site na may dynamic na pagbabago ng lapad. Ang pangunahing at natatanging tampok nito ay ang pagdaragdag ng item na "Higit Pa" at ang paglipat sa drop-down na listahan ng mga item na hindi akma sa lapad ng buong nabigasyon. Ibig sabihin, kung titingnan natin ang malalaking monitor, makikita natin ang lahat ng mga punto. Sa sandaling simulan nating paliitin ang window ng browser, lalabas ang item na "Higit pa" sa dulo ng menu at ang mga item na hindi akma habang lumiliit ang window ay dynamic na ililipat sa drop-down na listahan nito. Kaya, magkakaroon kami ng isang menu na may isang nakapirming taas at isang "naglalaro" na lapad.
Kapag nagtatrabaho sa flexMenu nakatagpo kami ng isang problema. Sa aming kaso, sa kanan ay isang logo na may float: kaliwa;, sa kanan ay ang menu na ito din na may float: kaliwa; at sa kanan na may float: right; may isa pang block. Kapag binago ang laki ng window ng browser, lumabas na ang bloke sa kanan ay tumalon sa ilalim ng menu, pagkatapos ang lahat ng ito ay tumalon sa ilalim ng logo, at pagkatapos ay na-activate ang pag-andar ng compression ng menu. Kung paano haharapin ang tampok na layout na ito ay tatalakayin sa mga susunod na paksa. Manatiling nakatutok. Code a Responsive Navigation Menu Isang magandang halimbawa ng navigation menu. Kapag binago namin ang laki ng window ng browser, makikita namin na ang mga item ay magkakapatong sa isa't isa at nakahanay sa lapad. Mukhang napakaayos. Pinakamahalaga, ang adaptive na menu na ito ay magiging maganda sa mga mobile device at, higit sa lahat, ito ay madaling gamitin sa mga device na may touch display.
Multi-level Flat Menu - adaptive navigationAng Multi-level na Flat Menu ay isang adaptive, multi-level na menu na gumagana gamit ang mga library ng Jquery. Sa mga desktop monitor nakikita namin ang karaniwan, pamilyar na pahalang na menu. Sa mga mobile device, ang pahalang na nabigasyon ay nagiging drop-down na listahan.
Ang Multi-level na Flat Menu ay isang mahusay na pagpipilian kung kailangan mong makatipid ng espasyo sa page.

Habr, kumusta!
Mayroong maraming magagandang solusyon mula sa iba't ibang mga espesyalista na lumalabas sa Codepen, at naniniwala ako na ang pinakamahusay sa mga ito ay dapat kolektahin sa isang lugar. Samakatuwid, 2 taon na ang nakalipas nagsimula akong mag-save ng mga kawili-wiling script sa iba't ibang paksa sa aking computer.
Dati ko silang nai-post sa pangkat ng produkto ng mr cloud IDE. Gefest, ito ay mga pagtitipon ng 5-8 na solusyon. Ngunit ngayon ay nagsimula na akong makaipon ng 15-30 script sa iba't ibang paksa (mga pindutan, menu, tooltip, at iba pa).
Ang ganitong malalaking set ay dapat ipakita sa mas maraming mga espesyalista. Kaya naman pino-post ko sila sa Habr. Umaasa ako na magiging kapaki-pakinabang sila sa iyo.

Sa pagsusuring ito titingnan natin ang mga multi-level na menu.
Flat na Pahalang na Nabigasyon
Magagandang navigation bar na may maayos na paglitaw ng mga submenu. Ang code ay mahusay na nakabalangkas at gumagamit ng js. Sa paghusga sa mga tampok na ginamit, ito ay gumagana sa ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header na may Mga Naka-align na Dropdown
Adaptive link bar na may dalawang column na submenu. Lahat ay ginagawa sa css at html. Gumamit ng mga tagapili ng css3 na hindi suportado sa ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Naka-istilong vertical na menu na may maayos na pagbubukas ng mga elemento. Transition, transform js code ang ginagamit.
http://codepen.io/fainder/pen/AydHJ
Purong CSS Dark Inline Navigation Menu
Madilim na patayong navigation bar na may mga icon mula sa mga ionicon. Ginagamit ang JavaScript. Sa ie8 ito ay malamang na gagana nang walang animation.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Purong CSS3 Mega Dropdown Menu na May Animation
Naka-istilong menu na may dalawang format ng output: pahalang at patayo. Ginagamit ang mga icon at css3 animation. Tiyak na magiging kakila-kilabot ang hitsura nito sa ie8, ngunit sa ibang mga browser ang lahat ay cool.
Patayong link: http://codepen.io/rizky_k_r/full/sqcAn/
Link sa pahalang: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown na Menu
Pahalang na menu na may malalaking elemento at isang drop-down na listahan ng mga link. Malinis at minimalistic na code na walang js.
http://codepen.io/ojbravo/pen/tIacg
Simpleng Purong CSS Dropdown na Menu
Simple ngunit naka-istilong pahalang na menu. Gumagamit ng font-kahanga-hanga. Gumagana ang lahat sa css at html, nang walang js. Ito ay gagana sa ie8.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown na menu
Isang mahusay na solusyon para sa mga online na tindahan. Nagpapakita ng ilang antas ng mga kategorya at malalaking larawan (halimbawa, isang produktong ibinebenta). Ito ay batay sa boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Naka-istilong navigation bar na may makinis na submenu. Sa mas lumang mga browser ito ay magpapakita ng mga problema.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Pahalang na menu na may napaka-cool na animation na walang js!
http://codepen.io/devilishalchemist/pen/wBGVor
Tumutugon Mega Menu - Navigation
Pahalang na tumutugon na menu. Mukhang maganda, ngunit ang mobile na bersyon ay medyo pilay. Ginagamit ang CSS, html at js.
http://codepen.io/samiralley/pen/xvFdc
Purong CSS3 Menu
Orihinal na menu. Sa simple at malinis na code na walang js. Gamitin para sa "wow" effect.
http://codepen.io/Sonick/pen/xJagi
Buong CSS3 Dropdown Menu
Makukulay na drop-down na menu na may isang antas ng nesting. Ginagamit ang mga icon mula sa font-wesome, html at css.
http://codepen.io/daniesy/pen/pfxFi
Css3 lang ang dropdown na menu
Isang medyo magandang pahalang na menu na may tatlong antas ng nesting. Gumagana nang walang js.
http://codepen.io/riogrande/pen/ahBrb
Mga Dropdown na Menu
Isang minimalistic na menu na may orihinal na epekto ng isang nested na listahan ng mga elemento na lumalabas. Natutuwa ako na ang solusyon na ito ay wala ring javascript.
http://codepen.io/kkrueger/pen/qfoLa
Purong CSS DropDown Menu
Isang primitive ngunit epektibong solusyon. Tanging css at html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu - Konsepto ng Pakikipag-ugnayan sa Menu
Kawili-wiling konsepto ng menu para sa isang mobile phone. Hindi pa ako nakakita ng ganito. Gumagamit ng html, css at javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Gumawa ng Simpleng Dropdown na Menu
Malinis at simpleng code, walang js. Tiyak na gagana ito sa ie8.
http://codepen.io/nyekrip/pen/pJoYgb
Purong CSS dropdown
Ang solusyon ay hindi masama, ngunit gumagamit ito ng napakaraming klase. Natutuwa akong walang js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown na Menu
Magandang patayong menu na may kaunting javascript code. Hindi ginagamit ang JQuery!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown na Menu
Ang isang pahalang na menu na may mga karagdagang caption ay maaaring palamutihan nang maayos ang iyong website. Ang code ay simple at malinaw. Hindi ginagamit ang Javascript.
http://codepen.io/ibeeback/pen/qdEZjR
Magandang solusyon na may maraming code (html, css at js). 3 submenu na format ang nalikha. Ang solusyon ay angkop para sa mga online na tindahan.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (espesyal na solusyon)!
Madilim na pahalang na menu na may labintatlong (13) mga pagpipilian sa animation! Talagang ipinapayo ko sa iyo na basahin ito, ito ay magiging kapaki-pakinabang sa pang-araw-araw na buhay.
http://codepen.io/cmcg/pen/ofFiz
P.S.
Sana ay nagustuhan mo ang koleksyon ng 23 solusyon. Kung gusto mong ipagpatuloy ang pagbabasa sa kanila, kunin ang survey sa ibaba.
Enjoy your work everyone.

Kumusta mga kaibigan, kasamahan! kamusta ka na? Sana lahat ay mahusay :) Ngayon ay gagawa kami ng isang simpleng adaptive menu para sa aming landing page. Ang mga tao ay nagtatanong tungkol dito nang higit pa at mas madalas, at isinusulat ko ang mga ganoong katanungan at sinusubukan kong magsulat ng mga artikulo sa mga paksang ito sa aking libreng oras.
Salamat sa pagbibigay sa akin ng mga bagong ideya sa ganitong paraan at pagtulong sa pagbuo ng blog. Nga pala, anong paksa ang gusto mong basahin sa susunod na artikulo? Mangyaring sumulat sa mga komento, ito ay napakahalaga sa akin. Ngayon, simulan natin...
Paano gumawa ng tumutugon na menu para sa isang website
Kinumpirma ng Google na simula sa kalagitnaan ng Abril, ang pagiging tumutugon sa website para sa mga mobile device ay magiging isa sa mga salik sa pagraranggo. Kaugnay nito, ang lahat ng mga materyales sa kung paano gawing adaptive ang iyong landing page ay higit na nauugnay kaysa dati. Ngayon ay hindi ko ipapaliwanag ang anumang bagay na kumplikado, ngunit sa kabaligtaran, sasabihin ko sa iyo kung paano gumawa ng isang napaka-simpleng adaptive menu na may pinakamababang oras.
Karaniwang ito ay magiging html + css, ngunit kakailanganin mo ng napakaliit na script upang maproseso ang pag-click. Kaya…
Tumutugon pahalang na menu
Magsimula tayo sa html. Una sa lahat, ikonekta natin ang jquery library. Malamang na matagal mo na itong ginagamit, kaya siguraduhing hindi mo ito ikokonekta sa pangalawang pagkakataon:

Ngayon ang mga marka. Isang regular na hindi nakaayos na listahan, at isang maliit na div na naglalaman ng icon ng menu. Ito ay makikita lamang sa mababang resolution.
Presyo ng pag-download
Mga contact
Mga pagsusuri

Tulad ng nakikita mo, hindi ito kumplikado, sa palagay ko maaari mong pagbutihin ito sa iyong sarili kung kinakailangan.
Ngayon magdagdag tayo ng mga istilo:

#menu ( background: #2ba9c0; lapad: 100%; padding: 10px 0; text-align: center; ) #menu a ( color: #fff; text-decoration: none; padding: 12px 12px; ) #menu a: hover ( border-bottom: 4px solid #fff; background: #078ecb; ) .itemsMenu li ( display:inline; padding-right: 35px; width:100%; margin: 0 auto; ) .itemsMenu li img( vertical-align : middle; margin-right: 10px; .iconMenu ( color: #fff; cursor: pointer; display: none; ) .showitems ( display:block !important; ) @media screen at (max-width: 600px) ( # menu a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0 ;))

Ngayon, kapag binawasan mo ang window ng browser, makikita mo ang sumusunod na larawan:

Hindi ko talaga gustong ilarawan ang bawat linya, dahil ang blog ay hindi tungkol sa layout tulad nito. Subukan ko lang magpaliwanag.

Una, itinakda namin ang display:inline na pag-aari sa mga elemento ng li upang ipakita ang mga ito nang pahalang sa tabi ng bawat isa. Maaari ko sanang gumamit ng float:left, ngunit nagpasya akong gawin ito sa ganitong paraan. At itago ang icon ng menu gamit ang display:none property. Kapag ang resolution ng screen ay mas mababa sa 600 pixels, alisin ang inline mula sa mga elemento ng li, itago ang mga ito, at ipakita ang icon. Sa maikling salita - oo.

Ngayon kailangan namin ng isang simpleng script na magpoproseso ng isang pag-click sa icon ng menu at magpapakita ng mga elemento nito:

$(function() ($(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ($(".itemsMenu").removeClass(" showitems"); ) else ($(".itemsMenu").addClass("showitems"); ) )); ));

ganito. Inilagay ko ito sa isang hiwalay na file at isinama ito bago ang closing body tag.

yun lang. Sa ganitong paraan mabilis kang makakagawa ng simpleng adaptive na menu para sa iyong landing page.

Siyempre, may mga disadvantages. Ang mga indent ay tinukoy sa mga pixel, ngunit maaari mo ring itakda ang lahat ng distansya bilang isang porsyento. Hindi lang ito kailangan. Kung ito ay isang ganap na site, gagamit ako ng svg o mga icon ng font, hindi png, at muli kong kakalkulahin ang mga indent bilang isang porsyento. And so, it was a little impromptu :) Sana malinaw na ang lahat? Bye.

Kapag nagsimula kaming gumawa ng tumutugon na disenyo, makakatagpo kami ng iba't ibang mga diskarte sa kung paano pinakamahusay na pangasiwaan ang pagbabago ng aming navigation menu para sa mga screen na mababa ang resolution. Ang mga posibilidad ay tila walang katapusan. Samakatuwid, ipapakita ko sa iyo ang apat na pangunahing diskarte sa kanilang mga pakinabang at disadvantages. Tatlo sa mga ito ay ginawa gamit lamang ang CSS at isa na may maliit na halaga ng JavaScript.

Ang lahat ng mga diskarte sa artikulong ito ay gumagamit ng simpleng HTML code, na tinatawag kong "basic menu". Ang katangian ng tungkulin ay ginagamit upang ipahiwatig ang isang partikular na uri: pahalang na menu (buong pahalang), drop-down na listahan (piliin), drop-down na menu (custom-dropdown) at canvas.

Stream
Lab
Mga proyekto
Tungkol sa
Makipag-ugnayan

@media screen at (max-width: 44em) ( )

Stream
Lab
Mga proyekto
Tungkol sa
Makipag-ugnayan

@media screen at (max-width: 44em) ( nav ( ul > li ( width: 100%; ) ) )

Walang kinakailangang JavaScript
Walang dagdag na markup
Simpleng style code

Gumagamit ng masyadong maraming espasyo sa screen

Upang makamit ang epektong ito, kailangan naming magdagdag ng isang drop-down na listahan sa pangunahing markup. Upang magawa ito, kailangan naming magdagdag ng JavaScript code na nagbabago sa halaga ng window.location .href kapag nangyari ang onchange na kaganapan
Stream Lab Projects Tungkol sa Contact
Itinatago ang listahan sa malalaking screen:
nav ( > piliin ( display: wala; ) )
Sa maliliit na screen, itinatago namin ang pangunahing menu at nagpapakita ng drop-down na listahan. Upang matulungan ang gumagamit na maunawaan na ito ay isang menu - magdaragdag kami ng isang pseudo-element na may tekstong "Menu"
@media screen at (max-width: 44em) ( nav ( ul ( display: none; ) piliin ( display: block; lapad: 100%; ) &:after ( position: absolute; content: "Menu"; right: 0 ; ibaba: -1em;
Sa karagdagang disenyo, ganito ang hitsura nito sa mga screen na may mababang resolution:

Hindi kumukuha ng maraming espasyo
Gumagamit ng "katutubong" mga kontrol

Nangangailangan ng JavaScript upang gumana
Nagaganap ang dobleng nilalaman
Ang listahan ng dropdown ay nabigo sa istilo sa lahat ng mga browser

Hindi ito gumagana sa mga mobile na bersyon ng Safari (iOS< 6.0) . Невозможно кликнуть на label в браузере под iOS < 6.0, чтобы сработал input из-за бага. Решается добавлением пустого события onclick на label
Hindi ito gumagana sa pangunahing browser ng bersyon ng Android OS na mas mababa sa o katumbas ng 4.1.2.

Matagal na ang nakalipas, mayroong isang bug sa WebKit engine na hindi pinapayagan ang paggamit ng mga pseudo-class na may kumbinasyon ng mga selector + at ~
H1 ~ p (kulay: itim; ) h1:hover ~ p (kulay: pula; )

4. Canvas Sa diskarteng ito, sa maliliit na screen, nakatago ang base menu at ipinapakita ang input at label tulad ng sa opsyon 3. Kapag nag-click ang user sa label, lumutang ang base menu sa kaliwa at lilipat ang content sa kanan . Ang screen ay nahahati sa 80% na menu at 20% na nilalaman (depende sa resolution at mga unit na ginamit sa CSS)
Sa malalaking screen ay itinatago namin ang label.
label (posisyon: ganap; kaliwa: 0; display: wala; )

Sa maliliit na screen, ilalagay namin ang menu sa labas ng nilalaman ng window at ipapakita ang label at input. Upang itago ang menu, itinakda namin ang lapad at negatibong halaga ng posisyon nito. Para matulungan ang user na maunawaan ang menu na ito, magdaragdag din kami ng pseudo-element na may text na "≡" sa label (bilang code na "\2261" na gagamitin bilang content ng pseudo-element).

@media screen at (max-width: 44em) ($menu_width: 20em; body ( overflow-x: hidden; ) nav ( position: absolute; left: -$menu_width; width: $menu_width; ul > li ( width: 100 %; ) ) label ( display: block; ) label:after ( position: absolute; content: "\2261"; ) input:checked ~ nav ( left: 0; ) input:checked ~ .content ( margin-left: $ menu_width + .5em; margin-right: -($menu_width + .5em) )