A menü segítségével megkönnyíti a felhasználók navigálását a webhely szakaszain keresztül. A látogató figyelmének felkeltése érdekében a menünek működőképesnek, könnyen használhatónak és ugyanakkor a teljes erőforrás tervezésével kell kombinálnia.
Utasítás
1. lépés
A menü létrehozása előtt döntsön a típusáról. Létrehozhat egy legördülő vízszintes vagy függőleges mezőt, amely akkor jelenik meg a felhasználó számára, amikor a felhasználó az egér kurzorával fölé viszi az egeret. Egy adott menü kiválasztásakor eligazodhat, hogy a látogatók milyen kényelmesen fogják használni és hogyan fogják kombinálni a dizájnnal.
2. lépés
Miután kiválasztott egy menütípust, nyissa meg az oldalfájlt a HTML szerkesztéséhez használt szövegszerkesztővel. Keresse meg a kívánt kódrészt, ahová be akarja illeszteni a kezelőfelület elemét.
3. lépés
Ezt követően készítsen egy listát az opciókról egy blokk létrehozásával és egy számozott lista készítésével, amelynek azonosítója van hozzá rendelve. Például:
- 1. link
- 2. link
- 3. link
Ebben a példában három elemből álló, felsorolással ellátott listát hoztam létre, és egy div rétegbe helyeztem az ID panel azonosítójával.
4. lépés
Lépjen az oldal szakaszblokkjához, és hozza létre a megfelelő lépcsőzetes stíluslapmenüt. Ha vízszintes menüt szeretne létrehozni, akkor az eredményül kapott listához beillesztheti az inline attribútumot:
#panel ul li {display: inline; }
5. lépés
Vízszintes vonal létrehozásához az oldal teljes hosszában a következő kódot használhatja:
#panel ul {margó-bal: 0; párnázás: 2px 0; }
6. lépés
Ezután megteheti a vizuális felosztást téglalapokra:
#panel ul li a {margó-bal: 3px; szegély: 1px; párnázás: 2px 3px; háttér: kék; }
Ez a kód a szegélyelemekből beszúrja a szöveges behúzásokat a baloldali margó és a kitöltési attribútumokon keresztül, valamint beállít egy háttérszínt a listaelemek mindegyikéhez. Ebben a példában a szín kék, de saját belátása szerint módosíthatja.
7. lépés
Ha az aktuális oldalon a lapon kiválasztott elemre mutat, állítsa be a megfelelő paramétereket a nyitott osztályra:
#menu ul li a # nyitott {háttér: piros; alsó-alsó: 1px; }
A panelen kiválasztott aktuális oldal most piros színnel jelenik meg.
8. lépés
Mentse el a fájl módosításait, és ellenőrizze az írott kód működését az oldal böngészőn keresztüli megnyitásával. További megjelenítési beállítások megadásához mindig hozzáadhat CSS-t vagy HTML-t az objektum megjelenésének javítása érdekében.
