19 листопада 2022 р.

Навігація


    Навігацію слід розглядати як найбільш важливий елемент сайту, який надає змогу користувачеві легко і комфо́ртно переглядати Ваш сайт . Чи можете Ви уявити собі сайт без навігації? Навряд!
    Давайте ми розглянемо найпоширеніші варіанти навігації. Для будь-якого веб-сайту важлива проста у використанні навігація.

    Поширені варіанти навігації

    Під час розробки веб сайту  ми можемо створювати різні варіанти навігації. 
    Найбільш поширені варіанти - це горизонтальний та вертикальний. У прикладі вище ви можете спостерігати вертикальний список посилань, який за певних умов теж може бути використаний на сайті.
    Пізніше - у наступних публікаціях ми розглянемо кілька варіантів навігації, які можуть нам  знадобитися і зустрічаються доволі часто.

    Елемент навігаційної секції <nav>

    HTML-елемент<nav> визначає окрему секцію документа, призначення якої позначення навігаційних посилань (як усередині поточного документа, так і ведучих на іншу сторінку). 
    Він відноситься до семантичних HTML елементів і чітко визначає його зміст і описує своє значення як для браузера, так і для розробника.

    Примітки стосовно nav

    Не обов'язково всі посилання повинні бути обернуті тегами <nav> <nav>, їх слід використовувати лише для головних навігаційних блоків. Наприклад, <footer>часто містить список посилань, які не варто повертати до <nav>.
    Документ може містити декілька <nav>елементів. Наприклад, один для навігації сайтом, другий для навігації по сторінці.
    Агенти користувача, такі як пристрої читання з екрана, призначені для людей з поганим зором, можуть використовувати цей елемент, щоб визначити чи слід пускати рендеринг вмісту навігації.

    Що собою представляє навігація

    Панель навігації - це список посилань, який створюється за допомогою HTML тегів списку <ul> і <li>

    Приклад списку меню:

    <nav>
      <ul>
        <li><a href="#">Пункт меню 1</a></li>
        <li><a href="#">Пункт меню 2</a></li>
        <li><a href="#">Пункт меню 3</a></li>
        <li><a href="#">Пункт меню 4</a></li>
        <li><a href="#">Пункт меню 5</a></li>
      </ul>
    </nav>
    

    Так цей код буде виглядати в браузері:

    Виглядає так собі, не дуже! За допомогою CSS ви можете перетворити нудні HTML-меню на гарні навігаційні панелі, але про це пізніше.

    При застосуванні CSS вигляд меню можна зробити більш цікавим.

    У нижче наведеному прикладі пункти меню прописані з скороченням до початкової букви і номеру відповідно.
    Виглядає цікавіше! Надалі ми розглянемо окремо кожен вид меню і як його створювати.

    Використані джерела:

    https://developer.mozilla.org/
    https://www.w3schools.com/

    З повагою, Юрій Чернієвський! Керівник гуртка "WEB-Miditaur" науково – технічного напряму «WEB технології» ЦДЮТ Краснопільської селищної ради. Бакалавр, прикладна математика за спеціальним напрямом інформатика, Спеціаліст - інформатика, математик - програміст.

    Підтримайте
    Блог
    Якщо Вам сподобалася публікація і Ви вважаєте її корисною для інших, поділіться нею у соціальних мережах за допомогою кнопок, розміщених нижче та підпишіться на блог, щоб першими отримувати нові публікації корисного навчального контенту!
    Коментуйте публікацію, пишіть Ваші враження, залишайте питання в коментарях, якщо якісь моменти з публікації Вам залишилися не зрозумілими!

    0 Коментарів Підписатися на цей блог

    Поділитися цим