我有一个菜单，我试图让它响应智能手机。 我成功地做了下拉菜单，但现在它没有任何效果，当你按下栏图标时它就会弹出。 我想要在您按下栏图标时向下滑动的效果。
更好解释的图片:
html 和 css:
html {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body {
padding: 0;
margin: 0;
background: #eee;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
ul,
ol {
padding: 0;
margin: 0;
}
nav {
background: #cecece;
display: flex;
}
.logo {
flex-grow: 2;
display: flex;
justify-content: center;
align-items: center;
}
.logo .bar {
display: none;
}
nav ul {
flex-grow: 10;
list-style: none;
display: flex;
}
nav ul li {
flex-grow: 1;
}
nav a {
text-decoration: none;
padding: 30px;
display: block;
text-align: center;
color: black;
}
nav a:hover {
background: #8d8d8d;
color: #ffff;
}
@media (max-width: 768px) {
nav {
flex-direction: column;
}
.logo {
padding: 20px;
background: rgb(122, 122, 122);
justify-content: space-between;
}
.logo .bar {
display: block;
}
.logo .bar:hover {
cursor: pointer;
}
nav ul {
height: 0;
flex-direction: column;
overflow: hidden;
transition: 0.5s;
}
nav ul.active {
height: auto;
}
nav ul li a {
padding: 10px;
text-align: left;
}
}<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="test2.css" />
<!--
FONT AWSOME=========================================================================
-->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<nav>
<div class="logo">
<h2>TestLogo</h2>
<div class="bar"><i class="fas fa-bars"></i></div>
</div>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('nav .logo .bar').click(function() {
$('nav ul').toggleClass('active');
});
</script>
</body>
</html>感谢任何帮助!
最佳答案
以像素为单位设置 ul 修饰符 '.active' 的高度值
css transition 不理解auto 参数
要更深入地了解这个问题，请阅读文章 https://css-tricks.com/using-css-transitions-auto-dimensions/
这是它的引述:
auto values have been intentionally excluded from the CSS transitions spec. It looks like it's been requested by a few people, but when you think about it, it makes at least a little sense that it hasn't been included. The browser process that re-calculates the sizes and positions of all elements based on their content and the way they interact with each other (known as "reflow") is expensive. If you were to transition an element into a height of auto, the browser would have to perform a reflow for every stage of that animation, to determine how all the other elements should move. This couldn't be cached or calculated in a simple way, since it doesn't know the starting and/or ending values until the moment the transition happens. This would significantly complicate the math that has to be done under the hood and probably degrade performance in a way that might not be obvious to the developer.
无论如何，针对您的情况的最佳解决方案是将 transform: scaleY css 属性从 0 调整为 1，因为这不会触发浏览器重排
关于javascript - 带有css和jquery的下拉菜单的滑动效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53970273/