Menüüd kasutatakse kasutaja navigeerimiseks saidi jaotistes. Külastaja tähelepanu äratamiseks peaks menüü olema funktsionaalne, hõlpsasti kasutatav ja samal ajal kombineeritud kogu ressursi kujundusega.
Juhised
Samm 1
Enne menüü loomist otsustage selle tüüp. Saate luua rippmenüü horisontaalse või vertikaalse kasti, mida kuvatakse kasutajale, kui kasutaja hiirekursoriga selle kohal hõljutab. Konkreetse menüü valimisel võite juhinduda sellest, kui mugav on külastajatel seda kasutada ja kuidas see kujundusega kombineeritakse.
2. samm
Pärast menüü tüübi valimist avage oma lehefail mis tahes tekstiredaktoriga, mida HTML-i muutmiseks kasutate. Liikuge soovitud koodilõigule, kuhu soovite oma liidese elemendi lisada.
3. samm
Pärast seda tehke valikute loend, luues ploki ja tehes nummerdatud loendi, millele on määratud id. Näiteks:
- Link 1
- Link 2
- Link 3
Selles näites lõin kolmest elemendist koosneva loendi ja panin selle ID-paneeli ID-ga div-kihti.
4. samm
Minge oma lehe jaotise plokki ja looge sobiv kaskaadstiilis lehe menüü. Kui soovite luua horisontaalse menüü, võite kaasata saadud loendi sisese atribuudi:
#panel ul li {display: inline; }
5. samm
Horisontaalse joone loomiseks kogu lehe pikkuses võite kasutada järgmist koodi:
#panel ul {margi vasakul: 0; polster: 2px 0; }
6. samm
Seejärel saate visuaalselt jagada ristkülikuteks:
#panel ul li a {margi vasakul: 3px; ääris: 1px; polster: 2px 3px; taust: sinine; }
See kood seab ääristuselementide teksti taanded vasakpoolse veerise ja polsterduse atribuutide kaudu ning määrab ka loendiüksuste taustavärvi. Selles näites on värv sinine, kuid saate seda oma äranägemise järgi muuta.
7. samm
Vahekaardil valitud praeguse lehe üksusele osutamiseks määrake avatud klassi sobivad parameetrid:
#menu ul li a # avatud {taust: punane; ääris-põhi: 1px; }
Paneelil valitud praegune leht kuvatakse nüüd punasega.
8. samm
Salvestage faili muudatused ja kontrollige kirjutatud koodi funktsionaalsust, avades oma lehe brauseri kaudu. Täiendavate kuvamisvalikute määramiseks võite objekti välimuse parandamiseks alati lisada CSS-i või HTML-i.
