トグルで開いた左側のメニューのコード

Question

私は現在、デスクトップビューの左側からスライドするメニューを開くトグル/アイコンが必要なサイトを実行していますが、モバイルではドロップダウンしたいだけです上から応答してください。誰もこれを行う方法を知っていますか？

これは、複数の方法で行うことができるおかげで

Answer 1

が、私はCSSを使用することをお勧めします：

CSS（モバイルファーストアプローチ）：

// mobile 
.menu { 
    position: fixed; 
    top: 0; 
    height: 2em; 
} 

// desktop 
@media (min-width: <desktop size>px){ 
    .menu { 
    width: 2em; 
    height: fit-content; 

    /* smooth transition */ 
    will-change: transform; 
    transition: transform 450ms linear; 

    /* this centers the menu vertically and 
    puts the menu out of the viewport. */ 
    top: 50%; 
    left: 0; 
    transform: translateY(-50%) translateX(-100%); 
    } 
    .menu.show { 
    /* this will put the menu in the viewport */ 
    transform: translateY(-50%) translateX(0); 
    } 
} 

JAVASCRIPT：

var toggleButton = document.querySelector("#toggle-button"); 
var menu = document.querySelector("#menu"); 

toggleButton.addEventListener("click", function(){ 
    menu.classList.toggle("show"); 
}, false); 

プレフィックスを追加し、複数のデバイスにまたがってテストしたいと思うかもしれません。

しかし、この問題は私がここに示しているよりも少し複雑です。例えば。位置固定は、古いブラウザで問題が発生する可能性があるプロパティです。