Разное

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

05.05.2023

Содержание

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

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

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

Почта

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

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

Почта

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

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

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

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.

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

< html >

     < head >

         < title >

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

         Название >

< Стиль >

* {

/ * Здесь я сделал Margin и Padding 0 */

999999

/ * Здесь я сделал Margin и Padding 0 */

99999999999999966/ * * Здесь я сделал Margin и Padding 0 */

999999999999966 / * * ЗДЕСЬ. поля: 0;

   

     заполнение: 0;

}

   

.navbar {

     дисплей: гибкий;

/ * Это используется для изготовления Navbar, так что

Navbar остается в верхней части, даже если мы прокрутите * /

Положение: Sticky;

     align-items: center;

     justify-content: center;

     верх: 0px;

/ *Он указывает курсор мыши, который будет отображаться,

Когда он указывает на элемент * /

Курсор: отнерт;

}

   

. nav-list {

     ширина;

     дисплей: гибкий;

}

   

.nav-list li {

     list-style: нет;

     отступы: 26 пикселей 30 пикселей;

}

   

.nav-list li a {

     text-900;

     цвет: белый;

}

   

. nav-list li a:hover {

     цвет: черный;

}

   

.rightNav {

     7 ширина: 7;

     text-align: right;

}

   

#search {

     ; padding: 5;

     размер шрифта: 17 пикселей;

     граница: 2 пикселя сплошного серого цвета;

     радиус границы: 9 пикселей;

}

. Background {

Фон: RGBA (0, 0, 0, 0,4) URL (

FORIEN FAGHT-BLEND-Blend-Mde-MDED;

     background-size: обложка

}

   

       style >

     head >

     < body >

< NAV Класс = «Фон Navbar» >

< UL = < = . >

                < li >< a href 0008 > CAR A > LI >

< LI > < A Href = "File" = "#F = ". > Файл A > LI >

UL >

UL >

0009

                 

             < div class = "rightNav" >

          

                 < input type = " текст" имя = "поиск" id = "поиск" />

                 < button class = "btn btn-sm" >Search button >

             div >

NAV >

Body >

HTML >

25+ горизонтальные меню CSS - Бесплатный код + демонстрации

1.

Effect Menu Burakman (MBURAKERMAN)

S

S

.

.

896669966699669

9

996669

9669

9

999669

9669

99669

. / Demo

Создано: 18 декабря 2017 г.

Сделано с: HTML, SCSS

Теги: menu, hover, line

2. CSS Menu) 9 Концепция (06-2path)0628

Автор: Чарли Маркотт (FUGU22)

Ссылки: Исходный код / ​​демонстрация

Создано: 5 сентября 2017

Сделано с: Pug,

999 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068 9068

. Sass

Препроцессор JS: None

Препроцессор HTML: Pug

3. Эффект перечеркнутого наведения

Эффект наведения для ссылок. Используйте только один псевдоэлемент в ссылке.

Автор: Artyom (Artyom-Ivanov)

Ссылки: Исходный код / ​​демонстрация

Создан: 23 июня 2017

. , hover, меню, ссылка, эффект

4. Lavalamp CSS Menu

Автор: Patak (Patak)

Ссылки: Исходный код/Демо

Создано: 2 609 8720 22 февраля0629 Сделано с помощью: HTML, CSS

Теги: css, lavalamp, меню

5. Навигация по иконкам

Простая навигация по иконкам SVG с тенями с помощью flex-box. Набор иконок: Dripicons by Amit Jakhu http://demo.amitjakhu.com/dripicons/

Автор: Марко Бидерманн (marcobiedermann)

Ссылки: Исходный код / ​​Демо, Demo.amitjakhu.com 9 Создано: 16 июня 2016 г.

Сделано с: HTML, PostCSS

Теги: навигация, иконки, тень, css4, flex-box

6.

Слайд-меню 2

Это слайд-меню только на CSS.

Автор: Аарон Бенджамин (Абенджамин)

Ссылки: Исходный код / ​​демонстрация

Создано: 29 апреля 2015

. , css

7. Перекошенное меню

Использование свойств CSS3 для создания перекошенного меню.

Автор: Claudio Holanda (Kazzkiq)

Ссылки: Исходный код / ​​демонстрация

Созданы на: март 7,

. , css3

8. Эффекты навигации

Автор: bdbch (d2k)

Ссылки: Исходный код / ​​Демо

Создано: 18 января 2015 г.

Сделано с помощью: HTML, CSS, JS

Теги: navigation, hover, navigationhover, css

9. Простая навигация по меню

Простое меню.

Автор: Karim Balaa (Karimbalaa)

Ссылки: Бар

Прозрачная навигационная навигационная планка с маской. , CSS, JS

Теги: прозрачный, затухание, навигация, меню

11. Эффект адаптивного меню Css3

Эффект адаптивного слайд-меню

Автор: Богдан Блинников (Bonkalol)

Ссылки: Исходный код / ​​демонстрация

Созданы: 15 апреля 2014 г.

Сделано с: HTML, Mess

. , эффект

12. Горизонтальное меню HTML5/CSS3

Это чистое горизонтальное меню HTML5 CSS3. Для работы не требуется javascript или язык программирования. Это было найдено в Google, в CSS были внесены дополнительные улучшения, и теперь я публикую его как код «на вынос». Обратите внимание, что эффект перевода не проверяется W3C Validation, так что. ..

Читать Подробнее

Автор: Dhanush Badge (Dhanushbadge)

Ссылки: Source Code / Demo

Созданы на: May 15,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

9068 9068 9068

. Теги: html5css3-menu, css3-menu, pure-css3-horizontal-menu, html5-menu, horizontal-menu

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

Вот пример кода для простой горизонтальной панели навигации.

Автор: Даниэль Мюллер (Dmullerd)

Ссылки: Исходный код / ​​демонстрация

Создана по телефону: 26 ноября 2015

Сделано с: HTM,

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

14. Слайд Горизонтальный Только CSS NavMenu

Меню значков, выдвигающееся из верхнего левого угла окна. - Потрясающие иконки шрифтов; - CSS только с использованием атрибута типа флажка ввода.

Автор: Riccardo Zanutta (Rickzanutta)

Ссылки: Исходный код / ​​демонстрация

Созданы: 1 сентября 2014

с: . , css, menu, icons, webapp

15. Мои поиски идеального горизонтального, многоуровневого раскрывающегося меню и адаптивного меню CSS — Глава 1

Это был долгий поиск, месяц, если не годы, я боролся с адаптацией меню в коде CSS и пробовать JQueries, на которых я не говорю, поэтому не понимаю, и это не работает, как объяснено. Всегда просто лоскутным способом мой путь к моим желаемым целям. Теперь я, наконец, сделал важное...

Читать Подробнее

Автор: Sofian777 (Sofian777)

Ссылки: Source Code / Demo

Созданы: 27 июня 2015

9

. : многоуровневое, выпадающее, адаптивное, css, меню

16.

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

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

Автор: Грэм Кларк (Cheesetoast)

Links: Source Code / Demo

Created on: August 31, 2012

Made with: HTML, CSS

Tags: menu, icons

17. Horizontal Menu

Author : Карл Розелл (Карлроселл)

Ссылки: Исходный код / ​​Демо

Созданы:

Сделано с: HTML, SCSS

99999699696999699696999969999999999999999999999999969699699699699699699.9.9.9.. чистый css

18. Горизонтальное меню

Красивое горизонтальное меню, разработанное Майком на чистом CSS.

Author: Alireza (meness)

Links: Source Code / Demo

Created on: October 8, 2013

Made with: Haml, Less

CSS Pre-processor: Меньше

Препроцессор JS: Нет

Препроцессор HTML: Haml

Теги: горизонтальное, меню, плоское, pure-css, font-awesome

19.

#1226 - Горизонтальное меню со слайдом вниз при наведении

Горизонтальное меню с эффектом слайда вниз при наведении

littlesnippets.net (littlesnippets)

Ссылки: 0009

20. Простая отзывчивая горизонтальная навигация

Создано для http://css-snippets.com/simple-horizontal-navigation/ Изучение двух различных методов горизонтальной навигации на больших экранах. Фрагмент отзывчивый. Это вертикальное меню на небольших экранах и горизонтальное меню на больших экранах.

Автор: Лиза Каталано (lisa_c)

Ссылки: Исходный код / ​​демо

Сделано с: HTML, CSS

21. Горизонтальное меню

Автор: ILIC DARUS Теги: horizontal, menu, flat, pure-css

22. #1189 - Горизонтальные пункты меню

Горизонтальные пункты меню угловая анимация при наведении

Автор: LittleSnippets. net (littlesnippets)0009

Ссылки: Исходный код / ​​демонстрация

Создано: 6 ноября 2015 г.

Сделано с: HTML, CSS

TAGS: , MENUSU, MENUSU

. - Скользящая граница меню при наведении курсора

Горизонтальные элементы меню скользят по границе при наведении

Автор: LittleSnippets.net (littlesnippets)

Ссылки: Исходный код / ​​Демо

Дата создания: 2 ноября 2015 г.

Сделано с помощью: HTML, CSS

Теги: меню, граница

24. #1217 - Горизонтальное меню

Горизонтальное меню
9068

Автор: LittleSnippets.net (littlesnippets)

Ссылки: Исходный код/демонстрация

Создано: 23 ноября 2015 г.

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

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