Высота выпадающего подменю

238

18 декабря 2018, 01:00

Как сделать чтобы высота выпадающего меню подстраивалась под содержимое, при этом сохранить такой эффект выпадания (пример ниже), при height: auto; почему-то не срабатывает transition. Можно добиться примерно такого же эффекта при помощи transfom: scaleY(0); потом при наведении на пункт меню менять на transfom: scaleY(1); но тогда содержимое сжимается во время трансформации.

ul { 
	padding: 0; 
	margin: 0; 
	list-style: none; 
} 
.menu { 
	font-size: 0; 
} 
.menu-item { 
	padding: 3px 15px; 
	font-size: 16px; 
	background-color: #eee; 
	display: inline-block; 
} 
.dropdown { 
	position: relative; 
} 
.dropdown:after { 
	content: ""; 
	position: absolute; 
	top: 55%; 
	right: 4px; 
	transform: translateY(-50%); 
	border-left: 4px solid transparent; 
	border-right: 4px solid transparent; 
	border-top: 6px solid #666; 
	transition: 0.3s; 
} 
.dropdown:hover ul { 
	height: 150px; 
} 
.dropdown:hover::after { 
	border-left: 4px solid transparent; 
	border-right: 4px solid transparent; 
	border-top: none; 
	border-bottom: 6px solid #666; 
} 
.dropdown ul { 
	height: 0; 
	width: 100px; 
	background-color: #ddd; 
	overflow: hidden; 
	transition: 0.3s; 
	position: absolute; 
	top: 100%; 
	left: 0; 
} 
.dropdown li { 
	padding: 3px 5px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
</head> 
<body> 
	<ul class="menu"> 
		<li class="menu-item dropdown"> 
			Menu 1 
			<ul> 
				<li>Sub menu</li> 
				<li>Sub menu</li> 
				<li>Sub menu</li> 
				<li>Sub menu</li> 
				<li>Sub menu</li> 
			</ul> 
		</li> 
		<li class="menu-item">Menu 2</li> 
		<li class="menu-item dropdown"> 
			Menu 3 
			<ul> 
				<li>Sub menu</li> 
				<li>Sub menu</li> 
				<li>Sub menu</li> 
			</ul> 
		</li> 
		<li class="menu-item">Menu 4</li> 
	</ul> 
</body> 
</html>

Answer 1

Используйте max-height

Пример

ul { 
  padding: 0; 
  margin: 0; 
  list-style: none; 
} 
 
.menu { 
  font-size: 0; 
} 
 
.menu-item { 
  padding: 3px 15px; 
  font-size: 16px; 
  background-color: #eee; 
  display: inline-block; 
} 
 
.dropdown { 
  position: relative; 
} 
 
.dropdown:after { 
  content: ""; 
  position: absolute; 
  top: 55%; 
  right: 4px; 
  transform: translateY(-50%); 
  border-left: 4px solid transparent; 
  border-right: 4px solid transparent; 
  border-top: 6px solid #666; 
  transition: 0.3s; 
} 
 
.dropdown:hover ul { 
  max-height: 999px; 
  transition: max-height 1s ease-in-out; 
} 
 
.dropdown:hover::after { 
  border-left: 4px solid transparent; 
  border-right: 4px solid transparent; 
  border-top: none; 
  border-bottom: 6px solid #666; 
} 
 
.dropdown ul { 
  width: 100px; 
  background-color: #ddd; 
  overflow: hidden; 
  position: absolute; 
  top: 100%; 
  left: 0; 
  max-height: 0; 
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1); 
} 
 
.dropdown li { 
  padding: 3px 5px; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
 
<body> 
  <ul class="menu"> 
    <li class="menu-item dropdown"> 
      Menu 1 
      <ul> 
        <li>Sub menu</li> 
        <li>Sub menu</li> 
        <li>Sub menu</li> 
        <li>Sub menu</li> 
        <li>Sub menu</li> 
      </ul> 
    </li> 
    <li class="menu-item">Menu 2</li> 
    <li class="menu-item dropdown"> 
      Menu 3 
      <ul> 
        <li>Sub menu</li> 
        <li>Sub menu</li> 
        <li>Sub menu</li> 
      </ul> 
    </li> 
    <li class="menu-item">Menu 4</li> 
  </ul> 
</body> 
 
</html>

Answer 2

Можно сделать так. Эффект выпадания меню можно менять в @keyframes hover. Sub-menu позиционировано абсолютно(position:absolute;) и margin-ом подвинуто в низ на величину padding-а в .5rem. А ширина и высота будет автоматом подстраиваться по содержимому потому что для ul.menu position:relative.

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%; 
} 
 
a { 
  text-decoration: none; 
  color: black; 
} 
 
a:hover { 
  color: red; 
} 
 
.main-menu { 
  border: 1px solid black; 
  display: inline-block; 
  position: relative; 
} 
 
ul.menu { 
  display: block; 
  list-style: none; 
  position: relative; 
} 
 
ul li { 
  list-style: none; 
  display: inline-block; 
  padding: .5rem 0rem; 
} 
 
ul li+li { 
  margin-left: 1.5rem; 
} 
 
ul li:first-child { 
  margin-left: 1.5rem; 
} 
 
ul li:last-child { 
  margin-right: 1.5rem; 
} 
 
ul li ul.sub-menu { 
  display: none; 
} 
 
ul li:hover ul.sub-menu { 
  display: block; 
  position: absolute; 
  border: 1px solid black; 
  margin-top: .5rem; 
  animation: hover 1s; 
} 
 
ul li ul li { 
  display: block; 
} 
 
@keyframes hover { 
  0% { 
    opacity: 0; 
  } 
  100% { 
    opacity: 100%; 
  } 
}

<div class="main-menu"> 
  <ul class="menu"> 
    <li class="menu-item"><a href="/">Menu</a></li> 
    <li class="menu-item"> 
      <a href="/">Menu 2</a> 
      <ul class="sub-menu"> 
        <li class="sub-menu-item"><a href="/">Sub menu 1</a></li> 
        <li class="sub-menu-item"><a href="/">Sub menu 2</a></li> 
        <li class="sub-menu-item"><a href="/">Sub menu 3</a></li> 
        <li class="sub-menu-item"><a href="/">Sub menu 4</a></li> 
      </ul> 
    </li> 
    <li class="menu-item"><a href="/">Menu 3</a></li> 
    <li class="menu-item"> 
      <a href="/">Menu 4</a> 
      <ul class="sub-menu"> 
        <li class="sub-menu-item"><a href="/">Sub menu 1</a></li> 
        <li class="sub-menu-item"><a href="/">Sub menu 2</a></li> 
        <li class="sub-menu-item"><a href="/">Sub menu 3</a></li> 
        <li class="sub-menu-item"><a href="/">Sub menu 4</a></li> 
      </ul> 
    </li> 
    <li class="menu-item"><a href="/">Menu 5</a></li> 
  </ul> 
</div>