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

Разное 

flexbox — Верстка горизонтального меню на CSS flex

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

Вопрос задан

Изменён 3 года назад

Просмотрен 2k раз

Делаю горизонтальное меню на css. Нужно добиться эффекта, чтобы пункты меню (элементы li в которых a-ссылки) занимали всё место в блоке меню по горизонтали. Иными словами чтоб когда наводишь мышкой, ховер загорался от края до края, а не только на ширину слова в пункте меню.

Для наглядности прикладываю 2 скрина. Первый как надо сделать, второй — как получается сейчас

ul {
	list-style: none;
}

nav ul {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	height: 50px;
	background-color: black;
}

nav li {
	display: flex;
	margin-right: 10px;
}

a {
	text-decoration: none;
	
}

nav a {
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	color: white;
	font-size: 14px;
	padding: 0 10px;
	
}

nav a:hover {
	background-color: #1A3039;
}
<nav>
					<ul>
						<li><a href="">Home</a></li>
						<li><a href="">About</a></li>
						<li><a href="">Gallery</a></li>
						<li><a href="">Help</a></li>
						<li><a href="">Contact</a></li>
					</ul>
          </nav>

Буду очень благодарен за помощь.

  • css
  • flexbox
  • menu

Для тега li добавил flex: 1;, для a — width: 100%.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 50px;
  background-color: black;
}

nav li {
  flex: 1;
  display: flex;
}

a {
  text-decoration: none;
}

nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-transform: uppercase;
  color: white;
  font-size: 14px;
  padding: 0 10px;
}

nav a:hover {
  background-color: #1A3039;
}
<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Gallery</a></li>
    <li><a href="">Help</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

4 

ul{
  list-style-type: none;
  padding-left: 0;
  background-color: #000;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  text-align: center;
}
ul li{
  padding: 10px;
  width: 20%;
  max-width: 20%;
}
ul a{
  text-decoration: none;
  color: #fff;
}

ul li:hover{
  background-color: #1A3039;
}
<nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Gallery</a></li>
      <li><a href="">Help</a></li>
      <li><a href="">Contact</a></li>
    </ul>
</nav>

2

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

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

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

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

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

Почта

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

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

Почта

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

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

Сниппет простого горизонтального меню · GitHub

Сниппет простого горизонтального меню

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

nav ul {
 list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
text-transform: uppercase;
}
. main-menu {
text-align: center;
font-size: em(15)
}
.main-menu > ul > li > a {
display: inline-block;
padding: 10px 18px;
color: #7e91a4;
text-decoration: none;
}
.main-menu > ul > li > a:hover {
color: #414e5b;
}
. main-menu > ul > li.active a {
color: #414e5b;
text-decoration: underline;
}

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

<nav>
 <ul>
<li><a href=»#»>Главная</a></li>
<li><a href=»#»>Монтаж</a></li>
<li><a href=»#»>Проектирование</a></li>
<li><a href=»#»>Оборудование</a></li>
<li><a href=»#»>Контакты</a></li>
</ul>
</nav>

горизонтальных списков CSS | UnusedCSS

Списки HTML, представленные тегом

    с дочерними тегами
  • , по умолчанию являются вертикальными и маркированными. Для пользовательского стиля нам нужно применить специальные свойства CSS.

    Например, давайте построим горизонтальный список.

    Начнем с простого ненумерованного списка.

     <ул>

  • Главная
    • 

  • Проекты
    • 

  • О нас
    • 

  • Связаться
    •

Так будет выглядеть список

  • Дом
  • Проекты
  • О нас
  • Контакт

Допустим, мы хотим придать приведенному выше списку стиль, который выглядит примерно так:

  • Дом
  • Проекты
  • О нас
  • Контакт

Итак, как мы можем этого добиться? Давайте рассмотрим процесс шаг за шагом.
Наше первое наблюдение заключается в том, что в конечном результате нам не нужен стиль пули. Стиль элементов списка управляется свойством list-style. Давайте удалим их, установив значение none.

 <ул>

  • Главная
    • 

  • Проекты
    • 

  • О нас
    • 

  • Связаться
    • 
 
    ul.horizontal-список {
  стиль списка: нет;
}
    • Дом
    • Проекты
    • О нас
    • Контакт

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

     ul.horizontal-list li {
  отображение: встроенный блок;
}
    • Дом
    • Проекты
    • О нас
    • Контакт

    Итак, у нас есть горизонтальный список.

    Нам нужно добавить вертикальную черту справа от каждого элемента списка, но не от последнего.

     ul.horizontal-list li:not(:last-child) {
граница справа: 1 пиксель сплошной черный;
}
    • Дом
    • Проекты
    • О нас
    • Контакт

    Давайте добавим отступы к каждому элементу списка.

     ul.horizontal-list li {
  // остальные стили сверху
  заполнение: 0 0.5rem;
}
    • Дом
    • Проекты
    • О нас
    • Контакт

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

     ul.horizontal-list li {
  // остальные стили сверху
  мин-ширина: 12рем;
выравнивание текста: по центру;
}
    • Дом
    • Проекты
    • О нас
    • Контакт

    Теперь у вас есть готовый список. Все, что нам нужно сделать, это установить цвет фона и текста в соответствии с темой вашего сайта/приложения.

    • Дом
    • Проекты
    • О нас
    • Контакт
     
    Стили списка по умолчанию
    

<ул>
  
  • Главная
    • 
  
  • Проекты
    • 
  
  • О нас
    • 
  
  • Связаться
    • 



    Горизонтальный список
    
<ул>
  
  • Главная
    • 
  
  • Проекты
    • 
  
  • О нас
    • 
  
  • Связаться
    • 

 
     body { семейство шрифтов: без засечек; }

ли: наведите {
  оформление текста: подчеркивание;
}

ul.horizontal-список {
  стиль списка: нет;
  цвет фона: #48abe0;
  белый цвет;
  отображение: встроенный блок;
  набивка: 1рем 2рем;
  поле-верх: 1re;
}

ul. horizontal-list li {
  отображение: встроенный блок;
  заполнение: 0 0.5rem;
  мин-ширина: 7rem;
  выравнивание текста: по центру;
  курсор: указатель;
}

ul.horizontal-list li: not (: last-child) {
  граница справа: 1 пиксель сплошной белый;
}

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

    Горизонтальные списки — один из наиболее часто используемых объектов в веб-дизайне. Возможно, вы общаетесь с ними ежедневно. Чаще всего их можно найти в навигационных панелях, заголовках таблиц, списках вкладок и т. д.

    Давайте рассмотрим другие реализации.

    Вот аналогичный список

    См. Pen Simple Horizontal List (CSS) Джереми Кэриса (@jeremycaris) на CodePen.

    Группа горизонтального списка

    См. группу горизонтального списка Pen с Bootstrap 3 от Lazy Jones (@lazy) на CodePen.

    Заголовок таблицы в стиле Excel

    См. меню горизонтального списка Pen css от CSS4HTML (@CSS4HTML) на CodePen.

    Реализация, подобная панели навигации

    См. Горизонтальный список пера — float: оставил Джейсон Стюарт (@jastew) на CodePen.

    Заключение

    Хотя неупорядоченные списки являются вертикальными стандартными, веб-разработчикам регулярно приходится реализовывать горизонтальные списки. Внедрение горизонтальных списков благодаря гибкости CSS не является сложной задачей. Установив отображать элементов списка до встроенных , мы можем легко получить горизонтально расположенную группу элементов списка.

    Поделиться в Твиттере · Поделиться на Facebook

    • ← Полукруг CSS
    • Руководство по переносу текста в CSS →

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

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

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

    The List

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

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

      Итак, вот наш образец 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; }

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

      No related posts.

    Автор записи

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

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