は、Javascriptのドロップダウンメニュー

上の援助を必要とする、任意の助けを大幅には、Javascriptのドロップダウンメニュー

私は求めています再び

Javascript: 

function myFunction(){ 
    var hamburger=document.getElementById('nav-btn') 
    var dropdownContent=document.getElementsByClassName('nav') 


    hamburger.onclick=dropdownContent.classList.toggle("show"); 

    //or hamburger.onclick=dropdownContent.style.display("block"); 
} 


CSS: 
    #nav-btn { 
    display: none; 
    } 

    @media (max-width: 1099px) { 
    li { 
     display: none; 
    } 

    #nav-btn { 
     display: inline; 
     position: absolute; 
     right: 10px; 
     bottom: 110px; 
    } 

    #nav-btn:hover { 
     content: url('Menu.png'); 
    } 


HTML: 
<html> 
<body> 
    <span id="nav-btn"><image src="Menugreen.png" input type="button" onclick="myFunction()"/></span> 
     <div class="nav"> 
     <ul> 
      <li id="Programs"> <a href="Programs.html"> Programs </a> </li> 
      <li> <a href="Tshirts.html"> T-Shirts </a> </li> 
      <li> <a href="About.html"> About </a> </li> 
     </ul> 
     </div> 
</body> 
</html>

を理解されるであろうnav-btnのドロップダウン・スパンIDがなぜulの内容をドロップダウンしないのかについてのアドバイスは、他のすべてのものがうまく機能します。ありがとうございました！

出典

2017-02-19 MJCarnahan

showクラスを切り替えようとしていますが、showクラスが定義されていません。 toggleClass()は、その名前でCSSクラスを追加または削除するためのものです。

// Get DOM references 
 
var hamburger = document.getElementById('nav-btn') 
 
var dropdownContent = document.querySelector('.nav') 
 

 
// Set up event handler 
 
hamburger.addEventListener("click", function(){ 
 
dropdownContent.classList.toggle("hide"); 
 
});

#nav-btn { 
 
\t display: none; 
 
} 
 

 
@media (max-width: 1099px) { 
 
\t .hide { 
 
    display: none; 
 
    } 
 

 
    #nav-btn { 
 
    display: inline; 
 
    position: absolute; 
 
    right: 10px; 
 
    bottom: 110px; 
 
    } 
 

 
    /* Change the image when you hover over the image, not the span*/ 
 
    #nav-btn > img:hover { 
 
    \t content: url('Menu.png'); 
 
    } 
 
}

<span id="nav-btn"> 
 
    <image src="Menugreen.png" alt="menu"> 
 
    <input type="button" value=" - - -"> 
 
</span> 
 
<div class="nav"> 
 
    <ul> 
 
    <li id="Programs"><a href="Programs.html">Programs</a></li> 
 
    <li> <a href="Tshirts.html">T-Shirts</a> </li> 
 
    <li> <a href="About.html">About</a> </li> 
 
    </ul> 
 
</div>

出典

2017-02-19 23:21:02

NAVホバー修正と迅速な対応のためにどうもありがとうございます！残念ながら、これはまだ動作していません。あなたのコードスニペットを実行したときには機能しましたが、私の最後では機能していません（私はすでに構文エラーをチェックしていました）。まず、なぜ値= " - - - "が必要なのですか（なぜ、これは画像が崩壊ボタンになりたいのですか）、なぜliを.hideに置き換えたのですか？今すぐリストが常に表示されます。私の質問に初めて答えていただきありがとうございます。素晴らしい一日の男を！ – MJCarnahan

私は 'value = ---'を追加しただけなので、画像にアクセスできないので、ここで何かを見ることができます。また、あなたが何をしているかについて完全にはっきりしていないので、私の答えはあなたにこのようなものを実装する方法の実例を与えることを意図しています。あなたは "ショー"クラスを参照しましたが、実際には持っていませんでした。 –

は、Javascriptのドロップダウンメニュー

答えて

関連する問題