Sådan oprettes en navigationslinje

Navigationsbjælker

Navigationsbjælker er et meget vigtigt element for ethvert websted. De giver den vigtigste navigationsmetode ved at give en hovedliste med links til en bruger. Der er mange metoder til at oprette en navigationslinje. Den nemmeste måde at oprette en navigationslinje på er at bruge en ikke-ordnet liste og style den med CSS.

Navigationsbjælker består for det meste af

    lister, der er vandret arrangeret og stylet.

    Mens du styler navigationsbjælkerne, er det almindeligt at fjerne den ekstra afstand, der oprettes af

      og
    • tags såvel som punktpunkter, der automatisk indsættes:

       list-style-type: none; margin: 0px; padding: 0px;

      Eksempel:

      Der er to dele til enhver navigation: HTML og CSS. Dette er bare et hurtigt eksempel.

      
             
      • Home
      • About
      • Contact
      /* Define the main Navigation block */ .myNav { display: block; height: 50px; line-height: 50px; background-color: #333; } /* Remove bullets, margin and padding */ .myNav ul { list-style: none; padding: 0; margin: 0; } .myNav li { float: left; /* Or you can use display: inline; */ } /* Define the block styling for the links */ .myNav li a { display: inline-block; text-align: center; padding: 14px 16px; } /* This is optional, however if you want to display the active link differently apply a background to it */ .myNav li a.active { background-color: #3786E1; }