Как сверстать горизонтальное меню?

387

05 октября 2021, 17:10

Вот макет

Как сверстать такое меню?

Answer 1

ну можно так

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.container { 
  max-width: 1170px; 
  margin: 0 auto; 
} 
 
.menu__inner { 
  display: flex; 
  background: gray; 
  padding: 2px; 
} 
 
.menu__item { 
  width: 25%; 
  padding: 5px 10px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
} 
 
.menu__item:hover { 
  background: white; 
}

<div class="container"> 
  <div class="menu"> 
    <div class="menu__inner"> 
      <div class="menu__item">Административные здания</div> 
      <div class="menu__item">Жилые здания</div> 
      <div class="menu__item">Многофункциональные комплексы</div> 
      <div class="menu__item">Общественные здания</div> 
    </div> 
  </div> 
</div>

Answer 2

На flex'ах свой ответ уже дали, дам и на grid'ах.

* { 
  padding: 0; 
  margin: 0; 
  outline: none; 
  text-decoration: none; 
  list-style-type: none; 
} 
 
body { 
  font-family: sans-serif; 
} 
 
h1 { 
  font-size: 30px; 
  margin: 20px 0; 
} 
 
.container { 
  max-width: 1170px; 
  margin: 0 auto; 
} 
.container ul { 
  list-style-type: none; 
  display: grid; 
  justify-items: center; 
  align-items: center; 
  padding: 2px; 
  grid-gap: 2px; 
  height: 45px; 
  background-color: #e0e0e0; 
  margin-bottom: 50px; 
} 
.container ul.mb-0 { 
  margin-bottom: 0; 
} 
.container ul.auto-flow-column { 
  grid-auto-flow: column; 
} 
.container ul.grid-col-1 { 
  grid-template-columns: repeat(1, 1fr); 
} 
.container ul.grid-col-2 { 
  grid-template-columns: repeat(2, 1fr); 
} 
.container ul.grid-col-3 { 
  grid-template-columns: repeat(3, 1fr); 
} 
.container ul.grid-col-4 { 
  grid-template-columns: repeat(4, 1fr); 
} 
.container ul.grid-col-5 { 
  grid-template-columns: repeat(5, 1fr); 
} 
.container ul.grid-col-6 { 
  grid-template-columns: repeat(6, 1fr); 
} 
.container ul.grid-col-7 { 
  grid-template-columns: repeat(7, 1fr); 
} 
.container ul.grid-col-8 { 
  grid-template-columns: repeat(8, 1fr); 
} 
.container ul.grid-col-9 { 
  grid-template-columns: repeat(9, 1fr); 
} 
.container ul.grid-col-10 { 
  grid-template-columns: repeat(10, 1fr); 
} 
.container ul li { 
  width: 100%; 
  height: 100%; 
  text-align: center; 
} 
.container ul li a { 
  width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
.container ul li a:hover, .container ul li a.active { 
  background-color: #fff; 
}

<div class="container"> 
	<nav> 
		<h1>Не явно указываем размер одного элемента</h1> 
		<ul class="auto-flow-column mb-0"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
		</ul> 
		<ul class="auto-flow-column mb-0"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
			<li> 
				<a href="#!">Жилые здания</a> 
			</li> 
		</ul> 
		<ul class="auto-flow-column mb-0"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
			<li> 
				<a href="#!">Жилые здания</a> 
			</li> 
			<li> 
				<a href="#!">Многофункциональные комплексы</a> 
			</li> 
		</ul> 
		<ul class="auto-flow-column mb-0"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
			<li> 
				<a href="#!">Жилые здания</a> 
			</li> 
			<li> 
				<a href="#!">Многофункциональные комплексы</a> 
			</li> 
			<li> 
				<a href="#!">Общественные здания</a> 
			</li> 
		</ul> 
		<ul class="auto-flow-column"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
			<li> 
				<a href="#!">Жилые здания</a> 
			</li> 
			<li> 
				<a href="#!">Многофункциональные комплексы</a> 
			</li> 
			<li> 
				<a href="#!">Общественные здания</a> 
			</li> 
			<li> 
				<a href="#!">Другое названиe</a> 
			</li> 
		</ul> 
		 
		<h1>Явно указываем размер одного элемента</h1> 
		<ul class="grid-col-1 mb-0"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
		</ul> 
		<ul class="grid-col-2 mb-0"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
			<li> 
				<a href="#!">Жилые здания</a> 
			</li> 
		</ul> 
		<ul class="grid-col-3 mb-0"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
			<li> 
				<a href="#!">Жилые здания</a> 
			</li> 
			<li> 
				<a href="#!">Многофункциональные комплексы</a> 
			</li> 
		</ul> 
		<ul class="grid-col-4 mb-0"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
			<li> 
				<a href="#!">Жилые здания</a> 
			</li> 
			<li> 
				<a href="#!">Многофункциональные комплексы</a> 
			</li> 
			<li> 
				<a href="#!">Общественные здания</a> 
			</li> 
		</ul> 
		<ul class="grid-col-5 mb-0"> 
			<li> 
				<a href="#!">Административные здания</a> 
			</li> 
			<li> 
				<a href="#!">Жилые здания</a> 
			</li> 
			<li> 
				<a href="#!">Многофункциональные комплексы</a> 
			</li> 
			<li> 
				<a href="#!">Общественные здания</a> 
			</li> 
			<li> 
				<a href="#!">Другое названиe</a> 
			</li> 
		</ul> 
	</nav> 
</div>

Если вам нужны одинаковые блоки - задаём количество явно, через grid-col-(число)

Если нет, просто auto-flow-column и стили соответствующие.

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

Люблю гриды из-за их gap'a и лёгкой адаптивности.

Исходник: Jsfiddle (там SASS)

Answer 3

На flex'ах и grid'ах ответ дали, дам на display: inline-block;

body { 
  margin: 0; 
} 
 
.menu { 
  display: block; 
  width: 100%; 
} 
 
.menu::after { 
  content: ''; 
  display: block; 
  clear: both; 
} 
 
.menu > .item { 
  display: inline-block; 
  float: left; 
  width: calc(100% / 4); 
  /* 4 - кол-во элементов в меню*/ 
  padding: 8px 10px; 
  box-sizing: border-box; 
  background: #ccc; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: '..'; 
  text-align: center; 
  border: 1px solid #ccc; 
  cursor: pointer; 
} 
 
.menu > .item:hover { 
  background: #fff; 
}

<div class="menu"> 
  <div class="item">Административные здания</div> 
  <div class="item">Жилые здания</div> 
  <div class="item">Многофункциональные комплексы</div> 
  <div class="item">Общественные здания</div> 
</div>