Meniu naudojamas palengvinti vartotojo naršymą per svetainės skyrius. Norėdami pritraukti lankytojo dėmesį, meniu turėtų būti funkcionalus, patogus naudoti ir tuo pačiu metu derinamas su viso šaltinio dizainu.
Nurodymai
1 žingsnis
Prieš kurdami meniu, nuspręskite jo tipą. Galite sukurti išskleidžiamąjį horizontalų arba vertikalų langelį, kuris bus rodomas vartotojui, kai vartotojas užveskite pelės žymeklį ant jo. Renkantis tam tikrą meniu galite vadovautis tuo, kaip lankytojams bus patogu juo naudotis ir kaip jis bus derinamas su dizainu.
2 žingsnis
Pasirinkę meniu tipą, atidarykite savo puslapio failą naudodami bet kurį teksto redaktorių, kurį naudojate HTML redaguoti. Eikite į norimą kodo skyrių, kuriame norite įterpti savo sąsajos elementą.
3 žingsnis
Po to sudarykite parinkčių sąrašą sukurdami bloką ir sudarydami sunumeruotą sąrašą su jam priskirtu ID. Pavyzdžiui:
- 1 nuoroda
- 2 nuoroda
- 3 nuoroda
Šiame pavyzdyje sukūriau trijų elementų sąrašą su ženkleliais ir įdėjau jį į „div“sluoksnį su ID skydelio ID.
4 žingsnis
Eikite į savo puslapio skyrių bloką ir sukurkite atitinkamą kaskadinio stiliaus lapo meniu. Jei norite sukurti horizontalų meniu, galite įtraukti gauto sąrašo atributą:
#panel ul li {display: inline; }
5 žingsnis
Norėdami sukurti horizontalią liniją per visą puslapio ilgį, galite naudoti šį kodą:
#panel ul {paraštė-kairė: 0; užpildas: 2px 0; }
6 žingsnis
Tada galite vizualiai suskirstyti į stačiakampius:
#panel ul li a {paraštė kairėje: 3px; kraštinė: 1px; užpildas: 2px 3px; fonas: mėlynas; }
Šis kodas nustato kraštinių elementų teksto įtraukas per kairę paraštę ir užpildymo atributus, taip pat nustato kiekvieno sąrašo elemento fono spalvą. Šiame pavyzdyje spalva yra mėlyna, tačiau galite ją pakeisti savo nuožiūra.
7 žingsnis
Norėdami nukreipti į elementą dabartiniame puslapyje, kuris pasirinktas skirtuke, nustatykite reikiamus parametrus į atvirą klasę:
#menu ul li a # open {background: red; apatinis kraštas: 1px; }
Dabar skydelyje pasirinktas dabartinis puslapis bus rodomas raudonai.
8 žingsnis
Išsaugokite failo pakeitimus ir patikrinkite parašyto kodo funkcionalumą atidarydami savo puslapį per naršyklę. Norėdami nustatyti papildomas rodymo parinktis, visada galite pridėti CSS arba HTML, kad pagerintumėte objekto išvaizdą.
