Vadovas klaidų šalinimo įrankių meniu „Chrome“ kūrėjo įrankiuose

Šiame vadove sužinosite, kaip pataisyti sugedusį svetainės šoninį meniu. Panagrinėsime konkretų pavyzdį ir išanalizuosime, kaip veikia meniu, kad išsiaiškintume, kur slypi problemos. Naudodamiesi "Chrome" programuotojo įrankiais galėsite lokalizuoti ir ištaisyti klaidas. Šis metodas ne tik veiksmingas, bet ir leidžia geriau suprasti, kaip veikia HTML ir CSS.

Pagrindinės išvados

• Norint, kad meniu išsiskleistų ir susilankstytų teisingai, reikia naudoti teisingas CSS savybes ir pozicijas.
• Nematomas žymimasis langelis yra labai svarbus perjungimo funkcijai.
• CSS klaidos, ypač su padėties savybėmis, gali gerokai pabloginti funkcionalumą.

Žingsnis po žingsnio vadovas

Norėdami ištaisyti šoninio meniu klaidą, atlikite šiuos veiksmus:

1. šoninio meniu klaidos analizė

Pirmiausia išanalizuokite esamą šoninį meniu ir numatomą elgseną. Meniu turėtų išsiplėsti ir susilankstyti, kai paspaudžiate tris taškus. Tačiau išbandę meniu pastebite, kad jis neveikia. Norėdami išsiaiškinti, kas vyksta ne taip, atidarykite "Chrome" programuotojo įrankius.

2. Patikrinkite žymimojo langelio funkcionalumą

Meniu veikia su nematomu žymimuoju langeliu, kuris aktyvuojamas arba deaktyvuojamas, kai spustelėjate etiketę. Patikrinkite kodą ir įsitikinkite, kad žymimasis langelis iš tikrųjų yra ir apibrėžtas kaip nematomas. Norėdami įsitikinti, kad žymimasis langelis veikia teisingai, galite padaryti jį matomą.

3. Patikrinkite CSS stilių

Dabar turėtumėte patikrinti šoniniam meniu taikomas CSS taisykles. Šiame pavyzdyje yra šoninės juostos padėties nustatymo taisyklė. Įsitikinkite, kad atitinkamos CSS savybės nustatytos teisingai.

4. patikrinkite padėties ypatybes

Dažnai pasitaikanti klaida, kurią galite pastebėti, yra neteisingas padėties savybių naudojimas. Jei pozicija nustatyta kaip "statinė", į kairės pusės pozicionavimą neatsižvelgiama. Matote, kad čia "left" ir "top" yra pilkos spalvos, o tai rodo šį konfliktą.

5. padėties taisymas

Norėdami ištaisyti klaidą, turite pakeisti elemento padėtį. Vietoj "static" (statinis) turite naudoti "absolute" (absoliutus) arba "fixed" (fiksuotas), kad įjungtumėte teisingą pozicionavimą. Nustatykite padėtį į "absolute" (absoliuti).

6. perjungimo mechanizmo funkcionalumo tikrinimas

Atlikę padėties pakeitimą, patikrinkite, ar perjungimo funkcija dabar veikia teisingai. Meniu perkėlimo į vidų ir iš vidų taisyklė dabar turėtų įsigalioti, kai įjungiate žymimąjį langelį.

7. atlikite kodo pakeitimus

Dabar svarbu atlikti pakeitimus savo išeities kode. Koregavimus atlikote plėtotojo įrankių skirtuke Elementai, tačiau šiuos pakeitimus taip pat reikia išsaugoti CSS faile, kad jie išliktų ir po puslapio perkrovimo.

8. Galutiniai patikrinimo testai

Šiame paskutiniame žingsnyje turėtumėte dar kartą išbandyti meniu, kad įsitikintumėte, jog viskas veikia taip, kaip norima. Spustelėkite tris taškus ir pažiūrėkite, ar meniu atsidaro ir užsidaro teisingai. Jei viskas atrodo gerai, problemą sėkmingai išsprendėte.

Apibendrinimas

Šiame žingsnis po žingsnio vadove sužinojote, kaip sėkmingai pašalinti šoninio meniu trikdžius. Išanalizavote meniu funkcionalumą, patikrinote kodą ir atlikote reikiamus pakeitimus. Tinkamai naudojant padėties savybes ir CSS stilius, meniu dabar gali veikti, kaip planuota.