Menuen bruges til at lette brugernavigation gennem sektionerne på siden. For at tiltrække den besøgende opmærksomhed skal menuen være funktionel, nem at bruge og samtidig kombineres med designet af hele ressourcen.
Instruktioner
Trin 1
Inden du opretter en menu, skal du bestemme dens type. Du kan oprette et rullemenu vandret eller lodret felt, der vises for brugeren, når brugeren svæver over det med musemarkøren. Når du vælger en bestemt menu, kan du blive styret af, hvor praktisk det vil være for besøgende at bruge den, og hvordan den kombineres med designet.
Trin 2
Når du har valgt en menutype, skal du åbne din sidefil ved hjælp af den teksteditor, du bruger til at redigere HTML. Naviger til det ønskede afsnit af kode, hvor du vil indsætte dit interface-element.
Trin 3
Derefter oprette en liste over muligheder ved at oprette en blok og oprette en nummereret liste med id tildelt den. For eksempel:
- Forbindelse 1
- Forbindelse 2
- Forbindelse 3
I dette eksempel oprettede jeg en punktliste med tre elementer og placerede den i et div-lag med ID-panel-id'et.
Trin 4
Gå til sektionsblokken på din side, og opret den passende menu til kaskadestilark. Hvis du vil oprette en vandret menu, kan du medtage den integrerede attribut for den resulterende liste:
#panel ul li {display: inline; }
Trin 5
For at oprette en vandret linje langs hele sidens længde kan du bruge følgende kode:
#panel ul {margin-left: 0; polstring: 2px 0; }
Trin 6
Derefter kan du udføre den visuelle opdeling i rektangler:
#panel ul li a {margin-left: 3px; kant: 1px; polstring: 2px 3px; baggrund: blå; }
Denne kode angiver tekstindryk fra kantelementer gennem attributterne margin-left og polstring og indstiller også en baggrundsfarve for hvert af listeelementerne. I dette eksempel er farven blå, men du kan ændre den efter eget skøn.
Trin 7
For at pege på elementet på den aktuelle side, der er valgt i fanen, skal du indstille de relevante parametre til den åbne klasse:
#menu ul li a # åben {baggrund: rød; kant-bund: 1 px; }
Den aktuelle side, der er valgt i panelet, vises nu med rødt.
Trin 8
Gem ændringerne i filen, og kontroller funktionaliteten af den skrevne kode ved at åbne din side via en browser. For at indstille yderligere visningsmuligheder kan du altid tilføje CSS eller HTML for at forbedre objektets udseende.
