ハンバーガーメニュー+パララックス

Question

私は奇妙な組み合わせ - 視差とハンバーガーメニューを持っています。問題は、 ハンバーガーメニューアイコンの上にマウスを合わせると だけでなく、あなたがマウスを動かすたびにナビゲーションが落ちることです。私はそれが コードの太いバグだと思うが、私はそれを見つけることができません。私はそれのためにjqueryを持っていない。また、I は、パララックス+ハンバーガーメニューチュートリアルを見つけることができませんでした。私は ナビゲーションレスポンスをしようとしています。

HTML 

<header> 
    <nav> 
    <a href="#" style="font-size: 40px; font-family:'Forte'; color: white; 
padding: 10px 30px; text-decoration:none; ">Vowel</a> 
    <a href="#" style="float: right; padding: 10px 10px;"> 
    <img src="icon_menu.png"></img> 
    </a> 
    <ul> 
     <li><a href="about_us.html">About us</a></li> 
     <li><a href="#">Subscribe</a></li> 
    </ul> 
    </nav> 
</header> 

CSS 

nav { 
width: 100%; 
height: 60px; 
background-color: red; 
position: fixed; 
z-index: 100; 
} 

#menu-icon { 
background-image: url("icon_menu.png"); 
display: hidden; 
width: 32px; 
height: 32px; 
} 

nav ul { 
list-style-type: none; 
position: fixed; 
padding: 20px; 
background: red; 
width: 100%; 
text-decoration: none; 
color: white; 
display: none; 
} 

nav:active ul { 
list-style-type: none; 
display: none; 
position: fixed; 
padding: 20px; 
background: red; 
right: 0px; 
top: 60px; 
width: 100%; 
text-decoration: none; 
color: white; 
border: 1px solid white; 
} 

nav:hover ul { 
    display: block; 
} 

nav li { 
    text-align: center; 
    width: 100%; 
    padding: 15px 0; 
    margin: 0; 
    text-decoration: none; 
    color: white; 
} 

nav a:hover { 
    text-decoration: none; 
} 


container { 
max-width: 960px; 
height: 500px; 
margin: 0 auto; 
background: #f9f9f9; 
padding: 25px; 
border-top: 1px solid black; 
overflow: scroll; 
} 

Answer 1

問題はホバー要素が全幅になってしまうことです。だから、ホバーアクションは、ハンバーガーメニューアイコンだけをターゲットにする必要があります。

メニューアイコンのアンカータグにクラスを追加し、そのクラスを使用して、ホバーアクションをトリガーできます。

<a class="hamberger-menu" href="#" style="float: right; padding: 10px 10px;"> 
    <img src="icon_menu.png"></img> 
</a> 

また、それに応じてCSSコードを変更する必要があります。

.hamberger-menu:hover~ul { 
    display: block; 
}