Responsiivinen menu hampurilais css:llä. Hampurilaiskuvake: uusia tapoja käyttää sitä. Suljetun tilan luominen

Jossa hän ehdotti viittä vaihtoehtoa "hampurilainen"-valikolle navigoinnin järjestämiseen mobiilisovelluksessa..

"Jos työskentelet digitaalisten tuotteiden parissa, olet luultavasti lukenut kymmeniä artikkeleita siitä, kuinka ja miksi hampurilaismenut vahingoittavat mobiililaitteiden käyttökokemusta olemalla hämmentäviä ja tehottomia. Yhä useammat projektit kokeilevat vaihtoehtoisia menun esitysvaihtoehtoja”, kirjoittaa Zoltan Kollin.

Suunnittelija huomauttaa, että mikään materiaalissa listatuista vaihtoehdoista ei selvästikään ole muita kätevämpi tai tehokkaampi - ne sopivat kaikki erilaisiin tilanteisiin.

1. Välilehdet

Kuten Colleen huomauttaa, välilehdet voivat olla hyödyllinen ratkaisu, jos mobiilisovelluksessa on useita pääosioita ja käyttäjät haluavat vaihtaa nopeasti näiden osien välillä.

Colleen jatkaa, että kehittäjät tuntevat usein, että välilehdet ovat yksi yksinkertaisimmista navigointimalleista. Mutta kun luot tällaisen valikon, sinun tulee noudattaa useita sääntöjä:

• Osioita saa olla enintään viisi.
• Yksi välilehdistä (aktiivinen) on korostettava visuaalisesti.
• Ensimmäisen välilehden tulee olla "koti". Välilehdet tulee järjestää tärkeysjärjestyksen tai järjestyksen mukaan, jossa niitä on tarkoitus käyttää.
• Välilehdet voidaan sijoittaa näytön ylä- tai alaosaan kontekstista ja alustasta riippuen.
• Käytä kuvakkeita otsikoiden sijasta välilehtien osoittamiseen vain, jos käyttäjä tietää tarkalleen, mitä kukin kuvake tarkoittaa ja jos hän tuntee mahdolliset toiminnot (esimerkiksi ne soveltuvat sosiaalisen verkostoitumisen sovelluksiin).

2. Välilehdet "Muu"-vaihtoehdolla

Jos sovelluksessasi on enemmän kuin viisi pääosiota, Colleen suosittelee käyttämään ensimmäisen valikkotyypin muokattua versiota – välilehtiä, joissa on "Muu"-vaihtoehto. Tässä tapauksessa kehittäjä voi sijoittaa neljä korkean prioriteetin osiota paneeliin ja piilottaa loput lisävälilehdelle.

"Tämä ei ehkä vaikuta paremmalta vaihtoehdolta kuin hampurilaismenu, mutta jos välilehdet suunnitellaan niin, että lähes kaikki käyttäjän tarvitsema tieto on neljässä ensimmäisessä osiossa, UX ei juurikaan kärsi", Colleen selittää.

3. Pudotusvalikko

Välilehtien muunnelma "Muu"-osion kanssa - valikko, joka mukautuu näytön kokoon ja näyttää eri määrän välilehtiä kullakin resoluutiolla. Ne välilehdet, jotka eivät mahdu näytölle, päätyvät "Muu"-osioon.

4. Vierittävä valikko

"Jos sinulla on useita osioita, etkä pysty tunnistamaan tärkeimpiä, välilehtien käyttö lisäosion kanssa ei välttämättä ole tehokas ratkaisu. Sitten voit listata kaikki valikon kohteet ja tehdä paneelista vieritettävän”, Colleen kirjoittaa.

Tämän ratkaisun haittana suunnittelija huomauttaa, että aluksi käyttäjä näkee edelleen vain osan välilehdistä ja loput nähdäksesi sinun täytyy selata valikkoa. Tämä ei kuitenkaan ole ongelma, jos käyttäjät ovat verkkokauppasovelluksessa, jonka tuoteluokat on lueteltu paneelissa, tai uutissovelluksessa, jossa on luokkavälilehdet.

Suunnittelijoiden tulee kuitenkin varmistaa, että käyttäjille on selvää, kuinka vierittää – ja tarjota visuaalisia vihjeitä. Käytä esimerkiksi "häipymistä" viimeiseen elementtiin.

5. Pudotusvalikko

Suunnittelijan mukaan on olemassa mielenkiintoinen, mutta ei yleisin malli, jota käytetään silloin, kun osioiden näkyvyydellä ja saavutettavuudella ei ole merkitystä - pudotusvalikko.

Tämä valikko toimii sen sivun otsikkona, jolla käyttäjä on. Samanaikaisesti sanan vieressä oleva nuoli kertoo älypuhelimen omistajalle, että on muita osioita, joihin hän voi siirtyä. Ja vaikka vaihtoehdot ovat piilotettuja, käyttäjälle on selvää, että ne ovat joko tärkeydeltään samanlaisia ​​kuin avoimen vaihtoehdon tai ovat sen alaosia.

Joskus, Colleen huomauttaa, hampurilaismenu voi olla hyvä ratkaisu. Suunnittelijan mukaan tätä kuviota ei suositella käytettäväksi ensisijaisen valikon suunnittelussa, mutta siitä voi olla hyötyä toissijaisissa navigointitoiminnoissa. "Hampurilaista" voidaan käyttää myös, kun käyttäjä suorittaa kaikki päätoiminnot päänäytöllä - esimerkiksi Uber-sovelluksessa.

Hampurilaiskuvake näkyy kaikkialla. Kaikkialla ympärillämme. Verkkosovelluksissa, mobiili- ja työpöytäsivustoilla, ohjelmistoissa. Tämä kaikkialla oleva kolmirivinen kuvake on niin yleinen nykyään, että näyttää siltä, ​​​​että se liittyy ainutlaatuisesti navigointivalikkoon. Mutta onko se?

Viime aikoina keskustelu hampurilaiskuvakkeen tehokkuudesta on saavuttanut uusia korkeuksia. Merkittävien suunnittelijoiden artikkelit ja useat sivustot, kuten The Atlantic, TechCrunch, The Next Web ja Nielsen Norman Group, päättelevät, että tämä on UX:n vastainen malli, trendikäs ja helposti toteutettava kuvake, joka on regressio yksinkertaisemmasta, enemmän ilmeikkäitä vaihtoehtoja. Mutta anti-kuvio tai ei, kuvakkeen käyttö on kasvanut niin paljon, että se on melkein kiinnitetty useimmilla verkkosivustoilla, etenkin pienillä näytöillä.

Ottaen huomioon asemani suunnittelijana m.booking.com-tiimissä ja koska käytämme tätä kuvaketta avattavan valikon näyttämiseen, päätin tutkia tätä objektia. Aloitin tutkimalla ikonin alkuperää yrittääkseni ymmärtää sen polun häpeään.

Tämä kuulostaa lupaavalta. Mutta vaikka kuvake on klassikko ja se on ollut olemassa ikuisesti, verkkosuunnittelijat eivät ole olleet yhtä johdonmukaisia ​​sen käytössä. Kuvaketta on käytetty luetteloihin, vetämään ja järjestämiseen, tasaamiseen ja muihin. Ehkä tämä väärinkäyttö selittää sen kritiikin valikkokuvakkeena. Ehkä laajan levinneisyytensä ja monipuolisen käyttönsä vuoksi tämä kuvake on menettänyt kykynsä välittää yksittäinen metafora ja se puolestaan ​​hämmentää käyttäjiä.

Tämä koko tarina sai minut kysymään kysymyksiä: "Olemmeko me todella väärässä ja kaikki muut ovat oikeassa? Aiheuttaako tämä haittaa käyttäjillemme? Onko olemassa ihmisiä, jotka todella ymmärtävät, mitä ne kolme pientä riviä verkkosivustollamme ovat?"

Tämän blogin säännölliset lukijat eivät ylläty kuullessaan, että seuraava askel oli kysyä nämä kysymykset A/B-testin muodossa. Kuten kaikki muukin, hampurilaiskuvake oli monien asiakkaidemme vaikutuksen alainen, ja heidän täytyi vuorovaikutuksessa ruokalistan kanssa määrittää, oliko kuvake paras ratkaisu. Tähän mennessä olin lukenut tarpeeksi artikkeleita ja tietoa ollakseni varma siitä, että yksimielisyyden puute tai erilaiset tulokset eivät johdu asiakkaiden käyttäytymisestä, joille suunnittelua kehitettiin. Päätin noudattaa kuvattua menetelmää James Foster, johon monet, mukaan lukien yksi parhaista mobiiliasiantuntijoistamme, ovat viitanneet - Luke Wroblewski.

Olemme aiemmin testanneet useita kuvakkeiden sijoitteluja ja tyylejä (reunuksella, ilman reunaa, kuvakkeella, eri väreillä jne.), mutta emme ole koskaan testanneet sanaa "Menu", koska haluamme testata neljässäkymmenessä. yksi kieli, jota tuemme. Menimme kuitenkin eteenpäin, löysimme käännökset kieliasiantuntijatiimimme avulla ja suoritimme testin:

Alkuperäinen "hampurilainen" -valikkokuvake on otsikon vasemmalla puolella ja valkoinen erotusviiva oikealla.

Sana "Menu" lohkon sisällä, jossa on valkoinen kehys, jossa on pyöristetyt kulmat, myös tasattu vasemmalle.

Aloitimme kokeilun koko käyttäjäkuntamme alueella. Tämän käyttöliittymäelementin suosion ja yleisyyden vuoksi toivoimme, että sen testaaminen miljoonien asiakkaidemme kanssa ympäri maailmaa ei kestäisi liian kauan kaikilla tuetuilla kielillä ja useilla eri laitteilla.

Joten mikä on lopputulos? Voittiko sana pikaruoan, kuten se teki James Fosterin kokeilussa, vai voittaako pulla ja kotletti?

Tulokset Tässä kokeilussa kuvakkeen korvaaminen sanalla "Menu" ei vaikuttanut merkittävästi käyttäjiemme käyttäytymiseen. Valtavan käyttäjäkuntamme avulla voimme erittäin suurella todennäköisyydellä todeta, että erityisesti Booking.comin vierailijoille hampurilaiskuvake toimii samalla tavalla kuin tekstikuvausversio.

Emme tietenkään voi ekstrapoloida näitä tietoja kaikkeen. Joissakin maissa, joillakin kielillä tai laitteilla se on saattanut toimia paremmin tai huonommin. Mutta globaalissa mittakaavassa voimme päätellä, että "hampurilaista" on naurettu liikaa. Kaiken kaikkiaan se oli yhtä tunnistettavissa kuin sana "Menu". Suunnittelun edistymisen hallinnan hengessä meidän pitäisi luultavasti harkita muita vaihtoehtoja ja ehkä kokeilla lisätä juustoa, ripaus pekonia ja ranskalaisia ​​perunoita hampurilaisikoniimme, mutta toistaiseksi olemme iloisia voidessamme ilmoittaa, että "kolmen rivin ystävämme" on rapattu kaikkialla. Sen todellinen sijainti, muoto, koko, sijainti ja väri ovat tietysti tulevaisuuden testauksen aihe.

Tämä on varmasti oppitunti meille kaikille A/B-testauksen luonteesta. Et koskaan testaa käyttöliittymän elementtejä, mallia tai toimintoa kokonaisuudessaan. Testaat näitä asioita hyvin tietyllä käyttäjäyleisöllä tietyissä ja tietyissä skenaarioissa. Se, mikä toimii Booking.comille, ei välttämättä toimi sinulle tai käyttäjillesi. Tämä on yksi syistä, miksi teimme A/B-testauksen. Muiden asiantuntijoiden havainnot, muilta sivustoilta saadut tiedot tai pubissa hampurilaista syödessään keksityt hypoteesit jäävät todistamatta, kunnes niitä testataan asiakkaidemme kanssa ja alustallamme.

Emme eksy omaan metaforamme, mutta se on kuin hyvän hampurilaisen resepti. Vaikka kirjoitit kaikki ainekset ylös täsmälleen minun jälkeeni, päädyt täysin erilaiseen hampurilaiseen. Tähän tietysti vaikuttavat markkinoilla olevan lihan laatu, leivän valmistuksessa käytetyt jauhot ja tuhannet muut tekijät. Meille henkilökohtaisesti idea on hyvä, jos se on hyvä Booking.comille. Jos voimme toistaa sen verkkosivuillamme ja jos se toimii kaikille asiakkaillemme.

Meidän mielipiteemme Sinun kannattaa aina testata ideoitasi ja katsoa, ​​mitä data kertoo ja mitä kysymyksiä herää. Minun neuvoni? Ota pala ja katso mitä tapahtuu.

Vitali Rubtsovista en voinut vastustaa halua toteuttaa se.

Tässä opetusohjelmassa näytän sinulle, kuinka tämä tehdään pelkällä CSS:llä ilman JavaScriptiä. Joten tulemme näkemään joitain CSS- (ja SCSS) temppuja, joiden avulla voimme saavuttaa animaatioita melkein yhtä sujuvasti kuin tämä animoitu gif.

Tässä on esimerkki siitä, mitä aiomme tehdä:

Merkintä

Aloitetaan HTML-rakenteesta, jota käytämme. Katso kommentit ymmärtääksesi paremmin.

Ohjaus Tarina Tilastot asetukset

Käynnistetään SCSS Styles

Lisätään nyt hieman perustyyliä saadaksemme haluamamme ulkoasun. Koodi on melko yksinkertainen.

/* Perustyylit */ * ( box-sizing: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( tekstin koristelu: ei yhtään

Kytkimen toiminta

Ennen kuin aloitamme käyttöliittymän muun osan luomisen, lisäämme vaihtotoimintoja, jotka helpottavat siirtymistä tilasta toiseen.

Tarvittava HTML on jo olemassa. Ja tyyli, joka saa sen toimimaan, on jotain tällaista:

// Piilota valintaruutu #toggle ( näyttö: none; ) // Tyylit "avoin" tilaan, kun valintaruutu on valittuna #toggle:checked ( // Kaikki elementit, joiden tyyliä sinun on muutettava valikon avaamisen yhteydessä, menee tähän valitsin ~ // Tyylit navigointivalikon avaamiseen, esimerkiksi & ~ .nav ( ) )

Suljetun tilan luominen

Suljetun tilan tekemiseksi meidän on muutettava valikon kohdat riveiksi saadaksemme hampurilaiskuvakkeen. On olemassa useita tapoja saavuttaa tämä muutos. Päätimme tehdä sen näin:

Ja tässä on koodi, joka toteuttaa tämän.

$siirtymäkesto: 0,5s; // Näytä navigointikohteet riveinä, jotka muodostavat hampurilaisen icon.nav-item ( sijainti: suhteellinen; näyttö: inline-block; float: vasen; selkeä: molemmat; väri: läpinäkyvä; fontin koko: 14 pikseliä; kirjainten välit: - 6.2px riviväli: nowrapY(0.2), läpinäkyvyys 1s ( kirjainväli: -8px;) leveys toiselle riville &:nth-child(2) ( kirjainväli: -7px; ) // Asetukset elementeille alkaen neljännestä & :nth-child(n + 4) ( kirjainväli: -8px; marginaali -yläosa: -7px; peittävyys: 0 (-50 %) siirtymä: $siirtymä-kesto;

Huomaa, että olemme sisällyttäneet tähän vain tärkeimpien navigointikohteiden perustyylit. Löydät täydellisen koodin Githubista.

Luo avoin valikko

Avoimen valikon luomiseksi meidän on palautettava navigointikohteet riveistä tavallisiin tekstilinkkeihin sekä tehtävä useita pieniä muutoksia. Katsotaanpa, miten tämä tehdään:

$siirtymäkesto: 0,5s; #toggle:checked ( // Avaa & ~ .nav ( // Palauta navigointikohteet valikon "riveistä" icon.nav-item ( väri: #EC7263; kirjainvälit: 0; korkeus: 40px; rivi- korkeus: 40px ; opasiteetti: 1, läpinäkyvyys 0,1 s // Piilota rivit

Taikuutta on pienissä asioissa

Jos katsomme gifiä tarkemmin, huomaamme, että kaikkia valikon kohtia ei siirretä samaan aikaan, vaan shakkilautakuvioin. Voimme tehdä tämän myös CSS:ssä! Periaatteessa meidän on valittava jokainen elementti (käyttäen :nth-child ) ja asetettava siirtymäviiveen arvo kasvamaan asteittain. Tämä on ehdottomasti toistuvaa työtä. Entä jos meillä on enemmän elementtejä? Älä huoli, voimme parantaa kaikesta pienellä SCSS-taikuudella:

$kohteet: 4; $siirtymäviive: 0,05 s; .nav-item ( // Aseta viive navigointikohdille suljettaessa @for $i 1 - $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - viive: $viive: &:before ( siirtymäviive: $viive; ) )

Huomaa, että tällä koodilla saamme halutun askelkäyttäytymisen loppuanimaatiolle. Meidän on laskettava $delay , hieman erilainen aloitusanimaatiolle, jotta saadaan askel siirtymä takaisin. Kuten tämä:

$viive: ($kohteet - $i) * $siirtymäviive;

Johtopäätös

Olemme valmistaneet upean menumme! Olemme myös sisällyttäneet joitain dummy-elementtejä, kuten animoituun gifiin, ja voit nähdä.

Joten olemme luoneet yksinkertaisen ja toimivan valikon käyttämällä vain CSS:ää. Jos et kuitenkaan halua käyttää CSS-vaihtojärjestelmää, se voidaan korvata täydellisesti muutamalla JavaScript-rivillä ilman paljon vaivaa.

Toivomme, että pidit tästä opetusohjelmasta ja pidit siitä hyödyllisenä!

Olet luultavasti nähnyt monilla verkkosivustoilla painikkeen kuvakkeen muodossa, jossa on kolme vaakasuoraa raitaa, jotka muistuttavat hampurilaista. Useimmissa tapauksissa suurilla ja keskikokoisilla näytöillä tämä painike on piilotettu ja näkyy vain pienillä näytöillä.

Tämän painikkeen takana on piilotettu navigointivalikon kohdat, ideana on, että käyttäjä itse laajentaa valikon napsauttamalla kuvaketta tietyllä näytön leveydellä. Jos se ei ole välttämätöntä, hän siirtyy heti katsomaan sisältöä ilman, että valikko häiritsee, koska se on piilotettu.

Tämän tehtävän aktiivinen osa eli hampurilaisvalikkokohteiden laajentaminen ja tiivistäminen voidaan toteuttaa JS:llä käyttämällä jQuery-kirjastoa tai puhdasta CSS:ää. Tässä teen heti varauksen, että CSS:ssä tämä tehdään "sauvatavalla" valintaruuduissa, myöhemmin selitän mitä tämä on.

Hampurilaisvalikko JS:ssä 1. Aseta tavallinen ylänavigointivalikko, jossa on yksi kappale sivuston sisältöosassa

Valikko

• Koti


• Hinnat


• Tuotteet


• Palvelut


• Yhteystiedot

Sivuston pääsisältö

2. Lisää hampurilaiskuvake navigointivalikkoon

Sivustolla iconfinder.com löydämme halutun kuvakkeen, vaihdamme värin haluttuun (Edit Icon), lataa se SVG-muodossa, avaa se selaimessa, kopioi koodi verkkotarkastuksesta.

Liitä yllä kopioitu koodi "Valikko"-tekstin sijaan.

Valikko

Tässä vaiheessa työpöydän resoluutioilla valikko näyttää tältä, piilotimme SVG-kuvakkeen kirjoittamalla seuraavan koodin.

MenuBurger (
näyttö: ei mitään; /* hampurilaiskuvake piilotettu */
}

3. Siirry mediakyselyyn

Pienellä näytön leveydellä, nollasta 530 pikseliin. Meidän on tehtävä päinvastoin, näytettävä hampurilaisvalikkokuvake ja piilotettava kaikki valikon kohdat peräkkäin.

@medianäyttö ja (enimmäisleveys: 530 pikseliä) (
.menu (
näyttö: ei mitään; /* valikon kohdat on piilotettu */
tausta: #f1f2f4;
sijainti: absoluuttinen;
}

Valikko (
kellua: ei mitään; /* valikon kohdat sarakkeissa */
}

MenuBurger (
näyttö: inline-block; /* hampurilaiskuvake näkyvissä */
}
}

4. Laajenna hampurilaisvalikkoa

Mitä sinun tulee tehdä ennen hampurilaismenun avaamista? Sinun täytyy väliaikaisesti kommentoida mediakyselyn CSS-koodia /* display: none; */ ja muuta vaakavalikko pystysuoraksi. Tätä varten peruutetaan float-toiminto ja lisätään mediakyselyyn seuraava koodi.

Olemme toistaiseksi tehneet vain layoutin.

5. Lataa jquery-3.3.1.min.js-kirjasto

Yhdistämme kaksi tiedostoa HTML-dokumenttiimme ennen sulkevaa body-tagia, joista toinen on vielä tyhjä.

6. Luo tapahtuma JS:ssä

Kirjoitamme seuraavan koodin script.js-tiedostoon

$(funktio())(
$(.menuBurger").on("napsautus", toiminto())(
$(.menu").slideToggle(200, function())(
if($(this).css("näyttö") === "ei mitään")(
$(this).removeAttr("tyyli");
}
});
});
});

Emme analysoi JS-koodia yksityiskohtaisesti, rajoitamme yleisiin kommentteihin. Voin suositella sitä niille, jotka ovat kiinnostuneita ohjelmoinnista JS:llä

Tämä rivi $(.menuBurger").on("click", function())( tarkkailee napsautustapahtumaa elementissä, jonka luokka on .menuBurger .

$(.menu").slideToggle(200, function())( tässä slideToggle() -toimintoa sovelletaan itse valikkoon, joka vuorotellen laajentaa tai supistaa sivulla valitut elementit 200 millisekunnissa.

$(this).removeAttr("tyyli"); - poistaa näytön: ei mitään upotetuista tyyleistä;

Nyt kun napsautat hampurilaista, valikko laajenee ja kutistuu, mutta siinä on ongelma: laajennettaessa valikko siirtää sivuston pääsisältöä alas, mutta se on oikein, jos se on sisällön päällä. Samaan aikaan sivujen latausnopeus kärsii, etenkin mobiili-internetissä.

6. Laajenna valikko sisällön päällä

Tämä ongelma ratkaistaan ​​käyttämällä valikon sijoittelua.

Sinun on lisättävä CSS-pääkoodiin

Valikko (
asema: suhteellinen;
}

Mediakyselyssä: .menu (
tausta: #eee;
sijainti: absoluuttinen;
}

Tämän jälkeen hampurilaisvalikko laajenee pääsisällön päälle. Näin sen pitäisi olla.

Hampurilainen menu CSS:ssä

1. Poista käytöstä ja poista kaikki komentosarjat

2. Lisää koodirivi HTML-tiedostoon div- ja ul-tunnisteiden väliin

3. Korvaa div-tunniste .menuBurger-luokan tunnisteella

4. Linkitä id-syöte for label -attribuuttiin #menuCSS:n kautta

Tämän seurauksena, kun napsautat hampurilaisvalikon kuvaketta, valintaruutuun tulee valintamerkki.

5. Lisää valittu pseudoluokka mediakyselyyn

#menuCSS:tarkistettu (
näyttö: ei mitään;
}

Tämä tarkoittaa, että kun napsautat kuvaketta, valintaruutuun tulee rasti, mutta se on piilotettu näytöllä, vain kuvake on näkyvissä. Ajatuksena on, että jos valintaruutua ei ole valittu, valikko suljetaan, ja jos se on valittuna, valikko laajenee. Tapahtuma valikon avaamisen ja sulkemisen kanssa riippuu valintaruudun tilasta.

6. Piilota syöte CSS:ssä

#menuCSS (
näyttö: ei mitään;
}

7. Muuta koodia kohdassa 5, katso yllä olevasta artikkelista seuraavat tiedot

#menuCSS:tarkistettu + .menu (
näyttö: lohko;
}

Jos linkki otsikon ja syötteen #menuCSS välillä on valittuna, valikko laajenee. Siinä kaikki taika, hampurilaisvalikko toimii puhtaalla CSS:llä ja jos lisäät siihen sujuvan animaation, et tunne eroa JS-valikosta.

Yritä pienentää selaimesi ja näet selvästi, kuinka CSS-hampurilaisvalikko toimii

Johtopäätös

Molemmat vaihtoehdot toimivat. Sanotaan, että JS:n valikko on koodin käytön kannalta oikea. CSS:n valikko on "sauva", eräänlainen "kekseliäisyyden ilmentymä", joka sopii hyvin niille, jotka eivät halua ymmärtää JS:ää ja aikovat käyttää sitä vain projekteissaan. Mittatilaustyönä valmistetuilla verkkosivuilla ei ole "sauvoja", suosittelen vahvasti muiden asiantuntijoiden JS:n jatkokäyttöä varten räätälöityjen asettelujen tekemistä.