2016-07-28 6 views
-1

こんにちは!私はCssに問題があります これはfirefoxと完璧に動作しています。私のメニューを開いて閉じる(バーガーメニュー) クロムとモバイルで...働いていません... ボタンをクリックするとメニューが開きません。 誰もが持っていますこれまでにこのような間違いがありましたか?私のウェブのpagrにはクロムとモバイルのエラーがあります。

function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
// Close the dropdown if the user clicks outside of it 
 
window.onclick = function(event) { 
 
    if (!event.target.matches('.dropbtn')) { 
 

 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}
.dropbtn 
 
{ 
 
    background-color: #50b7d8; 
 
    border: medium none; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-size: 16px; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
    padding: 0; 
 
} 
 

 
.dropbtn:hover, 
 
.dropbtn:focus 
 
{ 
 
    background-color: #3e8e41; 
 
} 
 

 
.dropdown 
 
{ 
 
    box-shadow: 0 -4px 10px; 
 
    float: right; 
 
    position: relative; 
 
} 
 

 
.dropdown-content 
 
{ 
 
    background-color: #50b7d8; 
 
    border-radius: 0 10px 10px; 
 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 
 
    display: none; 
 
    left: 10px; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    position: absolute; 
 
    top: 48px; 
 
} 
 

 
.dropdown-content a 
 
{ 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown a:hover 
 
{ 
 
    background-color: #f1f1f1 
 
} 
 

 
.show 
 
{ 
 
    display:block; 
 
} 
 

 
#myDropdown .current.active a 
 
{ 
 
    background-color: #93c524; 
 
    border-radius: 0px; 
 
    color: #fff; 
 
    padding-left: 4px; 
 
    padding-right: 4px; 
 
} 
 

 
#myDropdown .current.active 
 
{ 
 
    border-bottom: 1px solid #fff; 
 
    border-top: 1px solid #fff; 
 
}
<div class="dropdown"> 
 
    <div class="dropbtnblock"> 
 
    <button onclick="myFunction()" class="dropbtn">Apri</button> 
 
    </div> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    miomenu 
 
    </div> 
 
</div>

+1

を作成したコンソール見せています任意のエラー? – Janno

+0

@エパダクス –

答えて

0

これは、バーガーメニューは、解像度最大幅であり、私のサイトです:790px 私はJoomlaのためのテンプレート。..

Link

関連する問題