Valikon luominen ja näyttäminen WordPressissä on helppoa wp_nav_menu-toiminnolla. Navigointipalkit CSS:n avulla
Navigointi on läsnä kaikilla hyvillä verkkosivuilla, vaikka se olisi yksisivuinen. Tilanteesta riippuen navigointilinkit voivat johtaa sivuston eri osiin tai lähettää kirjanmerkkiin (ankkuriin), joka sijaitsee osoitteessa tämänhetkinen sivu. Sellaisen navigoinnin pätevä suunnittelu, jossa käyttäjä ei hämmenny, vaatii tiettyä tietoa ja kokemusta. Navigointipalkin suunnittelu on myös tehtävä viisaasti, ja tässä opetusohjelmassa näytämme, kuinka voit luoda käyttäjäystävällisen navigointivalikon.
Navigoinnin luominenMitä on navigointi? Tämä on kokoelma linkkejä, jotka on usein järjestetty ja ryhmitelty merkityksen mukaan. Navigointivalikko luodaan usein käyttämällä HTML-luettelotunnistetta
- , missä jokaisessa kohdassa
- sisältää yhden linkin . HTML5:ssä otettiin käyttöön erillinen navigointitunniste, johon voit yksinkertaisesti sijoittaa linkkitageja. Kun olet luonut HTML-kehyksen, voit siirtyä sen muotoiluun CSS:llä, jossa voit määrittää, miten valikkosi on pystysuora, vaaka, avattava jne.
Oletetaan, että meillä on yksinkertainen navigointi, jossa on viisi linkkiä, jotka on luotu HTML:ssä luettelomerkityn luettelon perusteella:
Aluksi, ilman tyylejä, navigointimme näyttää tavalliselta luettelolta:
Jotta tämä elementti olisi enemmän kuin navigointipalkki, sinun on suoritettava muutama pakollinen vaihe. Ensinnäkin merkkejä ei tarvita valikon kohtien lähellä, ja toiseksi vakiona marginaaliarvot ja selaimen listalle asettamat täytteet voivat häiritä, joten asetamme ne nollaan. Tulos on seuraava:
Valikko ( listatyylinen: ei mitään; marginaali: 0; täyttö: 0; )
Pohjimmiltaan tyylin palautustiedosto suorittaa identtisiä toimintoja luetteloiden suhteen Reset.css, joten jos käytät sitä sivustossasi, yllä olevaa koodia ei tarvitse kirjoittaa.
Kun olet nollannut vakioluettelotyylit, voit jatkaa suoraan navigointityylien luomiseen. Näytämme sinulle, kuinka pysty- ja vaakapaneelit tehdään.
Pystysuuntainen valikkoPystysuuntaisen navigointipalkin luominen on helpompaa kuin vaakasuuntaisen valikon luominen. Lähinnä siksi, ettei tarvitse kysyä vaakasuora järjestely linkkejä. Tämä on yksinkertaisesti pystysuora luettelo sivuston sivuista. Ja vielä joitakin tärkeitä tyylejä tulee soveltaa.
Estä linkitEnsinnäkin sinun on tehtävä kaikki tunnisteet lohkon elementit:
Valikko a ( näyttö: lohko; )
Tähän on useita syitä:
Valikon leveys Seuraavaksi meidän on asetettava valikon leveys. Jos et ole määrittänyt valmiiksi navigointipalkin leveyttä, etkä ole sitä rajoittavassa säilössä, valikko ulottuu koko ikkunan leveydelle (kuten yllä olevassa esimerkissämme) - koska näin lohkoelementti käyttäytyy oletusarvoisesti. Voit asettaa .menu-elementille tarvittavan leveyden, esimerkiksi:
Valikko (leveys: 300 pikseliä; )
Sen sijaan voit määrittää kohteiden leveyden
- tai linkeistä - visuaalisesti tehoste voi olla sama, mutta muista, että tässä tapauksessa .menu-elementin leveys säilyy silti 100%.
Erottelee kohteitaVoit erottaa valikon kohdat visuaalisesti asettamalla niille ala- tai yläreunuksen. Riippuen siitä, mitä käytät, valikon ylä- tai alareunasta puuttuu reunus. Tämä voidaan korjata lisäämällä toinen reunus itse .menu-lohkoon:
Valikko a ( reunus yläreunassa: 1px tasainen sininen; ) .menu ( reunus alareunassa: 1px tasainen sininen; )
Pisteen korkeus ja pystysuuntainen kohdistusTällä hetkellä valikkolinkit näyttävät liian matalalta ja liian lähellä toisiaan. Jos kunkin linkin teksti ei sisällä useampaa kuin yhtä riviä, voit lisätä niiden korkeutta ja pitää tekstin pystysuorassa keskitettynä korkeus- ja rivinkorkeusominaisuuksien avulla:
Valikko a ( korkeus: 30 kuvapistettä; rivin korkeus: 30 kuvapistettä; ) GIF
Kuten animaatiosta näkyy, korkeus-ominaisuus vaikuttaa linkin korkeuteen ja rivinkorkeuden riviväli muuttaa itse tekstirivin korkeutta. Muista asettaa samat arvot näille kahdelle ominaisuudelle, jos haluat linkkitekstin olevan pystysuorassa keskitetty.
Vaakasuora valikkoVaakasuuntaista navigointia luotaessa tärkein tehtävä on järjestää valikon kohdat yhdelle riville. Tämä voidaan tehdä useilla tavoilla.
Menetelmä yksiEnsimmäinen vaihtoehto on asettaa luettelokohteiden näyttöominaisuus arvolla inline tai inline-block:
Valikko li ( näyttö: rivi; )
Tämän jälkeen voit aloittaa linkkien luomisen. Voit esimerkiksi tehdä tämän tyylin:
Valikko a (tekstikoristelu: ei mitään; fonttiperhe: sans-serif; väri: #5757a0; näyttö: inline-block; pehmuste: 10px 20px; taustaväri: laventeli; reuna-ala: 5px kiinteä #5757a0; )
Lisäsimme jokaiseen linkkiin taustavärin ja alareunuksen ja lisäsimme sen kokoa täytteellä. Huomaa, että valikon kohtien välillä on pieniä aukkoja, vaikka emme lisänneet niitä tyylien kautta. Ne johtuvat siitä, että selain tulkitsee lopetus- ja avaustunnisteiden välisen rivinvaihtomerkin tällä tavalla.
- . Nämä aukot voidaan poistaa kirjoittamalla luettelon HTML-koodi yhdelle riville:
Tämä on kuitenkin hankalaa, koska nämä muutokset on tehtävä HTML-koodiin manuaalisesti ja koodia on vaikea lukea. Siksi voit yrittää päästä eroon aukoista käyttämällä negatiivista marginaali-oikea-arvoa:
Valikko li ( marginaali oikea: -5px; )
Tämä koodi ei poista aukkoja, vaan peittää ne siirtämällä elementtejä viisi pikseliä vasemmalle. Tämä menetelmä ei voida sanoa olevan kovin luotettava, koska raon koko voi vaihdella muista tyyleistä riippuen.
Jos pisteiden välisiä tiloja ei ole suunniteltu suunnittelussasi, on parempi käyttää toista menetelmää elementtien vaakasuoraan kohdistukseen.
Menetelmä kaksiOlet ehkä jo arvannut, että toinen vaihtoehto horisontaalisen valikon luomiseen on käyttää kelluntaominaisuudet. Tee tämä lisäämällä tunnisteille tyyli
- :
Menu li ( kellua: vasen; )
Kuten näet, pisteiden välillä ei ole enää aukkoja. Kaikki muut tyylit toimivat kuten ennenkin. Mutta jos lisäät toisen HTML-elementin navigoinnin jälkeen (kuten ), rivitys vaikuttaa siihen ja se kohdistetaan valikon kohtiin. Voit peruuttaa tämän toiminnon lisäämällä otsikkoon clear: left -ominaisuuden. Mutta kun kehitetään sivustoa iso määrä eri sivuja Voi olla vaikeaa seurata, missä olet unohtanut ilmoittaa tämä omaisuus. On paljon helpompi purkaa kääre navigointipuolella. Tämä merkintä auttaa tässä:
Valikko ( ylivuoto: piilotettu; )
Tämä auttaa myös palauttamaan kelluvien elementtien ylätason normaalille korkeudelleen. Puhuimme tästä ongelmasta jo aiemmilla tunneilla, mutta sitten ratkaisimme sen erityisellä hakkeroinnilla käyttämällä pseudoelementtiä:after . Yllä oleva esimerkki on toinen tapa ratkaista säiliön puuttuvan korkeuden ongelma.
Huomautus: jos asetat taustan .menu-elementille, et näe sitä, ennen kuin otat siihen käyttöön overflow: hidden. Loogista, koska miten voit nähdä taustan elementille, jonka korkeus on nolla?
Seuraavalla oppitunnilla puhumme tarkemmin määritteiden valitsimien ominaisuuksista, joilla voit asettaa
Hei, tänään puhumme jälleen valikon (pysty- ja vaaka) luomisesta wordpressissä ohjauspaneelin kautta sekä kuinka näyttää se missä tahansa sivustossasi wp_nav_menu-toiminnolla, kaikki on paljon helpompaa kuin aiemmin kirjoittamani oppaani valikoiden luomisessa.
Voit ladata artikkelin lähteet alla
Alla oleva opas perustuu edelliseen artikkeliini -
Täällä teemme kuitenkin kaiken yksinkertaisemmin (emme koske functions.php-tiedostoon tai käytä skriptejä valikon avausvalikon tekemiseen), nimittäin opimme kuinka tehdä pystysuora valikko tai vaakasuuntainen ei-pudotusvalikko.
Aloitetaan!
1. Siirry WordPress-sivuston ohjauspaneeliin, valitse vasemmasta valikosta " Ulkomuoto” ja sen alakohta ”Valikko”.
Täällä luomme tarvitsemamme valikon.
Luodaan esimerkiksi valikko luokista, mutta ei kaikista, vaan vain niistä, jotka tarvitsemme ja nimeämme tämä valikko– "rubrici", tältä se näyttää:
2. Näytämme valikon WordPressissä käyttämällä seuraavaa toimintoa:
Kaikki on yksinkertaista, yllä olevassa koodissa "valikon nimen" sijaan korvaat luomasi valikon nimen ja liität koodin mihin tahansa sivustosi kohtaan.
Esimerkissämme luodulle valikolle tämä toiminto näyttää tältä:
3. Aseta valikko kohtaan oikeassa paikassa sivustomme.
Laitetaanpa esimerkiksi "rubrici"-valikkomme otsikkoon, aivan yläreunaan.
Otetaan esimerkiksi vakio teema wordpress – Twenty Twelve.
Voit tehdä tämän paneelissa wordpress hallinta mene kohtaan - "Head view" ja sen alakohtaan "Editor", valitse oikealta malliluettelosta - header.php.
Sen koodista löydämme avaavan body-tunnisteen, ja heti sen jälkeen on tagi, joka avaa "sivu"-lohkon - sen jälkeen lisäämme "rubrici"-valikon tulosteen funktiolla - wp_nav_menu:
... ...
Tallenna muutokset ja mene verkkosivustollesi katsomaan, mitä olemme saaneet:
Kuten näette, saamme pystysuoran valikon, ja tämä on hyvä, jos tarvitset pystysuoran valikon, mutta oletetaan, että tarvitsemme vaakasuora valikko, silloin meidän on määritettävä suunnittelutyylit ruokalistallemme – "rubrici".
4. Kirjoitamme valikkotyylejä.
Kääritään ensin valikon näyttötoiminto uusi lohko, esimerkiksi "valikko2", määrittääksesi sille suunnittelutyylejä.
Eli header.php-tiedoston koodi (polku 3 tämä käsikirja) näyttää tältä:
... ...
Seuraava askel, joka meidän on tehtävä, on määrittää suunnittelutyylit uudelle lohkollemme ("menu2"), joka sisältää uuden valikon ("rubrici").
Ja tehdäksesi tämän, valitse WordPressin ohjauspaneelin vasemmanpuoleisesta valikosta kohta "Ulkonäkö" ja sitten sen alakohta "Editor" ja valitse oikealta mallien joukosta tiedosto - style.css.
Siirry koodin alaosaan ja lisää seuraava fragmentti:
#menu2 ( täyttö: 0 0 0 20px; marginaali: 0; ) #menu2 li ( float: vasen; listatyyli: ei mitään; fontti: 12px Tahoma, Arial; ) #menu2 li a ( näyttö: lohko; tausta: #20548E täyttö: 5px 12px reunus oikea: 1px white-space: nowrap; kiinteä valkoinen)
Sitten menemme sivustolle ja katsomme, mitä meillä on:
Kuten näet, valikkomme on muuttunut pystysuorasta vaakasuoraan, jäljellä on vain muokata suunnittelutyylejä sivustollesi sopiviksi.
Esimerkiksi sisään tässä esimerkissä meidän on venytettävä jokaisen valikkokohdan leveyttä - attribuutti on vastuussa tästä:
Leveys: 70px;
Muutan sen muotoon:
Leveys: 170 pikseliä;
Sen jälkeen ruokalistani näyttää tältä:
Kutsumme sinut tutustumaan uusi teknologia responsiivisen (mukautuvan) valikon luomisesta ilman Javascriptin avulla. Se käyttää puhdasta ja semanttista HTML5-merkintää. Valikko voidaan kohdistaa vasemmalle, keskelle tai oikealle. Tämä valikko kytkeytyy päälle, mikä on käyttäjien kannalta kätevämpää. Siinä on myös ilmaisin, joka näyttää "juoksu/ketjutus" -valikkokohdan. Se toimii kaikissa mobiili- ja työpöytäselaimissa, mukaan lukien Internet Explorer!
Kohde
Tämän opetusohjelman tarkoituksena on näyttää, kuinka tavallinen valikko muutetaan pudotusvalikosta pienellä näytöllä.
Tämä temppu on hyödyllisempi navigoinnissa, jossa on paljon linkkejä, kuten alla olevassa kuvakaappauksessa. Voit tiivistää kaikki painikkeet tyylikkääksi avattavaksi valikoksi.
Nav HTML-merkintä
Tässä on navigoinnin merkintä. Tunniste tarvitaan ominaisuuden sisältävän avattavan valikon luomiseen CSS ehdoton asemat. Selitämme tämän myöhemmin oppitunnilla. .current-luokka osoittaa aktiiviset/nykyiset valikkolinkit.
- Portfolio
- Kuva
- Web-suunnittelu
- Painettu media
- Graafinen suunnittelu
Navigoinnin CSS (työpöytänäkymä) on melko yksinkertainen, joten emme aio mennä tässä liian yksityiskohtiin. Huomaa, että määritimme elementin NAV:ssa display:inline-block arvon float:left sijaan
- . Tämä sallii valikkopainikkeiden tasaamisen vasemmalle, keskelle tai oikealle määrittämällä tekstin tasauksen
- elementti.
- määritetään display:none, mutta jätetään .current
- näytetään lohkona. Sitten NAV-leikkeen päällä asetamme kaiken
- to display:block (tämä antaa tuloksen avattavasta luettelosta). Olemme lisänneet check.current-elementtiin graafisen kuvakkeen, joka osoittaa, että elementti on aktiivinen. Käytä vasemman ja oikean paikannusominaisuutta kohdistaaksesi valikon keskelle ja oikealle
- lista.
- tuotteet */ marginaali: 0; ) .nav .current ( näyttö: lohko; /* näyttää vain nykyisen
- item */ ) .nav a ( näyttö: lohko; täyttö: 5px 5px 5px 32px; tekstin tasaus: vasemmalle; ) .nav .current a ( tausta: ei mitään; väri: #666; ) /* on nav-hover */ . nav ul:hover ( taustakuva: ei mitään; ) .nav ul:hover li ( näyttö: lohko; marginaali: 0 0 5px; ) .nav ul:hover .current ( tausta: url(images/icon-check.png) no-repeat 10px 7px ) /* oikea nav */ .nav.right ul ( vasen: auto; oikea: 0; ) /* center nav */ .nav.center ul ( vasen: 50 %; margin-vasen: - 90px ) )
Korkeat konversiot!
Rekisteröi ja näytä paneelissa luotu mukautettu valikko: Ulkoasu > Valikot.
Valikon rekisteröinti
Add_action("after_setup_theme", function())( register_nav_menus(array("main_menu" => __("Ensisijainen valikko", "luo"), "foot_menu" => __("Alatunnistevalikko", "luo"),) ) ; ));
Toinen vaihtoehto valikon rekisteröimiseksi (en tiedä kuinka oikein se on, joten on parempi käyttää ensimmäistä vaihtoehtoa)
If (function_exists("register_nav_menu")) ( register_nav_menus(array("main_menu" => __("Ensisijainen valikko", "luo"), "foot_menu" => __("Alatunnistevalikko", "luo"),)) ;)
Valikon näyttäminen
Toinen valikkovaihtoehto
Lisätietoja rekisteröinnistä ja valikon näyttämisestä mallissaKäyttö
wp_nav_menu(array("theme_location" => "" // (merkkijono) Valikon sijainti mallissa. (osoittaa näppäimen, jolla valikko on rekisteröity toimintoon "menu" => "", // (merkkijono) ) Näytettävän valikon nimi (näkyy hallintapaneelissa valikon luomisen yhteydessä, etusijalla määrätty sijainti theme_location - jos määritetty, theme_location-parametri ohitetaan) "container" => "div", // (merkkijono) Valikkosäiliö. Kääre ul. Säilön tagi on määritetty (oletuksena div-tunnisteessa) "container_class" => "", // (merkkijono) säilön luokka ( div-tunniste) "container_id" => "", // (merkkijono) säilön tunnus (div-tunniste) "menu_class" => "menu", // (merkkijono) itse valikon luokka (ul-tunniste) "menu_id" => "", / / (merkkijono) itse valikon tunnus (ul-tunniste) "echo" => true, // (boolean) Näytä tai palauttaa käsittelyyn "fallback_cb" => "wp_page_menu", // (merkkijono) Käytetty ( varmuuskopio) -toiminto, jos valikkoa ei ole (ei saatu) "ennen" => "", // (merkkijono) Teksti ennen jokainen linkki "after" => "", // (merkkijono) Teksti jälkeen jokainen linkki "link_before" => "", // (merkkijono) Teksti ennen linkin ankkuria (teksti) "link_after" => "", // (merkkijono) Teksti linkin "items_wrap" ankkurin (teksti) jälkeen " => "", "syvyys" => 0, // (kokonaisluku) Sisäkkäisyyssyvyys (0 - rajoittamaton, 2 - kaksitasoinen valikko) "walker" => "" // (objekti) Luokka, joka kerää valikoita. Oletus: uusi Walker_Nav_Menu));
$args Parametriargumentit
teeman_sijainti(merkkijono)
Mallin valikon sijainnin tunnus. Tunniste määritetään rekisteröitäessä valikkoa register_nav_menu()-funktiolla.
Oletus: ""valikko (merkkijono)
Valikko, joka on näytettävä. Vastaavuus: id, slug tai valikon nimi.
Oletus: ""kontti (merkkijono)
Kuinka kääriä ul-tunniste. Hyväksyttävä: div tai nav.
Jos sinun ei tarvitse kääriä sitä millään, kirjoita false: container => false.
Oletus: divkonttiluokka(merkkijono)
Merkitys luokan attribuutti valikkolaatikossa.
Oletus: menu-(menu slug)-containerkontin_tunnus(merkkijono)
Valikkosäilön id-attribuutin arvo.
Oletus: ""menu_class(merkkijono)
ul-tunnisteen class-attribuutin arvo.
Oletus: valikkomenu_id(merkkijono)
ul-tunnisteen id-attribuutin arvo.
Oletus: menu slugkaiku (boolean)
Tulosta näytölle (tosi) tai palauta käsittelyyn (false).
Oletus: tosibackback_cb(merkkijono)
Toiminto, joka käsittelee tulosteen, jos valikkoa ei löydy.
Välittää kaikki $argit tässä määritetylle funktiolle.
Aseta tyhjäksi merkkijonoksi '__return_empty_string', jotta se ei näytä mitään, jos valikkoa ei ole.
Oletus: wp_page_menuennen (merkkijono)
Teksti ennen tagia valikossa.
Oletus: ""jälkeen(merkkijono)
Teksti valikon jokaisen tagin jälkeen.
Oletus: ""linkki_ennen(merkkijono)
Teksti ennen kunkin linkin ankkuria valikossa.
Oletus: ""linkki_jälkeen(merkkijono)
Teksti valikon jokaisen linkin ankkurin jälkeen.
Oletus: ""items_wrap(merkkijono)
Pitääkö minun kääriä elementtejä ul-tunnisteeseen? Tarvittaessa määritetään kääremalli.
Oletus: ""syvyys (luku)
Kuinka monta sisäkkäisten linkkien tasoa näytetään. 0 - kaikki tasot.kävelijä (esine)
Luokka, jota käytetään valikon laatimiseen. Sinun on määritettävä objekti, ei merkkijono, esimerkiksi uusi My_Menu_Walker(). Oletus: Walker_Nav_Menu(). Katso alta kuinka käyttää...
Oletus: Walker_Nav_Menuitem_spacing(merkkijono)
Jätetäänkö rivinvaihdot HTML-valikkokoodiin vai ei. Voi olla: säilytä tai hävitä
Oletus: "säilytä"Esimerkki
Näytä valikko vain, jos se on olemassa
Oletusarvoisesti, jos valikkoa ei ole, sivuston sivut näytetään sen sijaan. Mutta jos sinun on näytettävä valikko vain, kun se on luotu hallintapaneelissa, määritä fallback_cb-parametri muodossa "__return_empty_string":
Wp_nav_menu(array("teeman_sijainti" => "ensisijainen valikko", "fallback_cb" => "__return_empty_string"));
Edellisissä blogiartikkelissa kirjoitin WordPressin uusimman version mielenkiintoisista innovaatioista - erityisestä luomis- ja hallintamekanismista. Nyt tavallisten käyttäjien on paljon helpompaa ja helpompaa luoda monimutkaisia valikoita, jotka voivat koostua paitsi sivuista tai blogiluokista, myös sisältää linkkejä mihin tahansa URL-osoitteeseen. Valikon näyttämiseksi mallissa käytetään erityistä toimintoa wp_nav_menu - kerron siitä sinulle tänään.
Jos WordPress-järjestelmänvalvojassa ei ole valikkoosiota, voit aktivoida sen lisäämällä erikoiskoodin functions.php-tiedostoon
Tässä on ensin luomamme valikon nimi. Tämä on funktion käyttö yleisessä tapauksessa ilman widgetejä, sinun on työskenneltävä niiden kanssa hieman eri tavalla. Toiminto wp_nav_menu voidaan kuitenkin tulostaa ilman argumentteja, minkä seurauksena eri tilanteet "katsotaan läpi" - ensin haku valikon nimen mukaan, jos sille on määritetty vähintään yksi valikkokohta, muuten ei-tyhjä valikko näytetään yksinkertaisesti jne. . Mutta jälleen kerran, neuvon sinua käyttämään yllä olevaa koodia etkä keksi, mitä funktion ilman argumentteja pitäisi tuottaa. Sen syntaksi on seuraava:
Tässä käytetään seuraavia parametreja:
$menu - valikon valittu tunniste - ID, slug tai valikon nimi.
$container - Oletusarvoinen UL-valikko on "kääritty" DIV-säilöön tätä asetusta käyttämällä.
$container_class - ilmaisee säilön luokan, oletuksena sen arvo on menu-(menu slug)-container, eli esimerkiksi meidän tapauksessamme luokka on menu-first-container.
$container_id - voit lisätä säilöön tunnuksen, jota ei ole oletusarvoisesti määritetty.
$menu_class on UL-valikkoelementin luokka, sen arvo on menu.
$menu_id — ul-elementin tunnus, oletuksena menu-(slug)
$echo - jos et halua näyttää valikkoa, mutta palauttaa funktion arvon, käytä asetukseksi 0.
$fallback_cb - jos valikkoa ei ole olemassa, kutsutaan wp_page_menu-funktiota.
$ennen - määrittää tekstin, joka näytetään ennen linkkiä A.
$link_before — näyttää lauseen ennen linkkitekstiä, ei määritetty.
$link_after — näytetään linkkitekstin jälkeen, myös tyhjä.
$depth - määrittää valikon näyttävien hierarkiatasojen määrän oletusarvo 0 näyttää koko valikon.
$walker - jonkinlainen käsittämätön mukautettu "walker-objekti", jota todennäköisesti tarvitsevat enemmän edistyneet kehittäjät.
$theme_location - Teeman sijainti, jossa valikkoa käytetään, on aktivoitava register_nav_menu() -toiminnolla, jotta käyttäjä voi valita sen. Myös jonkinlainen epäselvä asetus ilmeisesti, kun työskentelet widgetien kanssa.
Esimerkkejä wp_nav_menu-funktion käytöstäYksinkertaisin koodissa annettu koodi on:
DIV-säiliön poistaminen valikosta
Periaatteessa WordPress 3.0 -valikon luomisessa ja hallinnassa ei ole mitään monimutkaista. Kehittäjät ovat yksinkertaistaneet huomattavasti työprosessia ja laajentaneet tämän navigointielementin ominaisuuksia. Ratkaisua käytetään usein erilaisissa mallitehtävissä, esimerkiksi luotaessa mobiili- ja työpöytäversioita. Hieman myöhemmin lisään vielä pari katkelmaa aiheesta.
P.S. Vartija. Mielenkiintoinen ja hyödyllinen blogi hakukoneoptimointia käsitteleville webmastereille, josta löydät vastauksia SEO-kysymyksiisi.
Aweb-yritys on jo pitkään vakiinnuttanut asemansa erittäin hyvin verkkosivustojen edistämisen, optimoinnin ja hakukoneen edistäminen internetissä.
@medianäyttö ja (max-leveys: 600px) ( .nav (sijainti: suhteellinen; min-korkeus: 40px; ) .nav ul (leveys: 180px; täyte: 5px 0; sijainti: absoluuttinen; ylhäällä: 0; vasen: 0 ; reunus: kiinteä 1px #aaa; 3); .navli ( näyttö: ei mitään; /* piilota kaikki
/* nav */ .nav ( sijainti: suhteellinen; marginaali: 20px 0; ) .nav ul ( marginaali: 0; täyttö: 0; ) .nav li ( marginaali: 0 5px 10px 0; täyttö: 0; listatyyli: ei mitään; näyttö: inline-block; .nav a ( täyte: 3px 12px; tekstin koristelu: ei mitään; väri: #999; rivin korkeus: 100%; ) .nav a:hover ( väri: #000; ). nav .current a ( tausta: #999; väri: #fff; reunuksen säde: 5px; )
Keskitys ja oikea kohdistus
Kuten edellä mainittiin, voit muuttaa painikkeiden kohdistusta käyttämällä "text-align".
/* right nav */ .nav.right ul ( text-align: right; ) /* center nav */ .nav.center ul ( text-align: center; )
Internet-tuki tutkimusmatkailija
Internet Explorer 8 ja vanhemmat versiot eivät tue HTML5-tunnisteita ja mediakyselyjä. Sisällytä CSS3-mediaqueries.js (tai answer.js) ja html5shim.js tarjotaksesi varatukea. Jos et halua lisätä html5shim.js-tiedostoa, korvaa tunniste tunnisteella.
Tästä hauskuus alkaa – valikoiden tekeminen responsiivisiksi mediakyselyillä! 600 pikselissä asetimme nav-elementin suhteelliseen asentoon, jotta voimme sijoittaa
- valikkoluettelo yläosassa absoluuttisella sijainnilla. Olemme piilottaneet kaikki elementit
- tai linkeistä - visuaalisesti tehoste voi olla sama, mutta muista, että tässä tapauksessa .menu-elementin leveys säilyy silti 100%.
