Meni se uporablja za lažje krmarjenje uporabnikov po odsekih na spletnem mestu. Da bi pritegnil pozornost obiskovalca, mora biti jedilnik funkcionalen, enostaven za uporabo in hkrati kombiniran z zasnovo celotnega vira.
Navodila
Korak 1
Preden ustvarite meni, se odločite za njegovo vrsto. Ustvarite lahko spustno vodoravno ali navpično polje, ki bo uporabniku prikazano, ko bo uporabnik levi nad njim s kazalcem miške. Pri izbiri določenega menija se lahko vodite po tem, kako priročno ga bodo obiskovalci uporabljali in kako bo kombiniran z zasnovo.
2. korak
Ko izberete vrsto menija, odprite datoteko strani s katerim koli urejevalnikom besedila, s katerim urejate HTML. Pomaknite se do želenega odseka kode, kamor želite vstaviti element vmesnika.
3. korak
Po tem naredite seznam možnosti tako, da ustvarite blok in sestavite oštevilčen seznam z dodeljenim ID-jem. Na primer:
- Povezava 1
- Povezava 2
- Povezava 3
V tem primeru sem ustvaril označen seznam treh elementov in ga postavil v plast div z ID-jem plošče ID.
4. korak
Pojdite na razdelek bloka na svoji strani in ustvarite ustrezen meni kaskadnega sloga. Če želite ustvariti vodoravni meni, lahko za nastali seznam vključite atribut inline:
#panel ul li {display: inline; }
5. korak
Če želite ustvariti vodoravno črto po celotni dolžini strani, lahko uporabite naslednjo kodo:
#panel ul {rob-levo: 0; oblazinjenje: 2px 0; }
6. korak
Nato lahko naredite vizualno delitev na pravokotnike:
#panel ul li a {margin-left: 3px; obroba: 1px; oblazinjenje: 2px 3px; ozadje: modro; }
Ta koda nastavi zamike besedila od obrobnih elementov skozi atribute levi rob in oblazinjenje ter nastavi barvo ozadja za vsak element seznama. V tem primeru je barva modra, vendar jo lahko spremenite po lastni presoji.
7. korak
Če želite pokazati na element na trenutni strani, ki je izbran na zavihku, nastavite ustrezne parametre v odprti razred:
#menu ul li a # odprto {ozadje: rdeča; rob-dno: 1 slikovnih pik; }
Trenutna stran, izbrana na plošči, bo zdaj prikazana v rdeči barvi.
8. korak
Spremembe shranite v datoteko in preverite delovanje napisane kode tako, da odprete svojo stran prek brskalnika. Če želite nastaviti dodatne možnosti prikaza, lahko vedno dodate CSS ali HTML, da izboljšate videz predmeta.
