Css разделитель в горизонтальном меню

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

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

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

Пример

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

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

Пример

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

• float: left; — Используйте float, чтобы заставить блочные элементы скользить рядом друг с другом
• display: block; — Позволяет указать отступы (а также высоту, ширину, поля и т.д. если хочешь)
• padding: 8px; — Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому укажите некоторые отступы, чтобы они выглядели хорошо
• 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;
>

/* Измените цвет ссылки на #111 (черный) при наведении курсора */
li a:hover background-color: #111;
>

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

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

Пример

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

Выравнивание ссылок по правому краю путем перемещения элементов списка вправо (float:right;):

Пример

Разделители границ

Пример

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

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

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

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

Фиксированная сверху

Фиксированная снизу

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

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

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

Пример

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

Липкая навигационная панель

, чтобы создать липкую навигационную панель.

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

Пример

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

Еще примеры

Отзывчивый Topnav

Как использовать CSS media запрос для создания адаптивной верхней навигации.

Отзывчивый Sidenav

Как использовать CSS media запрос для создания адаптивной боковой навигации.

Выпадающая Navbar

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

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

Кто как делает полоску между пунктами в горизонтальном меню?

Полоска обычно меньше высоты блока. На stackoverflow, например, полоска сделана как отдельный символ «|». Признаться, я тоже так делал, но всегда думал что это не правильно и есть более рациональные способы. Сейчас склоняюсь к background-image.

Оценить 1 комментарий

возможно такой вариант ( я в теме не так уж и давно )

Если принципиально с изображением, то:
ul li + li:before

Все гораздо проще.
ul padding:5px;
>
li display:inline;
border-left:1px solid #bbb;
padding:0 2px 0 4px;
>
li:first-child border:none;
>

Я делаю бордером, а если нужна полоска меньше высоты блока, то можно вложенные блоки сделать меньше чем внешний.

А с чего это числу меняться то? ul > li > a — бордер задаю для li, размеры можно менять у li и a соответственно.

Аналогично, левая или правая граница элемента закрашивается как нужно. Но нужно отработать отсутствие этой границы для первого или последнего элемента — обычно введением класса .first с переопределенной в 0px none границей. Плюсы по сравнению с background — не грузится картинка — а это оптимизация обращений к серверу.

Да, именно с помощью bg-image:

ul.topNav li display: inline;
width: 10em;
height: 36px;
float: right;
padding-top:9px; margin:0px;
background-image: url(../images/header_divider.gif);
background-repeat:no-repeat;
background-position: top left;
>

Не нужны никакие background, лишний трафик, просто как уже сказано border прописать, для большей живости можно делать их разными оттенками, тогда будет эффект «впадины».

Войдите, чтобы написать ответ

Как изменить цвет svg не меняя исходный файл?

Источник