Hoe maak je een bewegende navigatiebalk in HTML

Hoe maak je een bewegende navigatiebalk in HTML


Een navigatiebalk niet is gedefinieerd in een unidirectioneel; op veel websites, zoals Google en Facebook, zijn voorzien van een navigatiebalk aan de bovenkant van de pagina. Maar u kunt ook voorzien van een navigatiebalk langs de onderkant of zijkant van de pagina--wat werkt het beste voor uw website. U zult moeten CSS en div lagen gebruiken voor het maken van een navigatiebalk waarmee wordt verplaatst samen met uw pagina als het rollen. Doordat de navigatiebalk verplaatsen samen met de pagina, uw bezoekers zal altijd in staat zijn om snel naar een andere pagina.

Instructies

1

Start een opmaakmodel in de < head > van een HTML-document; een opmaakmodel begint met < stijl type = "text/css" >.

2

Een ID voor het div-element dat zal uw navigatiebalk aanwijzen. Als u zin voor vraagpremie van uw div-laag "navigatie", zou u het element als:

navigatie { 3

Plaats uw laag waar u de navigatiebalk wilt blijven. Als u wilt dat een 25 pixels hoog navigatiebalk omvatten de volledige breedte van de pagina te zitten flush met de bovenrand van de browser, zou uw element bevatten:

navigatie {}

hoogte: 25px;
breedte: 100%;
positie: vast te stellen;
boven: 0px;
links: 0px;

De 'vaste' attribuut vertelt de laag wilt verplaatsen met uw pagina als de bezoeker rollen. Dit element wordt ondersteund in de belangrijke browsers: Internet Explorer, Mozilla Firefox, Safari en Google Chrome. U moet de marges in het lichaam van uw pagina om te zitten van de spoelen met de randen van de browser met navigatiebalk verwijderen:

lichaam {}
marge: 0px;}

Iets toegevoegd aan het body-element hier zal invloed hebben op het lichaam van uw webpagina; u kunt het wijzigen van de achtergrondkleur en beeld of het lettertype van uw pagina.

4

Stel de z-index voor uw element als uw navigatiebalk zal worden overlappende de inhoud van uw pagina als bezoekers scroll. De z-index definieert welke lagen worden op de top; het hoogste element is op de top, en de laagste is op de bodem. Het nummer maakt niet uit, net zo lang als een hoger dan de andere is. Als heb je alleen twee lagen--de navigatiebalk en de hoofdtekst van uw post--kan u veilig uw navigatiebalk ingesteld op twee. Sluit uw navigatie balk-element met het afsluitende haakje, bijvoorbeeld

navigatie {}

hoogte: 25px;
breedte: 100%;
positie: vast te stellen;
boven: 0px;
links: 0px;
z-index: 2;}

5

Sluit uw stylesheet met < / style >, boven de afsluitende tag voor de kop van uw document (< / head >). Alle andere inhoud op uw pagina zal vallen onder de navigatiebalk als u scroll naar beneden de pagina.

6

Maak de laag op uw pagina en vul in de navigatie inhoud, bijvoorbeeld

< div id = "navigatie" > Navigatie inhoud < / div >

De "id" moet dezelfde naam als de naam van het element in uw stylesheet. Uw pagina opslaan en testen van de navigatiebalk in uw browser.

Tips & waarschuwingen

  • U kunt het opmaken van uw hele website met behulp van CSS en lagen; Als u niet vertrouwd met CSS en hoe het werkt bent, biedt W3Schools gedetailleerde zelfstudies op HTML en CSS.
  • Syntaxis is belangrijk met CSS; Controleer dat uw dubbele punten en puntkomma in plaats, dat je niet elke vierkante haken mist en het gebruik van de juiste kenmerknamen.
  • Wees voorzichtig bij het instellen van een navigatiebalk; niet maken het zo groot dat het overweldigt de inhoud, en houd er rekening mee dat niet alle bezoekers de hetzelfde scherm resolutie en monitor stijl zoals u zullen hebben.