0
何かの理由で上下にスライドするときに飛び回るように見える、スライドトグルメニューを作成しました。スライドするヘッダーの境界線の下端は、メニューが上下にスライドしたときに飛んできますが、そうでない場合はslideToggleが正常に機能します。私のslideToggleに奇妙なジャンプグリッチがあるのはなぜですか？
.headermenuの位置を相対的に設定しようとしましたが、オーバーフローを隠していましたが、どちらも問題を修正していないようです。スライドトグルが境界線の底で正しく機能しないのでしょうか、それとも私のコードの問題ですか？
グリッチは説明するのが難しいですが、私のコードスニペットにグリッチが表示されるので、何が起こっているのかを理解するために表示することをお勧めします。基本的に、メニューが下にスライドすると、境界の下端がバウンドしています。メニューがアクティブになりますが、コーナーで少し壊れた画像をクリックする必要がヘッダードロップダウンを活性化するために
（あなたがアクションでグリッチを見ることができます。）
が、それはいくつかの並べ替えに関連していますアニメーションの開始高さは？ページ内の特定のポイントからアニメーションを開始する必要がありますか？
$(document).ready(function(){
$("button").click(function(){
$(".headermenu").slideToggle();
$(".headermenu").height('150')
});
});* {
box-sizing: border-box;
}
@font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid white 1px;
color: white;
float: left;
height: 60px;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150px;
}
.headermenu {
background-color: blue;
border-bottom: solid white 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 40px;
position: relative;
width: 100%;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}<!DOCTYPE HTML>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<title>Why Have There Been No Great Women Artists?</title>
</head>
<body>
<header>
<button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li><a href="./georgia.html">Georgia O'Keeffe</a></li>
<li><a href="./frida.html">Frida Kahlo</a></li>
<li><a href="./artemesia.html">Artemisia Gentileschi</a></li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li><a href="essay/essay.pdf">The Essay</a></li>
<li><a href="./judy.html">Judy Chicago</a></li>
<li><a href="./kara.html">Kara Walker</a></li>
<li><a href="./mendieta.html">Ana Mendieta</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
このコミュニティのための最高の質問をする方法を理解するhttp://stackoverflow.com/help/mcveをお読みください。 CSSやHTMLが無関係であるようです。 –
@KScandrett私はトグルメニューの問題を隠さずにできるだけ早くCSSとHTMLを編集しました。間違ってフォーマットされた質問を申し訳ありません！ –