Hogyan építsünk fel egy navigációs sávot

Programozás

Navigációs sávok

A navigációs sávok minden webhely nagyon fontos elemei. Ők biztosítják a navigáció fő módszerét azáltal, hogy a felhasználóhoz vezető linkek fő listáját adják meg. Számos módszer létezik a navigációs sáv létrehozására. A navigációs sáv létrehozásának legegyszerűbb módja egy rendezetlen lista használata és CSS-sel történő stílusosítása.

A navigációs sávok többnyire

    vízszintesen elrendezett és stílusú listák.

    A navigációs sávok stilizálása közben gyakran eltávolítják a

      és
    • címkék, valamint az automatikusan beillesztett pontok:

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

      Példa:

      A navigációnak két része van: a HTML és a CSS. Ez csak egy gyors példa.

      
       
        
        
      • 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; }