Как сделать навигационное меню в html и css

как в одну строку сделать данное меню?

Вот мой результат какой результат я хочу

Отслеживать
373 1 1 золотой знак 4 4 серебряных знака 23 23 бронзовых знака
задан 29 июн 2022 в 10:38
Гор Манучарян Гор Манучарян
341 2 2 серебряных знака 14 14 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

*, *::after, *::before < box-sizing: border-box; margin: 0; padding: 0; >.header < background: rgba(250, 240, 240, 0.747); width: 100%; /* Full width */ position: fixed; margin: 0px; font-family: 'Nunito', sans-serif; >.menu < margin: 0; justify-content: space-between; >.menu, .menu-secondary < display: flex; align-items: center; >.menu-secondary>li

Отслеживать
ответ дан 29 июн 2022 в 10:47
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
спасибо большое!!
29 июн 2022 в 10:48

• html
• css
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Имея легкий в использовании навигации имеет важное значение для любого веб-сайта.

С помощью CSS вы можете превратить скучные меню HTML в симпатичных панели навигации.

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

Панель навигации необходим стандартный HTML в качестве базы.

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

и
элементы имеет смысл:

пример

Теперь давайте уберем пули и поля и отступы из списка:

пример

ul <
list-style-type: none;
margin: 0;
padding: 0;
>

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

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

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

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

пример

li a <
display: block;
width: 60px;
>

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

пример

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

li a display: block;
>

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

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

пример

ul <
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
>

li a display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
>

/* Change the link color on hover */
li a:hover background-color: #555;
color: white;
>

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

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

пример

.active <
background-color: #4CAF50;
color: white;
>

Центр Ссылки & Добавить границы

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

пример

li text-align: center;
border-bottom: 1px solid #555;
>

li:last-child border-bottom: none;
>

Полноразмерные Фиксировать вертикально Navbar

Создание полной высоты, «sticky» боковой навигации:

пример

ul <
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
>

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

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

Есть два способа создания горизонтальной панели навигации. Использованиевстроенных или плавающихэлементов списка.

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

пример

li <
display: inline;
>

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

Плавающий элементов списка

пример

a display: block;
padding: 8px;
background-color: #dddddd;
>

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

пример

ul <
background-color: #dddddd;
>

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

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

пример

ul <
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
>

li a display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Change the link color to #111 (black) on hover */
li a:hover background-color: #111;
>

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

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

пример

.active <
background-color: #4CAF50;
>

Щелкните правой кнопкой Align ссылки

Right выравнивать ссылки плавучим пункты списка вправо ( с float:right; ):

пример

Пограничные делители

пример

/* Add a gray right border to all list items, except the last item (last-child) */
li border-right: 1px solid #bbb;
>

li:last-child border-right: none;
>

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

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

Фиксированный Вверх

ul <
position: fixed;
top: 0;
width: 100%;
>

Фиксированный Bottom

ul <
position: fixed;
bottom: 0;
width: 100%;
>

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

Серый Горизонтальный Navbar

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

пример

ul <
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
>

Еще примеры

Отзывчивый Topnav
Как использовать CSS3 медиа запросов для создания гибкой верхней панели навигации.

Отзывчивый Sidenav
Как использовать CSS3 медиа запросов для создания гибкой боковой навигации.

Выпадающее Navbar
Как добавить выпадающее меню в панели навигации.

Фиксированное меню

Здесь вы узнаете, как сделать «фиксированное» меню при помощи CSS.

Как сделать фиксированное верхнее меню

Шаг 1) Добавляем HTML:

  
Главная Новости Контакты 
 
Кое-какой текст, чтобы было, что прокручивать..
 
 

Шаг 2) Добавляем CSS:

Чтобы создать фиксированное верхнее меню, используем свойства position:fixed и top:0 . Обратите внимание, что фиксированное меню навигации будет перекрывать остальной ваш контент. Чтобы это исправить, добавьте к контенту margin-top со значением равным или большим, чем высота вашего меню.

 /* Меню навигации */ .navbar < overflow: hidden; background-color: #333; position: fixed; /* Задаем фиксированную позицию */ top: 0; /* Позиция будет вверху страницы */ width: 100%; /* Ширина на весь экран */ >/* Стили ссылок меню навигации */ .navbar a < float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; >/* Меняем фоновый цвет при наведении мыши */ .navbar a:hover < background: #ddd; color: black; >/* Основной контент */ .main < margin-top: 30px; /* Добавляем верхний отступ, чтобы контент не перекрывался */ >

Как сделать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используем свойства position:fixed и bottom:0 .

 /* Меню навигации */ .navbar < position: fixed; /* Задаем фиксированную позицию */ bottom: 0; /* Позиция будет внизу страницы */ width: 100%; /* Ширина на весь экран */ >/* Основной контент */ .main < margin-bottom: 30px; /* Добавляем нижний отступ, чтобы контент не перекрывался */ >

Графическое CSS-меню

На большинстве сайтов навигационное меню оформляется с помощью обычных текстовых ссылок. Во-первых, такие ссылки хорошо индексируются поисковиками, а во-вторых, это самый простой способ. Но что делать, когда дизайн требует нестандартного решения? В этой статье я поделюсь своим опытом и покажу на примере, как создать навигационное меню, используя изображения, но при этом сохранить.

Многие web-мастера до сих пор представляют себе реализацию графического меню путём замены картинок с помощью JavaScript. Поисковые роботы на сегодняшний день не наделены такими способностями, чтобы считывать текст с самих картинок, но они успешно понимают атрибут ALT. Люди, которые занимаются оптимизацией и раскруткой сайтов хорошо знают, что этому атрибуту поисковики придают очень и очень маленькое значение. Как гласит теория, Яндекс атрибут ALT не учитывает вовсе.

Итак, в этой статье я расскажу и покажу, как сделать графическое динамическое CSS меню без использования JavaScript.

Вот такое меню:

Вот такое несложное, но очень даже привлекательное меню. Решение о графическом оформлении данного меню было принято только потому, что в нём используется нестандартный шрифт. Если бы использовался распространённый шрифт, например, Arial — я бы не написал эту статью.

Меню функционирует следующим образом. Активная ссылка, которая совпадает со страницей, на которой находится посетитель, всё время отображается оранжевым цветом. Остальные пункты при наведении курсора меняют свой цвет с тёмно-серого на оранжевый и обратно.

Замечу, что решение сделать меню с помощью списка — это лишь частный случай. В данной ситуации тэг LI является пунктом меню.

По кусочкам

Да, это фоновое изображение всего меню, на который будут накладываться ссылки. Меню имеет строго фиксированный размер, соответствующий размерам этого фона: 536 пикселей по ширине и 93 по высоте. Безусловно, такой подход накладывает некоторые ограничения на создание нового пункта меню. Например, чтобы в меню добавить дополнительный пункт, кроме создания самой картинки с текстом, необходимо вручную отредактировать фон. То же самое касается и удаления любого из пунктов.

Меню имеет идентификатор navbar, через который к нему можно смело обращаться через CSS:

#navbar < margin: 0; padding: 0; background: url(../img/nav-bg.gif) no-repeat 0 0; width: 536px; height: 93px; >

В результате чего браузер выдаёт следующий результат:

Средствами того же CSS нетрудно навести порядок с самими пунктами (LI):

#navbar li

Должен заметить, что результат уже больше похож на реальность:

Пояснения к коду:

• list-style: none — убирает маркер у элементов списка;
• float: left — принудительно выравнивает элемент по левому краю;
• position: relative — данное свойство необходимо, чтобы иметь возможность абсолютно позиционировать различные элементы внутри тэга LI (относительно его расположения на странице). К этому моменту я вернусь ещё не один раз.

Для каждого LI задан свой класс (about, facility, portfolio, vacancy и faq). Таким образом, каждому пункту задаётся определённая ширина:

#navbar li.about < width: 110px; >#navbar li.facility < width: 101px; >#navbar li.portfolio < width: 108px; >#navbar li.vacancy < width: 103px; >#navbar li.faq

Преимуществом рассматриваемого меню является то, что в нём используются не графические ссылки в прямом смысле, а сами ссылки состоят из текста, на который накладываются элементы с соответствующим фоновым изображением. Ниже с помощью CSS оформляется текстовый вид ссылок:

#navbar li a < display: block; position: absolute; top: 0; left: 0; font: 15px/29px "Arial Narrow"; text-decoration: none; white-space: nowrap; color: #666666; height: 29px; >#navbar li a:hover

Пояснения к коду:

• display: block — делает элемент страницы блочным. По-умолчанию ссылка имеет свойство display: inline, т.е. ведёт себя как строка. Но задавать координаты отображения и задавать определённую высоту с шириной можно только блоковым элементам;
• position: absolute — задаёт абсолютное свободное позиционирование.

Как сказано несколькими строчками выше, для блоков можно задавать координаты отображения. ВАЖНО понимать, относительно чего задаются эти координаты! В данном случае будет не лишним вспомнить, что для элементов LI было задано позиционирование relative. Таким образом, позиционирование ссылки внутри элемента LI происходит относительно границ этого элемента. Например, top: 0 говорит о том, что верхняя граница ссылки A примыкает к верхней границе элемента LI, в котором он находится.

Накладывание на текст

Честно говоря, полдела на этом этапе можно считать выполненным. Теперь стоит уделить внимание самим картинкам, которые будут НАКЛАДЫВАТЬСЯ на текст. Как пример, я буду использовать в примерах пункт .

Хочу заметить, что все пункты меню имеют одинаковую высоту, но разную ширину. Например, рассматриваемый пункт имеет размер 110 на 29 пикселей.

Обратите внимание, что под обозначениями 2, 3 и 5 картинки затемнены. Это сделано для зрительного восприятия, чтобы иметь представление о реальных размерах изображения.

Итак, всё по порядку: Для начала будет полезно вспомнить отрывок HTML кода:

Вставка   используется в каждом пункте перед закрытием ссылки. Как видно, тэг SPAN не содержит никакой информации, кроме пробела, представленного в символьной форме (только для того, чтобы не ругался валидатор). Но именно в этот тэг будут загружаться изображения и накладываться поверх текста!

Стоит сразу отметить, что SPAN располагается внутри элемента LI по аналогии с расположением ссылок. А именно:

#navbar li a span < cursor: pointer; display: block; position: absolute; float: left; top: 0; left: 0; background-position: 0 0; background-repeat: no-repeat; height: 29px; >#navbar li a:hover span

Пояснения относительно position: absolute, top: 0 и left: 0 давались выше при рассмотрении позиционирования ссылок внутри элемента LI. Здесь эти свойства играют аналогичную роль. Внимание стоит уделить другим свойствам, как:

• cursor: pointer — определяет форму курсора мыши. Из-за наложения SPAN поверх A в Internet Explorer сама ссылка работает, но курсор отображается как при наведении на обычный текст. Курсор pointer, применённый к SPAN, исправляет эту ситуацию;
• background-position: 0 0 — это свойство задаёт местонахождение фонового рисунка внутри элемента;
• height: 29px -задаёт высоту свободно позиционированного элемента. В данном примере высота элемента равна половине высоты картинки.

А теперь стоит ещё раз посмотреть на иллюстрацию выше, а точнее на обозначения 2 и 3. Высота фоновой картинки — 58 пикселей, что в два раза больше высоты пункта меню. Таким образом, отображается только половина фонового изображения. Ну а что делать со второй половиной — описано ниже.

Свойство background-position: 0 -29px используется для анимации фона при наведении курсора на ссылку. Оно говорит о том, что фоновое изображение должно сместиться вверх на 29 пикселей. Другими словами, в области видимости окажется нижняя половина фонового рисунка.

Честно говоря, правильно, что этот результат не отличается от предыдущего. Дело в том, что на данном этапе все подготовлено к тому, чтобы загрузить фоновые рисунки в соответствующие элементы (пункты). Для наглядности, загрузим фоновый рисунок в пункт (и именно в тэг SPAN):

#navbar li.about a span < background-image: url(../img/n1.gif); >

Вот теперь можно ещё раз посмотреть на результат:

Здесь при наведении курсора на пункт фоновое изображение сдвигается вверх на 29 пикселей, и надпись становится оранжевой. Аналогичным образом фоновые рисунки загружаются в оставшиеся пункты.

Текущая ссылка — проще простого!

После проделанной работы осталось одна небольшая мелочь — это выделить активную ссылку (которая совпадает с разделом сайта, в котором находится посетитель). Для этого ещё раз вспомни HTML код:

В данном случае особый интерес представляет первая строчка. Как видно, тэгу LI задан не один класс, а два: facility и active. Второй класс как раз и указывает на то, что посетитель сайта находится на соответствующей ссылке странице и что эту ссылку необходимо выделить из остальных. А точнее, как и при наведении курсора, сместить фоновое изображение внутри элемента на 29 пикселей вверх.

#navbar li a:hover span

Теперь меню готово и его можно использовать.

Работающий пример смотреть тут. Скачать в в архиве [ZIP; 97.1 Кб]