Меню ul горизонтальное: Меню для сайта html и css горизонтальное — 11 вариантов меню

Leave a Comment / Разное / By /

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

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

Вопрос задан

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

Просмотрен 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

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

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

Почта

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

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

Почта

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

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

Горизонтальное меню для сайта на HTML и CSS

О сайтеПравилаКонтакты

» Статьи » Разработка » Два способа сделать меню для сайта на HTML и CSS

  • Инструменты
  • Заработок
  • Раскрутка

26 января 2015 . Антон Кулешов

Всем привет! Сегодня разберем пару примеров реализации горизонтального меню – самых простых и самых надежных.

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

Как я и говорил, структура меню в обоих способах одинакова, меняется только id=menu_номер-примера:

<div>
 <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Первый способ

Стандартное горизонтальное HTML меню, которое можно увидеть на многих сайтах.

Первым делом добавляем HTML структуру меню. Она будет состоять из «оберточного» дива с id=menu_1, в который кладем наш ненумерованный HTML список. Собственно, можно обойтись и без тега div (чем меньше тегов – тем лучше и все такое…), дописав наш id непосредственно к ul, но это будет зависеть от вашего шаблона. Иногда без «оберток» вообще ничего путного не сверстаешь.

<div>
    <ul>
      <li><a href="#">Пункт 1</a></li>
      <li><a href="#">Пункт 2</a></li>
      <li><a href="#">Пункт 3</a></li>
      <li><a href="#">Пункт 4</a></li>
      <li><a href="#">Пункт 5</a></li>
      <li><a href="#">Пункт 6</a></li>
      <li><a href="#">Пункт 7</a></li>
  </ul>
</div>

Далее добавляем CSS стили меню:

#menu_1{
    background-color: #69c;
}
    #menu_1 ul{
     list-style: none;
       margin: 0;
      padding: 0;
 }
   #menu_1 ul:after{
       content: "";
      display: block;
     clear: both;
        height: 0;
  }
       #menu_1 li{
         float: left;
        }
           #menu_1 li a{
               display: block;
             height: 50px;
               line-height: 50px;
              padding: 0 20px;
                background-color: #69c;
             color: #fff;
                text-transform: uppercase;
              text-decoration: none;
              cursor: pointer;
            }
           #menu_1 li a:hover{
             background-color: #369;
         }

Тут поподробнее:

1. Первым делом задаём фон «обёртки» тем же цветом, что и пункты нашего меню, иначе будем наблюдать «дребезг» в несколько пикселей при отрисовке страницы разными браузерами, куда будет заползать цвет «верхних» элементов, если таковые есть, или белый цвет body, если не задан другой;

2. Убираем маркеры у списка ul и обнуляем внешние и внутренние отступы;

3. Запрещаем обтекание, подробнее как сделать читаем в ранее написанной статье, это необходимое действие, так как для пунктов меню будет использоваться свойство float;

4. Используем float со значением left для элементов li, чтобы выстроить их в один ряд;

5. Для ссылок, указываем стили. Главное указать display со значением block чтобы ссылки стали блочными и заняли всё допустимое место внутри элемента li;

6. Готово.

В зависимости от дизайна макета, может возникнуть потребность растянуть меню на всю ширину, следует использовать следующие стили CSS, подробнее читаем в статье – HTML список на всю ширину.

HTML без изменений, для примера меняем id=menu_2.

Основной CSS остается практически неизменным, необходимый нам эффект заключен в следующих строках:

#menu_2 ul{
   list-style: none;
   margin: 0;
  padding: 0;
 text-align: justify;
    overflow: hidden;
   height: 50px;
}
#menu_2 ul:after{
 content: "";
  width: 100%;
    display: inline-block;
}
 #menu_2 li{
     display: inline-block;
  }

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

Второй способ

Второй способ реализации горизонтального меню заключается в превращении нашего списка в таблицу. Да да, мы не будет использовать теги table и иже с ними. Почему? Как писал выше – исторически сложившийся факт, HTML таблица не используется для построения меню, связано это, в первую очередь, с неудобством прикручивания такого меню к движку. А уж если попытаться сделать и выпадающие вкладки в пунктах, то вы получите такого «монстра», что нагнете всю дальнейшую структуру страницы в самом её начале.

Так вот, для реализации нам нужны стандартные свойства таблицы, поэтому мы воспользуемся нехитрыми манипуляциями с CSS стилями: элементу ul задаем свойство display со значением table а тегам li display — table-cell и, вуаля, перед нами уже горизонтальное меню в виде таблицы со всеми вытекающими свойствами.

Смотрим на пример с id=menu_3.

CSS, опять же, стандартный, отличаются только эти строки:

#menu_3 ul{
    list-style: none;
   margin: 0;
  padding: 0;
 display: table;
}
    #menu_3 li{
     display: table-cell;
    }

Как и в первом способе, пункты меню не будут растянуты на всю ширину нашего оберточного дива. Чтобы их растянуть следует дописать свойства table-layout — fixed и width — 100% к элементу ul. В этом случае ul растянутся на всю ширину, а элементы li станут одной ширины (смотрим пример с id=menu_4).

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

#Меню

16 230

Плавный скроллинг и плавающее меню Растянутый на всю ширину HTML список Выпадающее меню на HTML и CSS Ещё одно адаптивное меню Плавающее горизонтальное меню на jQuery

Комментарии не найдены

Выпадающее меню на HTML и CSS

Разбираемся, как сделать бегущую строку на сайте

Популярное

1 Пишем парсер контента на PHP2 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте3 Лучший способ прижать футер используя flexbox4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы

Обратите внимание

html — Как сделать отображение в горизонтальный ряд

спросил

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

Просмотрено 360 тысяч раз

Как с помощью CSS сделать так, чтобы элементы списка отображались горизонтально в строке?

 #div_top_hypers {
    цвет фона:#eeeeee;
    дисплей: встроенный;
}
#ul_top_hypers {
    дисплей: встроенный;
} 
 <дел>
    <ул>
        
  • ‣  Входящие
    • 
        
  • ‣  Написать
    • 
        
  • ‣  Отчеты
    • 
        
  • ‣  Настройки
    • 
        
  • ‣  выйти
    •
    • HTML
    • CSS
    • HTML-списки

    0

    Элементы списка обычно являются блочными элементами. Превратите их во встроенные элементы с помощью свойства display .

    В приведенном вами коде вам нужно использовать селектор контекста, чтобы свойство display: inline применялось к элементам списка, а не к самому списку (применение display: inline к общему списку не будет иметь никакого эффекта ):

     #ul_top_hypers ли {
    дисплей: встроенный;
}

    Вот рабочий пример:

     #div_top_hypers {
    цвет фона:#eeeeee;
    дисплей: встроенный;
}
#ul_top_hypers ли {
    дисплей: встроенный;
} 
     <дел>
    <ул>
        
  • ‣  Входящие
    • 
        
  • ‣  Написать
    • 
        
  • ‣  Отчеты
    • 
        
  • ‣  Настройки
    • 
        
  • ‣  выйти
    •

    5

    Вы также можете установить их плавающими вправо.

     #ul_top_hypers ли {
    поплавок: справа;
}

    Это позволяет им оставаться на уровне блоков, но они будут отображаться в одной строке.

    2

    Как уже упоминалось, вы можете установить li на display:inline; или с плавающей запятой li слева или справа. Кроме того, вы также можете использовать дисплей: гибкий; на ул . В приведенном ниже фрагменте я также добавил justify-content:space-around , чтобы увеличить интервал.

    Для получения дополнительной информации о flexbox ознакомьтесь с этим полным руководством.

     #ul_top_hypers {
    дисплей: гибкий;
    оправдать-содержание: пространство-вокруг;
    тип стиля списка: нет;
} 
     <дел>
    <ул>
        
  • ‣  Входящие
    • 
        
  • ‣  Написать
    • 
        
  • ‣  Отчеты
    • 
        
  • ‣  Настройки
    • 
        
  • ‣  выйти
    •

    Установите для свойства display значение inline для списка, к которому вы хотите применить это. Есть хорошее объяснение отображения списков в A List Apart.

    0

    Как сказал @alex, вы могли бы перемещать его вправо, но если вы хотите сохранить разметку такой же, перемещайте ее влево!

     #ul_top_hypers ли {
    плыть налево;
}

    Вам подойдет: 

     #ul_top_hypers li {
    отображение: встроенный блок;
}
 
     #ul_top_hypers ли {
  дисплей: гибкий;
}

    0

    Если вы хотите выровнять элементы списка (li) по горизонтали, не влияя на стиль списка, используйте указанные ниже свойства. ул{дисплей:гибкий; зазор: 30 пикселей; } gap:30px используется для установки промежутка между элементами списка.

    Чтобы быть более конкретным, используйте это:

     #div_top_hypers ul#ul_top_hypers li{
дисплей: встроенный;
}

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

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Легкий способ создать HTML-меню с горизонтальным списком

    HTML Горизонтальные списки — это великолепно используемый элемент списка для создания панелей навигации на веб-странице. Это один из основных элементов веб-сайта. Без одного из них на вашем сайте ваша аудитория будет чувствовать себя как в машине без колес!

    Как создать раскрывающийся список Переключить меня…

    Пожалуйста, включите JavaScript

    Как создать выпадающее меню с помощью HTML, CSS и JavaScript — с бесплатным исходным кодом.

    Теперь мы все знаем, что

      и
        используются для создания списков, но проблема в том, что эти списки вертикальны. Итак, вопрос в том, как создать горизонтальный список? Не волнуйтесь, у нас есть ответ для вас!

        Самый быстрый способ создать элементы списка, которые расширяются по горизонтали, определить встроенное свойство CSS display:inline для

      1. элементов списка. Взгляните на пример ниже:

         
   
        Добро пожаловать на codeconvey.com
         
  <ул>
    
      2. Главная
        3. 
    
      3. Услуги
        4. 
    
      4. Связаться
        5.

    Но этот метод хорош только тогда, когда вы применяете уникальный стиль для одного элемента HTML. Поэтому лучший подход — использовать внешнюю таблицу стилей. Когда мы изменим файл CSS, он изменится во всем веб-сайте.

    Вот почему в этой статье мы поделимся самым простым и настраиваемым способом создания горизонтального списка.

    Рекомендации по созданию горизонтального списка HTML

    Наш HTML-код содержит

      , которому присвоен класс «nav», за которым следует число
    • . Список элементов, которые нужны в горизонтальном списке, нужно поместить в
    • . Вы можете добавить или удалить
    • 9Теги 0028 в соответствии с вашими требованиями.

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

       <ул>
     
    • Элемент 1
      • 
     
    • Элемент 2
      • 
     
    • Элемент 3
      • 
     
    • Элемент 4
      • 
     
    • Элемент 5
      •

    Стилизация горизонтального списка с помощью CSS

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

    Сначала мы начнем с определения цвета фона горизонтальной полосы и установки отступа на «0 пикселей» в «

      .nav ». Установив отступ на «0 пикселей», элементы списка занимают всю ширину страницы. Наконец, выровняйте текст по центру, используя выравнивание текста, как показано в коде.

       ул.нав {
  отступ: 0px;
  цвет фона: #5d3dce;
  выравнивание текста: по центру;
}

      Следующее, что вам нужно сделать, это встроить список элементов в одном горизонтальном направлении,

    • в «
        .nav будет присвоено свойство « display: inline-block ». Теперь ваш контент находится в одной горизонтальной строке, отрегулируйте отступы в соответствии с вашими потребностями, так как это помогает списку элементов не выглядеть перегруженным.

        В подсобстве "

          .nav », вы также можете добавить эффект наведения и настроить цвет эффекта наведения, как показано в коде ниже.

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

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