css — Горизонтальное меню в два ряда
Задать вопрос
Вопрос задан
Изменён 2 года 10 месяцев назад
Просмотрен 288 раз
<nav>
<ul>
<li><a>Головна</a></li>
<li><a>О компании</a></li>
<li><a>Информация о том как доехать</a></li>
<li><a>О нас</a></li>
<li><a>Продукции</a></li>
<li><a>Наши успехи</a></li>
<li><a>Наши работники</a></li>
<li><a>Наши зарплаты</a></li>
</ul>
</nav>
.
menu-8 ul {
display: flex;
background-color: #188bcc;
border: 2px solid #0b00ff;
list-style: none;
justify-content: space-between;
}
.flex-item-h{
color: white;
}
.menu-8 ul a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
.flex-item-h:hover {
background-color: white;
color: #188bcc; /* Цвет ссылки */
}
Как сделать так как на картинке
- css
- css3
- html5
- flexbox
*полный экран
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
ul { list-style-type: none; }
.nav {
max-width: 850px;
margin: 0 auto;
background-color: blue;
border: 2px solid black;
}
.nav__list {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
color: #fff;
}
.nav__item {
font-size: 18px;
padding: 15px;
cursor: pointer;
}
. nav__item:hover {
background-color: #fff;
color: blue;
}
nav__item:hover {
background-color: #fff;
color: blue;
}<nav role="navigation">
<ul>
<li>Главная</li>
<li>О компании</li>
<li>Информация о том, как доехать</li>
<li>О нас</li>
<li>Продукция</li>
<li>Наши успехи</li>
<li>Наши работники</li>
<li>Наши зарплаты</li>
</ul>
</nav>1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как создать меню с горизонтальной прокруткой
schoolsw3.
com
САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
❮ НазадВперед ❯
Узнать, как создать горизонтальное прокручиваемое меню с помощью CSS.
Меню с горизонтальной прокруткой
ГлавнаяНовостиКонтактО НасПоддержкаБлогИнструментыОсноваЗаказыБольшеЛоготипДрузьяПартнерыЛюдиРабота
Редактор кода »
Создать меню с горизонтальной прокруткой
Шаг 1) Добавить HTML:
Пример
<div>
<a href=»#home»>Главная</a>
<a href=»#news»>Новости</a>
<a href=»#contact»>Контакт</a>
<a href=»#about»>О Нас</a>
…
</div>
Шаг 2) Добавить CSS:
Трюк, чтобы сделать навигационную панель прокручиваемой с помощью overflow:auto и white-space: nowrap:
Пример
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.
scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
Редактор кода »
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.
❮ НазадВперед ❯
ВЫБОР ЦВЕТА
ТОП Учебники
HTML УчебникCSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML СправочникCSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML ПримерыCSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.
CSS ПримерыBootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры
Форум | О SchoolsW3
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.
Создание центральной горизонтальной навигации – Мастерство CSS – Оптимизация веб-производительности
Автор: Гарри Робертс на Мастерство CSS .
Содержание- Демо
- Обновление
Центрировать элементы уровня блока легко, просто задайте ширину и установите margin:0 auto;
text-align:center; но это также не будет работать на блочных элементах шириной 100%… это только
работать с элементами текстового уровня. По возможности всегда следует избегать явного определения ширины и высоты,
так как это сделает документ намного менее ориентированным на будущее, гибким и
расширяемый… Предположим, у вас есть четыре пункта в меню навигации — вы можете работать
уменьшите их ширину и используйте margin:0 auto; , чтобы отцентрировать их. Добавление пятого
увеличит ширину, а это означает, что вам также нужно будет изменить CSS. это далеко
от идеала, и тем более с CMS для работы сайта (клиент может добавлять страницы,
но, возможно, не может редактировать CSS).
Однако есть способ сделать горизонтальную навигацию по центру, не зная явную ширину и не добавляя CSS. Это также удивительно легко.
Наценка:
<ул>
Довольно стандартный, неупорядоченный список пунктов меню. CSS находится там, где он есть. Я выделил биты, которые выполняют большую часть работы:
.nav{
граница: 1px сплошная #ccc;
ширина границы: 1px 0;
стиль списка: нет;
маржа: 0;
заполнение: 0;
выравнивание текста: по центру;
}
.nav ли {
дисплей: встроенный;
}
.nav {
дисплей: встроенный блок;
отступ: 10 пикселей;
} Здесь я просто создал список навигации и присвоил ему верхнюю границу.
и нижний (исключительно для выделения текста по центру).
Осталось display:inline; , то есть
они больше не занимают 100% доступной ширины, и теперь они хорошо складываются
друг против друга. Затем мы используем (намного недоиспользованный) display:inline-block; , чтобы убедиться, что ссылки
сами не разбиваются на новые строки, но по-прежнему подчиняются любым значениям заполнения
соответственно. Здесь я увеличил область попадания, добавив padding:10px;
Вы могли бы, если хотите, применить встроенный блок к работать только с элементами, которые изначально
встроенные элементы. дисплей: встроенный блок; не будет работать с блочными элементами.
Вот небольшая демонстрация. Попробуйте использовать Firebug или аналогичный для добавления
другие элементы списка на лету и наблюдайте, как они органично центрируются в списке.
Обновление
Вы спросили, и я услышал; Я сделал выпадающую версию с помощью CSS.
для тебя. Строка верх: 100%; заставит раскрывающийся список работать в IE7, но вроде
немного портит опыт во всех других браузерах. Оставите ли вы его или
не зависит от вас. Опять же, просмотр исходного кода с практическими рекомендациями…
☕️ Помогло? Купи мне кофе!
Очень простая горизонтальная навигационная панель
Мне пришло в голову, что, хотя я писал руководства по навигационным панелям с вкладками, выпадающим навигационным панелям и даже горизонтальным ниспадающим навигационным панелям, я никогда не останавливался, чтобы объяснить, как построить простая горизонтальная панель навигации без излишеств. И в большинстве случаев простая панель навигации — это именно то, что доктор прописал.
Итак, сегодняшнее руководство посвящено возвращению к основам. Это то, что вам нужно знать, чтобы создать простую панель навигации, подобную той, что изображена выше (и вы можете увидеть рабочий пример здесь).
Список
Как и большинство современных панелей навигации, наша будет основана на теге неупорядоченного списка (
- ). Это имеет семантический смысл, панель навигации на самом деле не что иное, как список ссылок, ведущих на ваш сайт. Традиционная горизонтальная ориентация — это просто удобный способ разместить все самые важные элементы списка «вверху», чтобы пользователь мог их видеть, не прокручивая страницу вниз.
Итак, вот наш образец HTML:
Это действительно все, что нужно! Вы заметите, что я использовал один идентификатор, чтобы мы могли отличить нашу панель навигации от всех других неупорядоченных списков на странице.
Но если бы это было спрятано в div со своим собственным идентификатором (например, div «баннер» или «заголовок»), идентификатор, вероятно, не был бы необходим. И да, я мог бы добавить еще больше идентификаторов и классов, если бы хотел сделать это более привлекательным, но сегодня мы все стремимся к простоте.
Сделать его горизонтальным
По умолчанию наш список вертикальный. Итак, давайте сделаем его горизонтальным:
#nav {
ширина: 100%;
плыть налево;
поле: 0 0 3em 0;
заполнение: 0;
стиль списка: нет; }
#нав ли {
плыть налево; } Здесь мы перемещаем как наш список, так и элементы списка слева. Плавающие элементы списка влево — это то, что вытягивает их в красивый горизонтальный ряд для нас, укладывая элементы слева направо. Однако из-за того, как ведут себя числа с плавающей запятой, наш содержащий список схлопнется до нулевой высоты, если он также не будет перемещен влево.
И это не было бы серьезной проблемой, за исключением того, что я планирую позже придать моему списку цвет фона, который я хочу показать за элементами своего списка, и если мой список рухнет, этого не произойдет.
Вот почему я задаю моему списку ширину 100%: таким образом, он заполнит всю ширину страницы (или ее контейнера, если он находится в контейнере с установленной шириной).
Я также удаляю большую часть полей и отступов, чтобы список вел себя как надо (я оставляю некоторое поле внизу, просто для эстетических целей), и устанавливаю для стиля списка значение «none», что удаляет пули из моего списка.
На данный момент наша навигационная панель выглядит примерно так:
Конечно, ничего стильного (и, вероятно, сложного в использовании, к тому же), но верите вы или нет, большая часть нашей тяжелой работы уже сделана! Из этой базовой структуры вы можете создать любое количество уникальных навигационных панелей. Но давайте немного стилизуем нашу.
Во-первых, мы добавим нашей навигационной панели фон и некоторые границы, обновив наш CSS #nav следующим образом:
#nav {
ширина: 100%;
плыть налево;
поле: 0 0 3em 0;
заполнение: 0;
стиль списка: нет;
цвет фона: #f2f2f2;
нижняя граница: 1px сплошная #ccc;
верхняя граница: 1px сплошная #ccc; } И давайте дадим нашим якорным тегам немного простора и стиля:
#nav li a {
дисплей: блок;
отступ: 8px 15px;
текстовое оформление: нет;
вес шрифта: полужирный;
цвет: #069;
граница справа: 1px сплошная #ccc; } Здесь я даю привязкам отображение «блок», чтобы убедиться, что они заполняют весь элемент списка и делают всю область доступной для кликов.