Меню на css горизонтальное: Горизонтальное меню на CSS

alexxlab

css — Горизонтальное меню в два ряда

Задать вопрос

Вопрос задан

Изменён 2 года 8 месяцев назад

Просмотрен 249 раз 

    <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 role="navigation">
  <ul>
    <li>Главная</li>
    <li>О компании</li>
    <li>Информация о том, как доехать</li>
    <li>О нас</li>
    <li>Продукция</li>
    <li>Наши успехи</li>
    <li>Наши работники</li>
    <li>Наши зарплаты</li>
  </ul>
</nav>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Горизонтальный навигационный список CSS

Горизонтальный навигационный список CSS

Спасибо Эрику Мейеру за вдохновение.

Есть две версии:

  1. Версия «Inline»
  2. «Блок» версия

Версия «Inline»

  • Браузеры
    • Мозилла
    • Фаерфокс
    • Камино
    • К-мелеон
    • Галеон
    • Нетскейп
    • Internet Explorer
    • Опера
    • Сафари
    • Конкерор
  • Веб-дизайн
    • W3C
    • Список Апарт
    • CSS/край
    • МаКо 4 CSS
    • Методы компоновки CSS
    • Стиль реального мира
    • css-обсудить
    • Группа указателей CSS
  • Поисковые системы
    • Гугл
    • Открытый каталог
    • Yahoo!
    • Весь Интернет
    • Теома
    • Мудрая гайка
  • Бесплатное ПО
    • Всемирная группа бесплатного программного обеспечения
    • Крошечные приложения
    • АналоговыйX
    • Арена бесплатных программ
    • Бесценная посуда
  • Технология
    • Локергном
    • Ланга
    • Информационный бюллетень Скотта Финни
    • БраузерТьюн
    • ТехТВ
    • Неовин
    • Вызов помощи
    • Аксель216
    • Проводной

Это демонстрация горизонтального навигационного списка или меню, при наведении на которое появляется вертикальное раскрывающееся меню.

Коды HTML очень просты, а именно:

 <ул>

  •   элемент навигации  
<ул>

  •   элемент списка навигации  
    • 

  • ...
    • 

  • ...
    • 

  • ...
    • 



  •  
      элемент навигации          
<ул>

  •   другой элемент списка навигации  
    • 

  • ...
    • 

  • ...
    • 

  • ...
    • 



  • ...
    • 
...

    Тег ul соответствует классу nav . Это единственный класс , на который нужно ссылаться из таблицы стилей. Коды CSS показаны ниже с комментариями:

    ул.нав,
.нав ул{
маржа: 0;
заполнение: 0;
курсор: по умолчанию;
тип стиля списка: нет;
дисплей: встроенный;
}
ул.нав{
дисплей: таблица;
}
ul.nav>ли{
отображение: таблица-ячейка;
положение: родственник;
отступ: 2px 6px;
}
  ul.nav>li:hover{
отступ справа: 1px;
}  [*]
ул. нав ли>ул{
дисплей: нет;
положение: абсолютное;
максимальная ширина: 40ex;
поле слева: -6px;
поле сверху: 2px;
}
ul.nav li: hover> ul {
дисплей: блок;
}
.нав уль ли а{
дисплей: блок;
отступ: 2px 10px;
}
ул.нав,
.нав ул,
.нав уль ли а{
цвет фона: #fff;
цвет: #369;
}
ul.nav li: парить,
.nav ul li a:hover{
цвет фона: #369;
цвет: #fff;
}
ul.nav li: активный,
.nav ul li a:active{
цвет фона: #036;
цвет: #fff;
}
ул.нав,
.нав ул{
граница: 1px сплошная #369;
}
.nav {
текстовое оформление: нет;
}

    «Блочная» версия

    • Браузеры
      • Мозилла
      • Фаерфокс
      • Камино
      • К-мелеон
      • Галеон
      • Нетскейп
      • Internet Explorer
      • Опера
      • Сафари
      • Конкерор
    • Веб-дизайн
      • W3C
      • Список Апарт
      • CSS/край
      • МаКо 4 CSS
      • Методы компоновки CSS
      • Стиль реального мира
      • css-обсудить
      • Группа указателей CSS
    • Поисковые системы
      • Гугл
      • Открытый каталог
      • Yahoo!
      • Весь Интернет
      • Теома
      • Мудрая гайка
    • Бесплатное ПО
      • Всемирная группа бесплатного программного обеспечения
      • Крошечные приложения
      • АналоговыйX
      • Арена бесплатных программ
      • Бесценная посуда
    • Технология
      • Локергном
      • Ланга
      • Информационный бюллетень Скотта Финни
      • БраузерТьюн
      • ТехТВ
      • Неовин
      • Вызов помощи
      • Аксель216
      • Проводной

    Эта «блочная» версия, очевидно, похожа на предыдущую, но небольшая разница заключается в ширине элементов метки списка. Вся панель навигации имеет ширину 100%, так как каждый элемент метки всегда имеет одинаковую ширину, даже если размер окна браузера изменяется, независимо от количества элементов метки.

    Коды точно такие же, как и у «inline» версии, но с небольшими дополнениями к селектору ul.nav :

     ул.нав{
дисплей: таблица;
ширина: 100%;
макет таблицы: фиксированный;
}

    Примечания

    Обратите внимание, что внешний вид панели навигации можно изменить и модифицировать с помощью нескольких изменений в кодах, основанных на ваших знаниях (X)HTML и CSS с помощью некоторых экспериментов методом проб и ошибок.

    Одним из недостатков этой панели навигации является то, что в настоящее время она ограничена только двухуровневым навигационным списком, не более чем тремя, так как это может нарушить весь макет. Кроме того, display: none не подходит для чтения с экрана.

    Существуют и другие очень похожие тестовые примеры CSS :

    • Иерархическое динамическое меню с CSS , созданное Петром Станичеком.
    • Всплывающие меню CSS , созданные Симусом П. Х. Лихи.
    • Pure CSS Выпадающие меню, созданные Стюартом Робертсоном.
    • A List Apart: Suckerfish Dropdowns Патрика Гриффитса и Дэна Уэбба.

    * Свойство padding-right было удалено из-за тестирования рендеринга в Mozilla Firefox 1.0 по сравнению с предыдущими сборками.

    Главная | CSS список вертикальной навигации »

    Простое меню с горизонтальной прокруткой с помощью CSS

    Я уже давно думаю об альтернативном подходе к адаптивной навигации. Что-то, что не связано со значком переключения «гамбургер». Это сложно, потому что нам не предоставлено то же пространство, что и нативным приложениям.

    Хотя я, конечно, не первый, кто использует эту идею, она использовалась в ранних версиях приложения Facebook и используется на некоторых страницах веб-сайта Apple.

    Это шаблон, который может стать идеальной заменой меню «гамбургер». Итак, в этом посте цель состоит в том, чтобы использовать только CSS для горизонтальной навигации с прокруткой.

    Чего мы хотим избежать при создании этого меню

    Что сделало меню «гамбургер» таким успешным, так это то, насколько дискретно и легко было просто убрать все эти элементы. Что, в свою очередь, является причиной того, что это было признано неудачным с точки зрения участия. Видимость является основной причиной для изучения различных вариантов, но есть и другие вещи, которых было бы идеально избегать.

    Как правило, фиксированные элементы, поскольку для них требуется два метчика

    То, как работает Mobile Safari на iOS, ужасно для всего, что закреплено в нижней части области просмотра. Централизация его в окне просмотра слева или справа может скрыть содержимое, что, в свою очередь, будет столь же раздражающим. Затем все сводится к тому, что более неудобно для пользователя; так как есть несколько хороших примеров использования нижней навигации на веб-сайте.

    Любой список, подобный

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

    Коснитесь/щелкните, чтобы перейти в меню

    Просто, ничем не лучше «гамбургера». У вас все те же проблемы, и не так уж очевидно, что вы прыгнули вниз по странице. Это может быть немного неудобно, если вы не найдете то, что хотели, в рамках навигации.

    Так чем же лучше горизонтальная навигация?

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

    Реализация

    Реализация гибка для работы с вашим макетом. Независимо от того, расположен ли он рядом с вашим логотипом, он будет работать. Просто примените стили к любому элементу, который вы предпочитаете.

    УСБ

    Здесь работают два свойства: white-space: nowrap и overflow-x: auto . Вы должны убедиться, что элементы не переносятся, иначе они будут вести себя нормально, а разрешение прокрутки с использованием auto означает, что прокрутка будет доступна при необходимости. Это небольшое количество CSS заставит любую область иметь горизонтальную прокрутку.

     /*
[1]: Все элементы помещаются в одну строку, что приводит к переполнению при необходимости.
[2]: автоматическое переполнение означает, что полоса прокрутки не будет отображаться, если она не нужна. 
[3]: Сделайте плавную прокрутку на устройствах iOS перед
[4]: скрыть уродливые полосы прокрутки в Edge, пока не будет наведена прокручиваемая область.
[5]: скрыть полосу прокрутки в браузерах WebKit.
*/
.прокрутить {
  пробел: nowrap; /* [1] */
  переполнение-х: авто; /* [2] */
  -webkit-overflow-scrolling: сенсорный; /* [3] */
  -ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */ }
/* [5] */
.scroll::-webkit-полоса прокрутки {
  дисплей: нет; }

    Важно использовать -webkit-overflow-scrolling , так как это увеличивает скорость и простоту использования областей прокрутки. Однако, начиная с Safari 13, это поведение по умолчанию. На устройствах Android по умолчанию проще прокручивать, поэтому вам не о чем беспокоиться. -ms-overflow-style: -ms-autohiding-scrollbar позволяет пользователям IE 10, 11 и Edge использовать полосу прокрутки при наведении.

    Затем вы можете полностью скрыть полосу прокрутки. Вы можете сделать это, ориентируясь на ::-webkit-scrollbar псевдоэлемент и улучшить внешний вид для пользователей Windows Chrome. Однако из-за небольшого тестирования в Windows прокрутка может быть сложнее. Я считаю, что это может зависеть от вашей мыши.

    Наконец, вам может быть интересно узнать о Firefox, похоже, на момент написания статьи такого способа не существовало.

    HTML 

     <заголовок>
  Логотип
  <навигация>
    Блог
    Портфолио
    Загрузки
    О нас
    Контакты

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

    Варианты использования

    См. навигацию Pen Horizontal Scroll от Стива (@stevemckinney) на CodePen.

    Убедитесь, что для элементов не задана ширина

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

    Недостатки

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

    Потребности в возможностях

    Доступность не является серьезной проблемой. Поскольку многие вещи требуют аффордансов. Я всегда стараюсь, чтобы элемент навигации был частично обрезан. Другие альтернативы включают добавление тени или затухание элементов.

    Не совсем идеально, если пользователь просматривает в узком окне в Windows

    Горизонтальная прокрутка не самая лучшая на настольном компьютере (если у вас нет Magic Mouse). Если вы работаете в Windows, вам не обойтись без перетаскивания полосы прокрутки. Единственный разумный метод скрытия полос прокрутки существует для IE11 и Edge, если вы хотите, чтобы он вел себя аналогично OS X. Если для вас это проблема, есть решение.

    Фликити

    Что-то, на что я хочу обратить внимание, будет реализовано с помощью Flickity. Мне нравится Flickity из-за ванильной реализации Javascript. Использование этого метода означает, что полосы прокрутки скрыты. Удобство использования будет увеличено на всех типах устройств благодаря различным способам взаимодействия с ним.

    После внедрения Flickity вы можете сохранить .scroll CSS и добавить к нему следующее:

     .scroll::-webkit-полоса прокрутки {
  дисплей: нет; }

    Как я уже упоминал ранее, я сказал использовать это осторожно.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *