Laba diena, mieli skaitytojai. Šiandien mes analizuosime temą " jakas robiti horizontalus meniu susuktas HTML ir CSS“. Meniu, kaip taisyklė, yra svetainės antraštėje ir taip pat yra paskelbtas svarbiausioje pusėje, jis taip pat vadinamas Pagrindinis meniu. Atsižvelgiant į koristuvų stiprumą, jie nuolat stumsis. Tai, kaip kuriate ir kokį dizainą įtraukėte meniu, turės įtakos konversijos elgsenai, konversijai ir bendram jūsų svetainės įspūdžiui ir, žinoma, .

HTML kodas horizontaliam meniu

Jei ilgą laiką svetainės meniu buvo apiplėštas ant paveikslėlių, lentelių, blykstės ir galbūt kai kurių kitų dalykų, tačiau mūsų laikais tai yra populiariausias ir teisingas meniu kūrimo būdas yra žyma „sąrašas“.

Norėdami sukurti meniu, naudokite žymas

,
• і .

Pavyzdys, kaip naudoti html žymas kuriant meniu toliau pateiktame kode:

• Golovna
• Paslaugos
• Kainos
• Kontaktai

Standartiniai horizontalaus meniu CSS stiliai

ul ( sąrašo stilius: nėra; /*pašalinti sąrašo žymeklius*/ paraštė: 0; /*pašalinti užpildymą*/ užpildymas kairėje: 0; /*pašalinti užpildą*/ ) a ( teksto dekoravimas: nėra; /*pašalinti užpildymą Siųsti tekstą */ ) li ( float:left; /*Paskleisti sąrašą horizontaliai, kad būtų galima įgyvendinti meniu*/ margin-right:5px; /*Pridėti prieigą prie meniu elementų*/ )

Viršutinį meniu turime paruošti antraštėje, be ypatingų stilių, kad varpelius ir švilpukus būtų galima pavadinti Jūsų būsimo gražaus meniu rėmu. Jei nukopijuosite ir įklijuosite savo html ir css, tai atrodys taip.

Prijunkite prie būsimo meniu rėmelio (šablono).

Nesunku viską užbaigti, aišku, norisi gražesnio firminio meniu, bet nesuvokdamas pagrindų, tiesiog negali sukurti gero meniu be atleidimo html ir css.

Naudoju tik kelis kitus CSS metodus, kurie naudojami kuriant meniu su horizontalia tamsiai raudona float:left; pavyzdžiui, display:inline-block; arba display:flex; , bet rekomenduojama naudoti vicorist metodą, yra daugiau aprašymų.

Prisiminkime meniu šabloną su skirtingais stiliais ir pritaikytu jogu harnim.

Taikykite svetainės šoninės juostos horizontalųjį meniu

Vienu metu aš atsinešiu paruoštų programų iš horizontalaus meniu dizaino.

Galite patys susikurti „gražus“ savo svetainei, o ne naršyti internete. Paprasčiausias dalykas yra remtis viena iš toliau pateiktų programų

Paprastas mėlynos spalvos meniu su įvairiais elementais

Viršutinio meniu CSS stiliai

Apatiniai dygsniuoti stiliai šį meniu. HTML perrašomas tuo pačiu dalyku, kaip ir "wireframe" meniu.

Ul ( sąrašo stilius: nėra; /*pašalinti sąrašo žymeklius*/ paraštę: 0; /*pašalinti užpildymą*/ padding-left: 0; /*pašalinti užpildymą*/ paraštės viršų: 25 piks.; /*pašalinti viršutinę paraštę*/ ) a ( text-decoration: none; /*pašalinti teksto foną */ background:#30A8E6; /*pridėkite foną prie meniu elemento*/ color:#fff; /*pašalinti spalvos spalvą*/ padding:10px; /*pridėti įvestį*/ šriftų šeima: arial;/*sumažinti šriftą*/ kraštinės spindulys:4 piks.;/*pridėti apvalumą*/ sklandų perėjimą*/ -o-perėjimas: visi 0.3s 0.01s lengvi; -Webkit-transition: visi 0.3s 0.01s lengvi; ) a:hover ( fonas:#1C85BB;/*Pridėti pelės žymeklio efektą*/ ) li ( float:left; /*Paskleisti sąrašą horizontaliai, kad būtų įdiegtas meniu*/ margin-right:5px; /*Pridėti prieigą prie meniu elementų*/ )

Golovne meniu, roztashovane ant spalvų linijos su raudonais pelenais

CSS stiliaus meniu spalvų linijoje

ul ( sąrašo stilius: nėra; /*pašalinti sąrašo žymeklius*/ paraštę: 0; /*pašalinti užpildymą*/ padding-left: 0; /*pašalinti užpildymą*/ paraštės viršų: 25 piks.; /*pašalinti viršutinę paraštę*/ background:#FF4444;/*fono pridėjimas prie meniu elemento (pakeitus šį parametrą, atsimenate viso meniu spalvą)*/ aukštis: 50px; / background:#FF4444;/*fono pridėjimas prie meniu elemento ( pakeitę šį parametrą, atsimenate viso meniu) meniu elementų spalvą)*/ color:#fff; šriftų šeima: arial;/*keisti šriftą*/ eilutės aukštis:50 pikselių;/*meniu vertikalus lygiavimas*/ ekranas: blokas; : visas 0,3 s, 0,01 s lengvas; /* Veikiantis sklandus perėjimas*/ -o-perėjimas: visas 0,3 s 0,01 s lengvas; *pridėti efektą užvedus ant pelės žymeklio*/ ) li ( slankioji: kairėn; /*Viešų sąrašą išdėstykite horizontaliai meniu perėjimas*/ )

Valdiklių meniu HTML+CSS

Įgyvendinimui priedo meniu, kuris pasirodo (atidaromas) svetainėje Prie bet kurio meniu elemento turime pridėti papildomą elemento HTML kodo peradresavimą, kad galėtume išsiųsti jį iš horizontalaus meniu ir pakeisti CSS stilius. Prie stilių pridėsime paprastą gudrybę – atidaryto meniu rodymo keitimą, kad gautumėte papildomų nurodymų dėl elemento, kurio mums reikia. viršutinis meniu. Pavyzdžiui, paimkime elementą „tarnai“.

Paprasto meniu kūrimo pavyzdys, kurį galite pamatyti

Išskleidžiamojo meniu HTML kodas

• Golovna
• Paslaugos
  • 1 paslauga
  • Dovga paslauga 2
  • 3 paslauga
• Kainos
• Kontaktai

Išskleidžiamojo meniu CSS stilius

ul ( sąrašo stilius: nėra; /*pašalinti sąrašo žymeklius*/ paraštę: 0; /*pašalinti užpildymą*/ padding-left: 0; /*pašalinti užpildymą*/ paraštės viršų: 25 piks.; /*pašalinti viršutinę paraštę*/ background:#819A32;/*fono pridėjimas prie šio meniu*/ aukštis: 50 pikselių;/*aukščio nustatymas*/ ) a (teksto dekoravimas: nėra; meniu elementas*/ color:#fff;/*spalvų nustatymo sumažinimas* / užpildymas: 0 tšk. 15 piks.;/*kraštinės pridėjimas*/ šriftų šeima: arial; vertikalus*/ ekranas: blokas; kraštinė dešinėje: 1 piks. vientisas #677B27;/*dešinės kraštinės pridėjimas*/ 0,01 s lengva; -webkit- perėjimas: viskas 0,3 s 0,01 s lengva; / padėtis: santykinė; /*Nustatyti padėties nustatymo padėtį*/ ) /*Prijungto meniu stiliai* / li > ul (pozicija: absoliutus; viršuje: 25 piks.; ekranas: nėra; ) /*Robiškai pritvirtinta matoma dalis* / li:hover > ul ( ekranas: blokas; plotis: 250 pikselių; /*Nustatyti meniu plotį*/ ) li:hover > ul > li ( float:none; /*Nustatyti horizontalią padėtį * / )

Ir norint suprasti, jei jūs pats esate kaltas dėl tos kategorijos tarnų, rekomenduoju susipažinti su medžiaga:.

Pabandžiau kuo trumpiau papasakoti apie tai, kaip sukurti visiškai naują horizontalų meniu, kaip sukurti šablonų pabarstymą, kaip pridėti naujų paprastų stilių ir kaip sukurti mielą meniu, kaip sukurti meniu, kurį matote. jūsų svetainę. Aiškumo dėlei visus aukščiau pateiktus meniu pasirinkau viename html faile, kurį galite pasirinkti žemiau. Tai galite pamatyti ekrano kopijoje:

Už pagarbą.

Atnaujinus viską galima pritaikyti svetainėje, išskyrus horizontalųjį meniu, kuris taip pat gali būti draugiškas visuose ekranuose. Desperatiškai pažvelkite į klasikinę navigaciją, gryno stiliaus vikonan, be JS. Savo stiliumi galite eiti į daugybę svetainių, nes tai daroma paprastai, standartiškai, tačiau yra efektų. Be to, jei pažvelgsite į mobiliuosius telefonus, mygtukas pasirodys automatiškai dešinioji pusė, paspaudus šrifto mygtukai neatsiras per visą plotį, bet viskas tvarkinga, iš tos pačios pusės šrifto mygtukai vizualiai žiūrės vienas į kitą.

Kaip matote, čia buvo laimėti paprasčiausi HTML sąrašai, siekiant parodyti visus sąrašus, kurie, kaip žinoma, yra būtini tų chi іnshої kategorijų perėjimui. Koncepcija slypi tame, kad naršymo sąrašą malonu išdėstyti horizontaliame vaizde, tačiau mobiliuoju būdu jis automatiškai taps vertikalus, kaip parodyta paveikslėliuose, kurie pridedami prie medžiagos.

Kai tik jis pritvirtinamas prie odos, pardavėjas gali pakeisti temą arba tas figūras, kurios labiau tinka tematikai. Pats meniu sukurtas tamsiai žalios spalvos gamoje, tereikia išsirinkti kiekvieną, o tai retai įmanoma. Bet jūs galite viską kardinaliai pakeisti, pereidami prie CSS stiliaus ir ten galite įdėti jums reikalingą dizaino stilių, o svarbiausia - nurašyti kaip interneto šaltinio pagrindą.

1 . Taigi zamovchuvannyam eiti ar pіd valandą aš einu į portalą.

2 . Mes jau stebimės mobilusis įrenginys, tačiau jie nespustelėjo meniu.

3 . Čia padarė spustelėjimą, kad atsirado visos užklausos, kad teiraujasi.

Pereikime prie diegimo:

ZORNET.RU

css

skyrius(
plotis: 100%;
maksimalus plotis: 1198 pikseliai;
paraštė:0pxauto;
ekranas: stalas;
padėtis:santykinė;
}

Antraštė (
plotis: 100%;
ekranas: stalas;
fono spalva: #175812;
paraštė-apačia: 50 pikselių;
}

#kamtukagnpos(
plūdė: kairė;
šrifto dydis: 25 pikseliai;
teksto transformavimas: didžiosios raidės;
spalva: #ffab2;
Šrifto svoris: 600
užpildymas: 19,8 piks. 0 piks.;
}

#kamtukagnpos:hover(
teksto šešėlis: 0px 0px 6px rgba(255, 250, 250, 0,67);
}

Nav(
plotis:automatinis;
plūdė: dešinė;
}

Navul(
ekranas: stalas;
plūdė: dešinė;
}

Nav ul li (
plūdė:kairėje;
}

Nav ul li:paskutinis vaikas(
padding-right:0px;
}

Nav ul li a (
spalva: #e4f2ff;
šrifto dydis: 19 pikselių;
pamušalas: 24px 19px;
ekranas: eilutinis blokas
teksto šešėlis: 0 1px 0 #2e2f2e;
}

Nav ul li a: užveskite pelės žymeklį (
fono spalva: #143a06;
spalva: #fff9c8;
perėjimas: visi 0,7 s lengvina 0 s;
teksto šešėlis: 0 1px 0 #282b28;
}

Nav ul li a: užveskite pelės žymeklį i (
spalva: #fdf7c9;
perėjimas: visi 0,7 s lengvina 0 s;
teksto šešėlis: 0 1px 0 #1c1d1c;
}

Nav ul li a i (
užpildymas dešinėje: 9 pikseliai;
spalva: #f4faff;
perėjimas: visi 0,7 s lengvina 0 s;
tekstas-šešėlis: 0 1px 0 #202120;
}

Navigacija-menusaita ul(
ekranas: stalas;
plotis: 24px;
}

Navigation-menusaita ul li(
plotis: 100%;
aukštis: 3px;
fono spalva: #e9f0f7;
paraštė-apačia: 4 pikseliai;
}

Navigation-menusaita ul li:last-child(
paraštė-apačia:0px;
}

Įvestis, etiketė (
ekranas: nėra;
}

@media tik ekranas ir (maks. plotis: 1440 piks.)(
skyrius(
maksimalus plotis: 95%;
}
}

@media tik ekranas ir (maks. plotis: 980 piks.)(
header(
padding: 20px 0px;
}

#kamtukagnpos(
padding:0px;
}

Input(
padėtis: absoliuti;
viršuje: -9999px;
kairėje: -9999px;
background:none;
}

Įvestis:fous(
background:none;
}

etiketė (
plūdė: dešinė;
užpildymas: 8px 0px;
ekranas: inline-block;
žymeklis:žymiklis;
}

Įvestis:pažymėta ~ nav(
ekranas: blokas;
}

Nav(
ekranas: nėra;
padėtis: absoliutus;
dešinėje:0px;
viršuje: 53px;
fono spalva: #174810;
padding:0px;
z indeksas: 99;
}

Navul(
plotis:automatinis;
}

Nav ul li (
float:nėra;
padding:0px;
plotis: 100%;
ekranas: stalas;
}

Nav ul li a (
spalva: # f7f2f2;
šrifto dydis: 15 pikselių;
užpildymas:10px 20px;
ekranas: blokas;
kraštinė-apačia: 1px solid rgba(204, 197, 197, 0,1);
}

Nav ul li a i (
spalva: # f9f5d5;
užpildas-dešinė: 13px;
}
}

@media tik ekranas ir (maks. plotis: 480 piks.) (
sekcija (maksimalus plotis: 90 %;)
}

@media tik ekranas ir (maks. plotis: 360 piks.) (
etiketė (padding: 5px 0px;)
#kamtukagnpos(šrifto dydis: 20 pikselių;)
nav(viršus:47px;)
}

Prieš tai kaip pasakyti, tada pagarbiai pažiūrėk į Demo pusę ir tikrai įvertink, kaip viskas veikia, bet iš tikrųjų nieko tokio, net jei įvardintum efekto suteikimo resursą, kai užvedi pelės žymeklį per visus ženklus eikite į tunelį, kuris yra turtingesnis ir gražesnis.

Gera svetainės navigacija taip pat svarbi tinklaraštininkams. Dėl її padėti vodvіduvach shvidko žinoti Man reikės pusės dienoraštį. Įvertinkite svetainės ir paieškos sistemų intelektą. Šiame straipsnyje jūs žinote, kaip sukurti horizontalų „Blogger“ meniu su sujungiamomis piktogramomis.
CSS sukurtas meniu su sujungimo mygtukais-piktogramomis. Norėdami peržiūrėti meniu, spustelėkite toliau esantį mygtuką:

Kaip „Blogger“ įterpti horizontalų css meniu su piktogramomis

1. Eikite į skirtuką „Šablonas“, užveskite žymeklį ant redaktoriaus (nesvarbu, ar tai vieta),
2. Norėdami ieškoti kodo ir rasti kodo užuominą, paspauskite Ctrl + F ]]>
3. Įveskite šį kodą prieš cim kodą:
   ..
   

   /* Meniu CSS kodas prasideda čia bloggertrix.com */ #btrix-nav (paraštė: 100 tšk. automat.; sąrašo stilius: nėra; plotis: 632 piks.; aukštis: 87 piks.; perpildymas-y: paslėptas;)
   #btrix-nav li (plaukti: kairėn;)
   #btrix-nav li (ekranas: blokas; spalva: balta; plotis: 120 piks.; aukštis: 61 piks.; paraštės viršus: 24 piks.; teksto apdaila: nėra; teksto lygiavimas: centre; kraštinė viršuje: 1 piks. vientisas #bbb; kraštinė -apačioje: 1px solid #555;)
   #btrix-nav li a span.aname (šriftas: paryškintas 17px/61px "Arial";spalva: #fff;teksto transformavimas: didžiosios raidės;žymeklis: rodyklė;padėtis: santykinis;viršus: 0;perėjimas: viršuje .5s lengvas; teksto šešėlis: 1px 1px 1px rgba(0, 0, 0, 0,5);)
   #btrix-nav li a img (padėtis: santykinė; viršuje: 0; perėjimas: viršuje .5s lengvas;)
   #btrix-nav li a:hover (žymeklis: rodyklė;)
   #btrix-nav li:hover img (viršuje: -85px;)
   #btrix-nav li a:hover .aname (viršuje: 85 pikseliai;)
   #btrix-nav li:nth-child(1) a (fonas: #3eb006;kraštinės spindulys: 5px 0 0 5px;kraštinė kairėje: 1px vientisas #bbb;)
   #btrix-nav li:nth-child(2) a (fonas: #9bc704;)
   #btrix-nav li:nth-child(3) a (fonas: #0dc3ff;)
   #btrix-nav li:nth-child(4) a (fonas: #51a2ec;)
   #btrix-nav li:nth-child(5) a (fonas: #6e3cab;kraštinės spindulys: 0 5px 5px 0;border-dešinė: 1px solid #555;)

4. Dabar eikite į skirtuką „Dizainas“,
5. Pridėkite naują HTML / JavaScript elementą ir pridėkite kodą:

   
   

   Golovna https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />

   
   

   pasinaudoti https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />

   
   

   mysql https://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />

   
   

   HTML https://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />

   
   

   Kontaktai https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />

6. Įveskite kodą, kuris buvo pridėtas prie HTML / JavaScript programėlės, reikiamus pakeitimus:

• Piktograma # pakeisti pranešimą reikiamoje tinklaraščio pusėje (pavyzdžiui, žymos pusėje, „kontaktų“ pusėje, galvos pusė dienoraštyje)
• atsiųstas į nuotrauką, matau oranžinę, pakeiskite tiesiogiai siųsdami konkretaus elemento piktogramą-paveikslėlį.
• Prekė, vizija mėlyna, pavadindamas CSS meniu puses.

Perkelti HTML elementą? „Dizainas“ tinklaraščio įraše reikalingas JavaScript.

Savo meniu galite susukti piktogramas, logotipus ir kitus vaizdus png pažiūrėkime per foną. Kad žinotumėte nuotraukų poreikį, geriau ieškoti piktogramų. Pavyzdžiui, iconsearch.com

Tse sąrašas posilan, scho veda iki skirtingos pusės svetainę. Blogai atrodo, jei sąrašas siunčiamas pakeisti paprastus žymeklius, papildytas ikonėlėmis ir reikia keisti grafiką. Kaip pateikti užklausą prieš duomenų bazę?

HTML kodas

Mіzh žymos li tai yra nustatyta a(# timchasova stub), viduryje yra du blokiniai elementai span. Pirmas tarpas – žyma i su piktogramos klase, kodu, kuris buvo nukopijuotas iš svetainės Šriftas Nuostabus. Kitam span- Pavadinkite pranešimą, tada tekstą.

• 
  
  
  Dviračiai
  
  


• 
  
  
  Motociklai
  
  


• 
  
  
  Autobusai
  
  


• 
  
  
  Automobiliai
  
  


• 
  
  
  Vertoglioti
  
  

Sujungus žymes galva piktogramos šriftas Šriftas Nuostabus- meniu gali atrodyti taip.

CSS stiliai

Dėl burbuolės Google šriftas pasirinkite draugišką šriftą papildomai kirilicai, kad meniu būtų rusiškas vertikaliai.

Nukopijuokite pasirinkto šrifto ryšio kodą ir įklijuokite jį į css failą.

@import url("https://fonts.googleapis.com/css?family=Marck+Script");

Prie selektorių kūnas Rašau pasirinkto šrifto pavadinimą ir nustatau jį į rozmіr.

Kūnas(
paraštė: 0;
paminkštinimas: 0;
šriftų šeima: „Marck Script“, sans-serif;
šrifto dydis: 20 pikselių;
}

Mūsų meniu padėtis yra panaši į naršyklės langą, 10% aukščiau ir 20% aukščiau. Supratau, kad šie skaičiai paimti iš „stelelių“, turėsi savo smarvę.

Ul (
padėtis: absoliuti;
10 geriausių%;
liko: 20 proc.
}

Mes nustatome meniu plotį 200 pikselių.

Plotis: 200 pikselių

Nuėjome į sąraše esančius meniu elementus. Žymeklių paėmimas iš taškų li.

Ul li (
sąrašo stilius: nėra;
}

Mes žymime žvėries rėmą ir dugną, dėl kurių meniu elementai yra vieno tipo.

Border-top: 1px solid #131313;
kraštinė-apačia: 1px solid #131313;
paraštė: -1px 0;

Neiškabinkite kraštinių rėmelių ir paskirstymo tarp piktogramų ir pranešimų pavadinimų.

Mažas dešinysis rėmelis etiketei a, kuris yra eilutės elementas, o šalia eilutės elemento rėmelis negali būti sulaužytas. Todėl ir rodoma žyma a bloko elementas.

Ul li a (
ekranas: blokas;
}

Dabar galite nustatyti rėmelį, sutvarkyti papildomą žinutę ir užsirašyti pranešimo spalvą.

Kraštinė-dešinė: 1px solid #131313;
tekstas-dekoravimas: nėra;
spalva: #131313;

Susituokti su kairiuoju rėmu.

žymės span- bloko elementai, kurių viduryje bus tekstas, į span vaizduojamas eilutės bloko elementu.

Ul li a span (
padėtis: santykinė;
ekranas: eilutinis blokas
}

Mums reikia pirmojo span, kurio viduryje bus piktograma, nustatykite stilius, kurie atrodys kaip kiti span. Kam pirmas span prasminga pseudo klasė - span:nth-child (1) ta stilizuemo yogo okremo. Nustatykime dešinįjį ir kairįjį rėmą ir plotį.

Ul li a span:nth-child(1) (
plotis: 30px
border-left: 1px solid #131313;
kraštinė-dešinė: 1px solid #131313;
}

Piktogramos tampa viduryje su 10 pikselių laukais iš visų pusių.

teksto lygiavimas: centre;
pamušalas: 10 pikselių

Piktogramos bus tamsios spalvos, 20 pikselių dydžio ant raudonų amarų.

Spalva: #131313;
šrifto dydis: 20 pikselių;
fonas: #f44336;

Kitai pseudoklasei reikia nurodyti tik laukus.

Ul li a span:nth-child(2) (
pamušalas: 10 pikselių
}

Dabar vertikalus meniuįgavo savo likutinę išvaizdą. Stebėkite visu kodu ir rezultatu.

Іsnuє masė paruoštas sprendimas tokioms plokštėms sulankstyti padėti jQuery, okremі įskiepiai ir moduliai skirtingoms sistemoms keruvannya svetainėje.
Viskas yra geriau, bet tai įmanoma, norint įdiegti slankiojančias plokštes, viskas įmanoma CSS? Akivaizdu, kad galite! Ale pagarbiai))) žvelgiant atgal į tuos, kad ne visos naršyklės gerai palaiko dabartinę CSS3 galią.

Neseniai „matant kalną“ sprendimas ir roboto užpakalis. Vienas pirmųjų komentarų buvo toks: „persėskime prie dviračio...“. Kodėl b i n i? Tegul)).

Šiandien mes jums pasakysime ir parodysiu programoje, nes „CSS magic“ pagalba galite pradėti dirbti, pilnai veikiantis, meniu spustelėjus.
Burbuolei, už nusistovėjusios tradicijos, stebinantis gyvu robotinio skydelio užpakaliuku, toli, tuo pačiu, kažkam reikia, galime pasižiūrėti visą išplanavimą, kas, kaip ir dabar. Maisto ruošimas, meniu variantų ruošimas, kaip kairiarankis, dešiniarankis:

HTML žymėjimas

Pažvelkime į jungiklių skydelį, kuris yra tarsi pergalingas standartinis ženklas ():

Galbūt žymės langelis dokumento viršuje arba, tiksliau, iškart po žyma . Paslėptas atributas rašomas, nenurodant šio elemento „prisegimo“ stovyklos, taip pat unikalus identifikatorius, pavyzdžiui, id="nav-toggle", skirtas susieti su žymos atributu for , kurį galime sutvarkyti ir bus susukti kaip mygtukas skydeliui perjungti.

Jako pamušalas galinio skydelio vietoje