Як побудувати панель навігації

Навігаційні панелі

Панелі навігації є дуже важливим елементом будь-якого веб-сайту. Вони забезпечують основний спосіб навігації, надаючи користувачеві основний список посилань. Існує багато методів створення панелі навігації. Найпростіший спосіб створити панель навігації - скористатися невпорядкованим списком та стилізувати його за допомогою 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; }