0
だから私はこれでできることすべてを試しました。私はこの効果を得るためにCSSとJqueryを使用しています。シンプルであると思われます：応答性のために、携帯電話の幅になると、ただブロックメニューに移行することが考えられます。ユーザーがタップすると（Jquery経由で）メニューが展開され、スムーズに開くようになっています。しかし、それはしません。ここでナビゲーションメニューバーが滑らかに滑っていないのはなぜですか？
は私のコードです：
HTML（HTMLの下部にはJQuery）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The HTML5 Herald</title>
<!-- <link type="text/css" rel="stylesheet" href="css/normalize.css"> -->
<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css"
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<header>
<h1>Best Website Since Google</h1>
</header>
<nav>
<ul class="showing">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="handle">Menu</div>
</nav>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sagittis vestibulum. Fusce laoreet tincidunt massa. In rutrum et libero a venenatis. Vestibulum malesuada sem sed pharetra pellentesque. In vitae tempus enim. Quisque porta, tortor ut bibendum lacinia, leo felis fringilla quam, ac euismod risus leo ut elit. Duis ornare velit vitae urna volutpat, condimentum sagittis nunc gravida. Vivamus placerat nibh ante, a mattis metus sodales quis. Curabitur luctus eros tortor, a venenatis nunc consectetur sodales. Ut ac orci ut libero porta tempus. </p>
</section>
<script>
$('.handle').on('click', function() {
$('nav ul').toggleClass('showing');
});
</script>
</body>
</html>
はCSS：
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: helvetica, arial, sans-serif;
}
/************************************
************** HEADER ***************
************************************/
header {
background: #00795f;
width: 100%;
padding: 40px 0;
text-align: center;
}
/************************************
************* NAVRBAR ***************
************************************/
nav ul {
background-color: #43a286;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height: 0.4s;
-ms-transition: max-height: 0.4s;
-moz-transition: max-height: 0.4s;
-o-transition: max-height: 0.4s;
transition: max-height: 0.4s;
}
nav ul li {
display: inline-block;
padding: 20px;
}
nav ul li:hover,
nav ul li a:hover {
background-color: #399077;
}
nav ul li a,
nav ul li a:link {
text-decoration: none;
color: #fff;
}
nav ul li a:active {
font-weight: bold;
text-decoration: none;
}
.handle {
width: 100%;
background: #005c48;
text-align: left;
box-sizing: border-box;
padding: 15px 10px;
cursor: pointer;
color: #fff;
display: none;
}
/************************************
************** SECTION **************
************************************/
section {
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
@media screen and (max-width: 580px) {
nav ul {
max-height: 0;
}
.showing {
max-height: 20em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: left;
}
.handle {
display: block;
}
}