как сделать верхнюю панель в html

Панель навигации

Наличие простой и понятной навигации жизненно важно для любого веб-сайта.

При помощи CSS вы можете преобразовать скучные HTML меню в красивые и удобные для использования навигационные панели.

Вертикальная

Горизонтальная

Панель навигации = Список ссылок

Для создания панели навигации в качестве базы нужен стандартный код HTML.

В наших примерах мы будем делать панели навигации из стандартных списков HTML.

и
идеально подходят для этих целей:

Теперь удалим у списка маркеры, отступы и поля:

• Удаляем маркеры: list-style-type: none; . В панели навигации маркеры списка не нужны.
• Зададим margin: 0; и padding: 0; , чтобы сбросить установки браузера по умолчанию.

Приведенный выше код является стандартным и используется как в вертикальных, так и в горизонтальных панелях навигации.

Вертикальная панель навигации

Чтобы создать вертикальную панель навигации, дополнительно к ранее рассмотренному коду добавляем стили для элементов , расположенных внутри списка:

 li a

• display: block; — Отображение ссылок как блоковых элементов делает всю область ссылки (а не только текст ссылки) кликабельной, а также позволяет определять ширину ссылки (при желании также можно задавать высоту, отступы, поля и т.д.)
• width: 60px; — По умолчанию блоковый элемент занимает всю ширину. Мы задаем ширину в 60 пикселей

 ul < list-style-type: none; margin: 0; padding: 0; width: 60px; >li a

Примеры вертикальных панелей навигации

Создадим базовую вертикальную панель навигации с серым фоном, ссылки которой меняют фоновый цвет при наведении курсора мыши:

 ul < list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; >li a < display: block; color: #000; padding: 8px 16px; text-decoration: none; >/* Изменяем цвет ссылки при наведении курсора */ li a:hover

Активная/текущая ссылка навигации

Добавим класс «active» для текущей ссылки, чтобы пользователь знал на какой странице он находится:

 .active

Центрирование ссылок и добавление рамок

. Если также нужна рамка внутри панели навигации, добавьте свойство border-bottom для всех элементов
, кроме последнего:

 ul < border: 1px solid #555; >li < text-align: center; border-bottom: 1px solid #555; >li:last-child

Вертикальная панель навигации, зафиксированная на всю высоту

Создаем «прилипающую» во всю высоту боковую панель навигации:

Предупреждение: Данный пример может работать некорректно на мобильных устройствах.

Горизонтальная панель навигации

Существует два способа создать горизонтальную панель навигации. Это сделать элементы списка строчными или применить обтекание.

Строчные элементы списка

• display: inline; — По умолчанию элемент
• является блочным элементом. Здесь же мы убираем перенос строки перед и после элементов и устанавливаем отображение их в одну строку

Обтекание элементов списка

 li < float: left; >a

• float: left; — Используем, чтобы заставить блочные элементы обтекать друг друга
• display: block; — Позволяет нам определить для ссылок поля (а также высоту, ширину, отступы и т.д.)
• padding: 8px; — Определяем поля между элементами , чтобы они выглядели красиво
• background-color: #dddddd; — Добавляем серый фон для элементов

Примеры горизонтальной панели навигации

Создаем базовую горизонтальную панель навигации темного цвета с изменяемым фоном ссылок при наведении на них курсора мыши:

 ul < list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; >li < float: left; >li a < display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; >/* При наведении мыши меняем фон ссылки на #111 (черный) */ li a:hover

Активная/текущая ссылка навигации

Добавим класс «active» для текущей ссылки, чтобы пользователь знал на какой странице он находится:

 .active

Выроненные справа ссылки

Можно выровнять ссылки по правому краю. Для этого задайте обтекание справа для элементов списка ( float: right; ):

Вертикальный разделитель ссылок

 /* Добавляем серую рамку справа от всех элементов списка */ li < border-right: 1px solid #bbb; >/* за исключением последнего (last-child) */ li:last-child

Зафиксированная панель навигации

Можно сделать так, чтобы, даже при прокрутке страницы панель навигации оставалась вверху:

или внизу страницы:

Предупреждение: Данные примеры могут работать некорректно на мобильных устройствах.

Прилипающая панель навигации

Прилипающий элемент переключается между значениями position: relative и position: fixed , в зависимости от его положения при прокрутке страницы. Пока элемент находится в видимой области просмотра, он ведет себя как со значением position: relative . Когда его положение достигает края области просмотра, он «прилипает» на месте (как при position: fixed ).

Примечание: Internet Explorer не поддерживает прилипающие элементы. В Safari нужно добавлять префикс -webkit- (см. пример выше). Также, чтобы прилипающий элемент заработал, нужно обязательно определить по меньшей мере одно из свойств top , right , bottom или left .

Как сделать — Верхнюю панель навигации

Узнать, как создать верхнюю панель навигации с помощью CSS.

Верхняя панель навигации

Создание верхней панели навигации

Шаг 1) Добавить HTML:

Пример

Пример

/* Добавить черный цвет фона для верхней навигации */
.topnav background-color: #333;
overflow: hidden;
>

/* Стиль ссылок внутри панели навигации */
.topnav a float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Изменение цвета ссылок при наведении курсора */
.topnav a:hover background-color: #ddd;
color: black;
>

/* Добавить цвет для активной/текущей ссылки */
.topnav a.active background-color: #4CAF50;
color: white;
>

Совет: Чтобы создать удобные для мобильных устройств, отзывчивые навигационные панели, прочитайте наш Как сделать — Отзывчивая верхняя навигация учебник.

Совет: Зайдите на наш CSS Навигация Учебник чтобы узнать больше о навигационных панелях.

Как добавить панель навигации на свой сайт

Это руководство объяснит, как построить простую адаптивную навигационную панель на настольных компьютерах и мобильных устройствах.Готовы ли вы начать создание вашего навигационного бара?Я тоже пойдем.

Почему вам нужен навигационный бар

Если ваши сайты имеют несколько страниц на них, вы можете захотеть для ваших посетителей легко перемещаться между страницами вместо того, чтобы набрать 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

  
Home
  
Blog
  
About
  
Contact