/* menüü */ .nav ( veeris: 20px 0; ) .nav ul ( veeris: 0; polster: 0; ) .nav li ( veeris: 0 5px 10px 0; polster: 0; loendi stiil: puudub; kuvamine: inline-block; *display:inline; /* ie7 */ .nav a ( polster: 3px 12px; text-decoration: none; color: #999; line-height: 100%; ) .nav a:hover ( värv : #000; ) .nav .current a ( taust: #999; värv: #fff; piiriraadius: 3px; )

Sektsioonid .nav a:hover ja .nav .current a vastutavad vastavalt linkide värvi ja aktiivsete/praeguste menüüelementide tausta muutmise eest. Ma ei püüdnud selles näites olla liiga tark, tegin kõike minimalismi vaimus, kui hõljutate kursorit lingi kohal, värv muutub, tekst muutub mustaks: #000; , ja aktiivsetele üksustele lisasin tausta: #999; , asendas fondi värvi valgega: #fff; ja servad ümardatakse veidi piiriraadiusega: 3px; saadud nupul. Saate selles osas fantaseerida ja katsetada oma südameasjaks.

Nagu ma eespool mainisin, saame muuta navigeerimisüksuste joondamist, kasutades atribuuti text-align, lisades paar rida CSS-koodi:

/* menüü paremal */ .nav.right ul ( text-align: right; ) /* menüü keskel */ .nav.center ul ( text-align: center; )

Lõbu algab. Meie menüü selles etapis on kummiformaadis (laius määratakse protsentides) ja ei ole veel üldse kohanduv. Alustage ekraani suuruse muutmist ja näete, et menüü on sisse ehitatud kaootilisesse nuppude segadusse.

Parandame olukorra meediapäringute abil. Meediumipäringu rakenduspunktis 600 piksli juures määrasin suhteliseks positsioneerimiseks positsiooni: suhteline; navigeerimiselemendi jaoks, et saaksime hiljem menüüloendi paigutada

peal absoluutses positsioonis positsioon: absoluutne; . Kasutades kuva: none property, peidame kõik li menüüelemendid, jättes alles ainult hetkel aktiivsed lingid praeguse klassiga, määrates neile atribuudi display: block.
Kui hõljutate kursorit rühmitatud navigeerimisriba kohal, tuleks kõik menüüelemendid kuvada rippmenüüna. Selleks määratleme reegli.nav ul:hover li funktsiooniga code>display: block. Aktiivsete/praeguste üksuste jaoks lisame ikooni, et need ülejäänud hulgast esile tõsta.
Kui teil on vaja menüüd paremale või keskele liigutada, kasutage meie menüü ul loendi jaoks vasakut ja paremat positsioneerimisatribuuti.


@meediumiekraan ja (maksimaalne laius: 600 pikslit) (.nav (positsioon: suhteline; min-kõrgus: 40 pikslit;).nav ul (laius: 180 pikslit; polsterdus: 5 pikslit 0; asukoht: absoluutne; ülemine: 0; vasak: 0 ; .nav li ( kuva : puudub ; /* peida kõik punktid */ veeris: 0; ) .nav .current ( kuva : plokk ; /* näitab ainult hetkel aktiivset üksused */ ) .nav a ( ekraan : plokk ; polsterdus : 5px 5px 5px 32px ; teksti joondus : vasak / .nav ul: hover ( background-image : none ; ) .nav ul: hover li ( display : block ; margin : 0 0 5px ; ) .nav ul : hover . png ) no-repeat 10px 7px ) /* reageeriv menüü paremal */ .nav .right ul ( vasak : auto ; parem : 0 ; ) /* reageeriv menüü keskel */ .nav .center ul ( vasak : 50% ) veeris vasak : -90px ;

@meediaekraan ja (maksimaalne laius: 600 pikslit) ( .nav ( asukoht: suhteline; min-kõrgus: 40 pikslit; ) .nav ul ( laius: 180 pikslit; polsterdus: 5 pikslit 0; asukoht: absoluutne; ülemine: 0; vasak: 0 ääris: tahke 1px #aaa; 3); .nav li ( kuva: puudub; /* peida kõik

• punktid */ marginaal: 0; ) .nav .current ( kuva: plokk; /* näitab ainult hetkel aktiivset
• üksused */ ) .nav a ( ekraan: plokk; polsterdus: 5px 5px 5px 32px; teksti joondus: vasakule; ) .nav .current a ( taust: puudub; värv: #666; ) /* kursorit menüüelementide kohal hõljutades * / .nav ul:hover ( taustapilt: puudub; ) .nav ul:hover li ( ekraan: plokk; veeris: 0 0 5px; ) .nav ul:hover .current ( taust: url(pildid/icon-check. png) no-repeat 10px 7px ) /* tundlik menüü paremal */ .nav.right ul ( vasak: auto; parem: 0; ) /* reageeriv menüü keskel */ .nav.center ul ( vasak: 50% vasakpoolne veeris: -90 pikslit;

  See on ilmselt kõik! Meie suurepärane, 100% kohanduv menüü on valmis, nagu näete uuesti näidet vaadates. Materjali üksikasjalikumaks uurimiseks saate allikad alla laadida ja rahulikult, ilma asjatu askeldamiseta teemasse süveneda.

  Tund valmistati ette materjale kasutades
  Tasuta tõlge ja kohandamine: Andrey /juht/

  
  

  Üks levinumaid probleeme mobiiltelefonide veebilehtede põhikujunduse loomisel on navigeerimismenüü. Kui saidil on palju jaotisi ja lehti, peaks see panema teid mõtlema menüü muutmisele kompaktseks, kõige ülevaatlikumaks, kuid samal ajal funktsionaalseks ja tõhusaks. Tõenäoliselt on teie menüüs mitu rida või võivad nupud asuda üksteise peal. See ei tundu väga esteetiliselt meeldiv. Selles õpetuses vaatleme, kuidas saab jQueryt kasutada menüüüksuste tõhusaks korraldamiseks ja kiireks navigeerimiseks.

  Probleem.

  Allolevad ekraanipildid näitavad menüüde koostamisel levinud probleeme. Kui menüüs on ainult neli elementi, asuvad need samal tasemel, kui aga viis või kuus nuppu, siis osutub menüü mitmerealiseks, mis on üsna ebapraktiline.

  http://bitfoundry.ca/

  Lahendus. 1) rippmenüü.

  See on üks levinumaid lahendusi. Kuid siin on ka lõkse. Selliseid menüüelemente ei saa CSS-is stiilida. Kuid saate menüü stiilida valida plugina Valitud abil, vastasel juhul jääb rippmenüü stiil vaikimisi. Lisaks tundub rippmenüü üsna ebaprofessionaalne. Kuigi kui olete selle valikuga rahul, saate teada, kuidas sellist menüüd oma veebisaidil CSS-i tehnikate abil rakendada.

  
  http://www.smashingmagazine.com/
  http://informationarchitects.net/

  2) plokid

  Teine kiire lahendus on seada iga eraldi menüü üksus vertikaalselt paigutatud plokkidena. Kuid see meetod võtab pealkirjast ruumi. Kui menüüs on palju esemeid, siis see valik sulle kindlasti ei sobi. On ebatõenäoline, et lugejad naudivad pika üksuste loendi sirvimist, kuni nad leiavad vajaliku saidi sisu.

  http://forefathersgroup.com/

  http://loveandluxesf.com/

  http://www.londonandpartners.com/

  3) Menüü ikoon.

  See uusim lahendus on navigeerimise sisse- ja väljalülitamiseks ikooni/nupu kasutamine. See on saidi kasutajate jaoks kõige optimaalsem. See meetod on hea ka seetõttu, et säästab ruumi (mis on mobiiltelefonide jaoks väga oluline) ja annab ka täieliku vabaduse CSS-is modelleerimiseks. Lisaks saab menüü sümboli kujundada nii, et see vastaks saidi üldisele teemale.

  http://www.sony.com

  http://twitter.github.com/bootstrap/

  http://zync.ca/

  http://www.paulrobertlloyd.com/

  Mobiilimenüü koos jQuery()

  See õpetus näitab, kuidas luua ülalkirjeldatud mobiilisaidi navigeerimismenüüd jQuery abil. Menüüsümbolite ja navigeerimislüliti lisamiseks kasutatakse jQueryt. See tehnika ei nõua täiendavaid HTML-märgendeid.

  Allpool on selles õpetuses kasutatud menüü lihtne HTML-kood:

  • Nupp
  • Nupp

  < nav id = "nav-wrap" > < ul id = "nav" > < li > < a href = "#" >Nupp< / a > < / li > < li > < a href = "#" >Nupp< / a > < / li > < / ul > < / nav >

  jQuery kood

  Asetage siltide vahele jQuery ja alloleva funktsiooni koopia< head >. Funktsioon lisab sildi< div id = "menu-icon" в тег < nav id = "#nav-wrap" >. Ja kui klõpsate “MENÜÜ” elemendil/ikoonil, avaneb menüü koos lisaelemendiga.

  jQuery(document).ready(function($)( /* prepend menu icon */ $("#nav-wrap").prepend("Menüü"); /* lülita navigeerimisrežiimi sisse */ $("#menu-icon" ).on("klõps", function())( $("#nav").slideToggle(); $(this).toggleClass("aktiivne"; ));

  jQuery(dokument). valmis(funktsioon($)( /* lisa menüüikoon */ $("#nav-wrap") . prepend("Menüü"); /* lülita navigeerimisrežiimi sisse */ $("#menüüikoon"). on ("klõps" , funktsioon () ( $("#nav" ) . slideToggle(); $(see). toggleClass("aktiivne"); } ) ; } ) ;

  HTML-kood näeb välja selline (selleks klõpsake nuppu "Vaata elementi" või vaadake loodud koodi)

  Menüü

  • Nupp
  • Nupp

  < nav id = "nav-wrap" > < div id = "menu-icon" >Menüü< / div > < ul id = "nav" >

  Tere! Jätkame WordPressi saidi kõige huvitavamate ja kasulikumate pistikprogrammide analüüsimist! Täna saate teada, kuidas oma veebisaidile mobiilimenüüd lisada. Saate kohandada menüüd, mis kuvatakse ainult mobiilseadmetes. Saate määrata maksimaalse ekraanisuuruse, mille juures mobiilimenüüd kuvatakse. Saate teha kaks menüüd, mis asuvad ekraani vasakus ja paremas servas, ning saate määrata iga menüü jaoks eraldi saidi menüü. Saate kohandada menüü välimust, värve, suurust, polsterdust jne.

  

  Plugina saate installida otse WordPressi administraatoripaneelilt. Minge lehele: Pluginad – Lisa uus, sisestage otsinguvormi plugina nimi, vajutage sisestusklahvi, installige ja aktiveerige plugin.

  

  

  

  Vaatame seadeid:

  Üldised valikud.

  - Luba mobiilimenüü, saate mobiilimenüü lubada või keelata.

  – Lubage vasakpoolse päise menüü, lubage või keelake vasakpoolne menüü.

  – Parema päise menüü lubamine, parempoolse menüü lubamine või keelamine.

  – Width Trigger, määrake, millises maksimaalses suuruses mobiilimenüüd kuvatakse.

  – Peida elemendid, peita mobiilimenüü kuvamisel saidilt kõik elemendid. Saate määrata CSS-klassi või elemendi ID.

  – Kohandatud CSS, saate menüü jaoks määrata oma CSS-stiile.

  – Salvesta muudatused, salvesta muudatused.

  Päise valikud.

  – Saidi logo, saate valida, mida mobiilisaidil kuvatakse. Logo või tekst.

  – Logo, logo laadimiseks klõpsake väljal.

  – Alternatiivne logo URL, saate määrata alternatiivse logo URL-i.

  – Päise kõrgus, saate määrata menüü kõrguse.

  – Logo ülemine veeris, taande suurus saidi ülaosast logoni.

  – Päise tekst, saate määrata teksti, mis kuvatakse päises, kui valisite alguses tekstikuva.

  – Päise teksti fondi suurus, saate valida päise teksti suuruse.

  – Salvesta muudatused.

  Vasakpoolsed menüüvalikud.

  – Vasakmenüü, valige vasakpoolse menüü jaoks saidi menüü.

  – Menüüikoon, saate valida menüü jaoks ikooni või pildi.

  – Menüü Ikooni kujutis, klõpsake ikooni või pildi laadimiseks väljal.

  – Vasaku menüüpaneeli laius, saate määrata vasakpoolse menüüpaneeli laiuse suuruse.

  – Ikoon ülemine veeris, ikooni ülemine veeris.

  – Ikoon Vasak veeris, taane vasakult ikoonile.

  – Salvesta muudatused.

  Parempoolse menüü valikud. Seaded on siin samad, mis vasakpoolses menüüs. Siin on õige menüü seaded.

  Värvivalikud.

  – Päise taustavärv, saate valida menüü päise värvi.

  – Päise teksti värv, saate valida menüü pealkirja teksti värvi.

  Valige vasak- ja parempoolse menüü värv (samad sätted).

  - vasakpoolse menüü ikooni värv, ikooni värv.

  - Taustavärv, menüü taustavärv.

  - Teksti värv, menüü teksti värv.

  - Tausta hõljumise värv, taustavärv hõljumisel.