Menyn används för att underlätta användarnavigering genom sektionerna på webbplatsen. För att locka besökarens uppmärksamhet bör menyn vara funktionell, enkel att använda och samtidigt kombineras med utformningen av hela resursen.
Instruktioner
Steg 1
Innan du skapar en meny, bestäm vilken typ. Du kan skapa en nedrullningsbar horisontell eller vertikal ruta som visas för användaren när användaren svävar över den med muspekaren. När du väljer en viss meny kan du vägledas av hur bekvämt det är för besökare att använda den och hur den kommer att kombineras med designen.
Steg 2
När du har valt en menytyp öppnar du din sidfil med vilken textredigerare du använder för att redigera HTML. Navigera till önskad kodsektion där du vill infoga ditt gränssnittselement.
Steg 3
Skapa sedan en lista med alternativ genom att skapa ett block och skapa en numrerad lista med id tilldelat det. Till exempel:
- Länk 1
- Länk 2
- Länk 3
I det här exemplet skapade jag en punktlista med tre element och placerade den i ett div-lager med ID-panelens ID.
Steg 4
Gå till sektionsblocket på din sida och skapa lämplig kaskadmeny för kalkylblad. Om du vill skapa en horisontell meny kan du inkludera inline-attributet för den resulterande listan:
#panel ul li {display: inline; }
Steg 5
För att skapa en horisontell linje längs hela sidans längd kan du använda följande kod:
#panel ul {margin-left: 0; stoppning: 2px 0; }
Steg 6
Då kan du göra den visuella uppdelningen i rektanglar:
#panel ul li a {margin-left: 3px; gräns: 1px; stoppning: 2px 3px; bakgrund: blå; }
Den här koden ställer in textindrag från kantelement genom attributen marginal-vänster och stoppning, och anger också en bakgrundsfärg för vart och ett av listobjekten. I det här exemplet är färgen blå, men du kan ändra den efter eget gottfinnande.
Steg 7
För att peka på objektet på den aktuella sidan som väljs på fliken, ställ in lämpliga parametrar till den öppna klassen:
#meny ul li a # öppen {bakgrund: röd; border-bottom: 1px; }
Den aktuella sidan som valts i panelen visas nu i rött.
Steg 8
Spara ändringarna i filen och kontrollera funktionaliteten hos den skrivna koden genom att öppna din sida via en webbläsare. För att ställa in ytterligare visningsalternativ kan du alltid lägga till CSS eller HTML för att förbättra objektets utseende.
