2

Вот макет

введите сюда описание изображения

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

1
  • А в чём у вас проблема?
    – doox911
    26 окт 2019 в 9:18

3 ответа 3

5

ну можно так

* {
  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>

2
  • А если .menu__item будет неизвестное количество то какой там будет width: ?
    – Denis
    25 окт 2019 в 17:06
  • @Denis, menu__inner добавляете justify-content: space-between;, а menu__item добавляете width: 100%;
    – meine
    25 окт 2019 в 17:11
5

На 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)

4

На 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.