Menü Megtervezése A Webhelyen

Tartalomjegyzék:

Menü Megtervezése A Webhelyen
Menü Megtervezése A Webhelyen

Videó: Menü Megtervezése A Webhelyen

Videó: Menü Megtervezése A Webhelyen
Videó: UI ПРАКТИКА // ЧАСТЬ 2 // ДАШБОРД 2024, December
Anonim

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.

Menü megtervezése a webhelyen
Menü megtervezése a webhelyen

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.

Ajánlott: