Die menu word gebruik om gebruikersnavigasie deur die afdelings op die werf te vergemaklik. Om die aandag van die besoeker te trek, moet die spyskaart funksioneel, maklik om te gebruik en terselfdertyd gekombineer word met die ontwerp van die hele bron.
Instruksies
Stap 1
Voordat u 'n spyskaart skep, moet u die tipe kies. U kan 'n aftrekvlak horisontaal of vertikaal opstel wat aan die gebruiker getoon sal word wanneer die gebruiker met die muisaanwyser daaroor beweeg. As u 'n spesifieke spyskaart kies, kan u lei deur hoe gemaklik dit vir besoekers is om dit te gebruik en hoe dit met die ontwerp gekombineer sal word.
Stap 2
Nadat u 'n kieslys gekies het, maak u die bladsy-lêer oop met behulp van die teksredigeerder wat u gebruik om HTML te wysig. Navigeer na die gewenste gedeelte van die kode waar u u koppelvlakelement wil invoeg.
Stap 3
Maak daarna 'n lys met opsies deur 'n blok te skep en 'n genommerde lys te maak met die ID wat daaraan toegeken is. Byvoorbeeld:
- Skakel 1
- Skakel 2
- Skakel 3
In hierdie voorbeeld het ek 'n lys met drie elemente opgestel en dit in 'n div-laag geplaas met die ID-paneel-ID.
Stap 4
Gaan na die afdelingblok van u bladsy en skep die toepaslike waterval-stylmenu. As u 'n horisontale spyskaart wil skep, kan u die ingeboude kenmerk vir die resulterende lys insluit:
#panel ul li {vertoon: inlyn; }
Stap 5
Om 'n horisontale lyn oor die hele lengte van die bladsy te skep, kan u die volgende kode gebruik:
#paneel ul {marge-links: 0; opvulling: 2px 0; }
Stap 6
Dan kan u die visuele verdeling in reghoeke doen:
#panel ul li a {margin-left: 3px; grens: 1px; opvulling: 2px 3px; agtergrond: blou; }
Hierdie kode stel teksinspringe van randelemente deur die marge-links- en vullingseienskappe, en stel ook 'n agtergrondkleur vir elk van die lysitems. In hierdie voorbeeld is die kleur blou, maar u kan dit na eie goeddunke verander.
Stap 7
Om na die item op die huidige bladsy te wys wat op die blad gekies is, stel die toepaslike parameters in die oop klas:
# menu ul li a # oop {agtergrond: rooi; grens-onderkant: 1px; }
Die huidige bladsy wat in die paneel gekies is, sal nou in rooi vertoon word.
Stap 8
Stoor die veranderinge in die lêer en kyk na die funksionaliteit van die geskrewe kode deur u bladsy deur 'n blaaier te open. Om addisionele vertoningsopsies in te stel, kan u altyd CSS of HTML byvoeg om die voorkoms van die voorwerp te verbeter.
