Как да изградим лента за навигация

Навигационни ленти

Навигационните ленти са много важен елемент за всеки уебсайт. Те осигуряват основния метод на навигация, като предоставят основен списък с връзки към потребител. Има много методи за създаване на лента за навигация. Най-лесният начин да създадете лента за навигация е да използвате неподреден списък и да го оформите с CSS.

Навигационните ленти се състоят предимно от

Original text


    списъци, които са хоризонтално подредени и стилизирани.

    Докато стилизирате навигационните ленти, обикновено се премахва допълнителното разстояние, създадено от

      и
    • етикети, както и точките, които се вмъкват автоматично:

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

      Пример:

      Всяка навигация има две части: HTML и CSS. Това е само бърз пример.

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