JavaScript、HTML、およびCSSを使用したドロップダウンメニュー

Question

これを動作させることはできません。私はまだjQueryを入れたくありません。ちょうど普通のjavascriptをやっています。イメージをクリックすると何も起こりません。私は、画像をクリックすると、ナビゲーションをドロップダウンする必要があります。私のJavascriptコードを編集しました。トグルが使用しているクラスの現在の状態を示すアラートを追加しました。しかし、それでもまだ、私はこれは、ナビゲーションドロップダウンのためのHTMLです。これは、クリッカブルイメージ

<a href="#" onclick="toggleMenu()"> 
    <img class="mobile_navigation_button" src="{{site.baseurl}}/assets/img/menu.svg"/> 
</a> 

のための私のHTMLコードです

をheader_navigation_mobile.is_openするheader_navigation_mobileからそれを変更してもらうカント

<div class="header_navigation_mobile"> 
    <ul> 
     <li><a href="{{site.baseurl}}/index.html">HOME</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">CONTACT</a></li> 
     <li><a href="#"> </a></li> 
     <li><a href="#"> </a></li> 
    </ul> 
</div> 

その後、私のCSSは、ナビゲーションを表示するためのクリック可能な画像について

.header_navigation_mobile.is_open{ 
    display: block; 
    transform: translateY(0%); 
} 

これは、設定するためのelements.Andを選択するためのthis.use querySelectorのようにそれをあなたのJSで

.header_navigation_mobile{ 
    display: none; 
    position: absolute; 
    width: 290px; 
    background: #484547; 
    transform: translateY(-100%); 
    transition: all 0.3s ease-in-out; 
} 

そして、最終的には私のJavascriptの

function toggleMenu(){ 
var mobileNav = document.getElementById('mobile_Nav'); 
var mobileNav_toggle = mobileNav.getAttribute("class"); 

if(mobileNav_toggle == "header_navigation_mobile") { 
    mobileNav_toggle == "header_navigation_mobile.is_open"; 
} 
else { 
    mobileNav_toggle == "header_navigation_mobile"; 
} 

alert(mobileNav_toggle); 
} 

Answer 1

を非表示にすることですクリッカブルイメージ最初の状態のためのCSSしようとされCSSプロパティを取得するにはselector.style.property_nameを使用します。

function toggleMenu(){ 
    var mobileNav_Hide = document.querySelector('.header_navigation_mobile'); 
    var mobileNav_Show = document.querySelector('.header_navigation_mobile.is_open') 
    if(mobileNav_Hide.style.display == "none"){ 
     mobileNav_Show.stylr.display == "block"; 
    } 
    else{ 
     mobileNav.style.display = "none"; 
    } 
} 

Answer 2

私はメニューにIDを与えて、ターゲットにするのが簡単なので、メニューを表示/非表示にするクラスを切り替えるだけです。

.header_navigation_mobile { 
 
    display: none; 
 
} 
 
.open { 
 
    display: block; 
 
}

<a href="#" onclick="toggleMenu()">toggle</a> 
 

 
<div class="header_navigation_mobile" id="mobilenav"> 
 
    <ul> 
 
    <li><a href="{{site.baseurl}}/index.html">HOME</a></li> 
 
    <li><a href="#">ABOUT</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    <li> 
 
     <a href="#"> </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> </a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<script> 
 
    function toggleMenu(){ 
 
    var nav = document.getElementById('mobilenav'); 
 
    nav.classList.toggle('open'); 
 
    } 
 
</script>

Answer 3

私はこれがあなたの質問に具体的な答えではない知っているが、同様に便利な溶液であってもよいです。私はあなたのニーズに簡単に編集できる隠しメニューのjsfiddleをまとめました。ここにリンクがあります。

#Btn{ 
 
\t position: fixed; 
 
\t right: 20px; 
 
\t width: 20px; 
 
\t height: 24px; 
 
\t background: linear-gradient(#FFF,#DDD); 
 
\t border: #AAA 1px solid; 
 
\t border-radius: 2px; 
 
\t padding: 2px 5px; 
 
\t cursor: pointer; 
 
\t transition: border 0.3s linear 0s; 
 
} 
 
#Btn:hover{ 
 
\t border: #06F 1px solid; 
 
} 
 
#Btn:hover div{ 
 
\t background: #06F; 
 
} 
 
#Btn > div{ 
 
\t width: 20px; 
 
\t height: 4px; 
 
\t background: #333; 
 
\t margin: 3px 0px; 
 
\t border-radius: 4px; 
 
\t transition: background 0.3s linear 0s; 
 
} 
 
#hidden{ 
 
\t position: fixed; 
 
\t right: -300px; 
 
\t top: 60px; 
 
\t width: 260px; 
 
\t height: 0px; 
 
\t background: #333; 
 
\t color:#ededed; 
 
\t padding:15px; 
 
\t transition: right 0.3s linear 0s; 
 
}

<script> 
 
function toggleBTN(){ 
 
\t var hidden = document.getElementById("hidden"); 
 
\t hidden.style.height = window.innerHeight - 60+"px"; 
 
\t if(hidden.style.right == "0px"){ 
 
\t \t hidden.style.right = "-300px"; 
 
\t } else { 
 
\t \t hidden.style.right = "0px"; 
 
\t } 
 
} 
 
</script> 
 
<div id="Btn" onclick="toggleBTN()"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<div id="hidden"> 
 
    <ul> 
 
    <li>MENU ITEM 1</li> 
 
\t <li>MENU ITEM 2</li> 
 
\t <li>MENU ITEM 3</li> 
 
    </ul> 
 
</div> 
 
<div id="page_content"> 
 
<script> 
 
for(var i = 0; i < 10; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); } 
 
</script> 
 
</div>

希望はこのことができます:)あなたのコードでそのどこかのインスタンスがないからmobileNav来ているelse文のいくつかのものがあります

Answer 4

。あなたのソリューションから一歩後退して、クラス名is_openの追加と削除は、あなたが望むshow hideの動作全体を定義しますか？

サブクラスが存在する/存在しない同じ要素を取得してから、表示プロパティを設定しようとするプロセスが混乱します。

表示プロパティを設定するときには、同等の比較演算子があります。これは、最初の文と一緒に1つの等号だけでなければならないと主な問題です。

の代わりにあなたがそれをやっている方法私はちょうどこのリンクToggle class on HTML element without jQuery IS_OPENクラスをトグルを見てしまうことを行う方法を示し、また、javascriptをせずに

含むトグルのスタイルのいくつかの他の方法を示しています。最後という理由だけでチェック私はディスプレイがプロパティとして有効であり、代わりにスタイルであるべきではないということを怠っています。他の人が表示したように表示してください