Как сделать навигацию по сайту в html
Тег задает навигацию по сайту. Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов в документе. Запрещается вкладывать внутрь .
Синтаксис
Атрибуты
Закрывающий тег
HTML5 IE Cr Op Sa Fx
nav Чебурашка и крокодил Гена
Добро пожаловать!
Результат данного примера показан на рис. 1.
Рис. 1. Навигация по сайту
Браузеры
Internet Explorer до версии 8.0 включительно игнорирует тег , но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV .
Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.
Статьи по теме
- Новые теги
- Что всё это значит?
Как добавить панель навигации на свой сайт
Это руководство объяснит, как построить простую адаптивную навигационную панель на настольных компьютерах и мобильных устройствах.Готовы ли вы начать создание вашего навигационного бара?Я тоже пойдем.
Почему вам нужен навигационный бар
Если ваши сайты имеют несколько страниц на них, вы можете захотеть для ваших посетителей легко перемещаться между страницами вместо того, чтобы набрать URL-адрес каждый раз, когда они хотят изменить страницы.Это руководство будет перейти, как создать следующую навигационную панель.
Составить план
В зависимости от вашего сайта может быть немало разных поддоменов.Однако для обеспечения простоты доступа к посетителям, навигационная панель должна включать только умеренные ссылки.Настало время решить, какие ссылки должны быть включены, и любой дополнительный контент, такой как ссылки для социальных сетей или вход в систему, которые необходимо включить.
Создание NAVBAR для index.html
Перед созданием стилей для NAVBAR элементы и класс необходимо определить на странице index.html, которая будет служить домашней страницей вашего сайта.
Шаг первый: Создание навки
Этот пример использует тег \
- Список предметов.
Шаг второй: Создание классов и ссылок
Ваш сайт, вероятно, будет использовать панель навигации на нескольких страницах, что может также позвонить подобным элементам.Чтобы убедиться, что правильные атрибуты определены в CSS, элементы вам понадобится использовать классы.
Вот пример добавления привязки HREF внутри каждого элемента списка, чтобы элементы были связаны с другой страницей.Это могут быть фактическими ссылками, такими как Issica.com/blog или имена файлов, как показано здесь:
Шаг третий: Добавление иконок социальных медиа
В этом примере социальные медиа используют SVG иконы.Это руководство использует общественное достояние иконы. Они были добавлены в файловый менеджер и вызывают через свой путь / имя файла.
На изображении иконки социальных медиа имеют очень разное форматирование, чем ссылки на страницу и можно увидеть на нижней левой стороне.Выполняется путем добавления контейнера DIV и создавая два класса.Класс Div — «социальный» и социальные сети Li Class.
Вот что навигация навигации в этом примере HTML будет выглядеть для вашей страницы Index.HTML:
Форматировать свою навку в CSS.CSS
Чтобы уменьшить избыточность или перекрытие форматирования, начните с самого «широкого» элемента или класса, затем работать.
Шаг четвертый: Сделайте вертикальную новар.
Чтобы сделать вертикальную навигационную панель накрыть всю сторону экрана, необходимо настроить некоторые форматирование.Во-первых, верхняя часть (положение сверху) должна быть изменена на ноль с фиксированным положением.Во-вторых, высота должна быть на 100%, а ширина будет зависеть от макета вашего сайта.Это где цвет фона (включая непрозрачность) будет вызван.Вот как выглядит класс Navbar пример:
Шаг пятый: Форматирование каждого элемента и класса.
Чем более конкретно вы хотите быть включенным, элемент, который должен быть более конкретно вызываемым в CSS.Например, классы могут использоваться на различных типах элементов, когда в CSS есть параметр, чтобы вызвать общий класс и конкретный элемент в этом классе.
Например, чтобы позвонить в общем классе Div Class Class, выглядит так:
Тем не менее, чтобы позвонить конкретному элементу в классе, подобно такому, как якорь элемента списка в классе социальных медиа будет выглядеть
У UL и Li Tags имеют несколько предопределенных настроек.Пулевые точки и подчеркивания могут быть удалены в этом примере, добавив этот атрибут к элементу UL.NAVBAR Li A A
Вот пример того, что CSS.CSS для навигационной панели в этом примере выглядит как:
Шаг шестой: Добавление эффекта зависания
Как видно в вышеуказанном сегменте кода, эффект зависания зависания может быть добавлен путем включения раздела: Hover к тому, что элемент должен быть затронут, показан здесь:
Сделать это отзывчиво
Отредактируйте свои разделы @Media, чтобы создать больше параметров макета в зависимости от размера экрана, как показано здесь:
Вертикальная навигационная панель не может быть лучшей подходящей для сайта, в зависимости от размера экрана.Тем не менее, добавление некоторых кодов к тегам @media может создать адаптивную навку.
Шаг седьмой: Перейти на горизонтальную навбар
Текущие CSS.CS имеют навигационную панель как вертикаль, это может быть изменено путем переопределения атрибутов высоты и ширины.
Поскольку ссылки и иконки ранее были отформатированы для отображения горизонтально, их атрибуты должны быть обновлены.Вот примеры @media разделы для размеров экрана 900px и 400px
Проверьте свой сайт!
Чтобы подготовиться к различным типам трафика, проверить свой сайт, используя несколько браузеров, таких как Mozilla, Chrome и Safari.Кроме того, проверьте, чтобы убедиться, что все ваши ссылки работают и указывают на правильное местоположение.
Для справки
Вот весь код, используемый в этом руководстве для вашего удобства:
index.html
css.css
body < background-image:url('background-background-image-blue-sky-1054218.jpg'); background-size: 2000px; background-repeat: no-repeat; margin:0px; >ul.navbar < top:0; position:fixed; background-color:#9e9e9e7a; margin: 0; padding:0.25em; list-style-type: none; width: 15%; height: 100%; >.social < position:fixed; bottom:0; >li < display:block; >ul.navbar li a < font-size:25px; color: rgb(11, 11, 11); float:none; text-decoration: none; >ul.navbar li a:hover < color:blueviolet; >ul.navbar li.socialmedia < float:left; padding:5px; >.content < font-family: verdana; color:black; margin: 20% 0 0 15%; text-align:center; >h1 < font-size: 75px; text-shadow: 1px 3px 8px grey; >p < font-size: 40px; text-shadow: 1px 1px 3px lightgrey; >p2 < display:none; >@media screen and (max-width: 900px) < body< background-size: 1500px, 1000px; max-width: 1000px; min-width: 400px; height:100%; >.content < margin-top:20%; margin-left: 0; >h1 < font-size: 3em; >p < display:none; >p2 < display:none; >.social < position:relative; >ul.navbar < max-width: 900px; width: 100%; height: 50px; position: fixed; top: 0; >ul.navbar li a < float: left; padding:5px; >ul.navbar li.socialmedia < float:right; margin-top:0; >> @media only screen and (max-width: 500px) < body < background-size: 900px, 100%; max-width: 400px; >.content < padding:10px; margin-top:45% >h1 < display:none; font-size: 25px; >p < display:none; font-size: 20px; >p2 < font-size: 45px; display:block; text-shadow: 1px 5px 10px lightgrey; >ul.navbar < float:none >.socialmedia
Coming Soon
- Home
- Blog
- About
- Contact
-
-
-
