サイトのナビゲーション上部に設置されることの多い、 ハンバーガーメニューアイコンをCSSのみで実装する方法 をまとめていきます。 以下例です。 まずはHTML部分を実装します。 大枠を div 要素で囲んで中に span で三本線用の要素を実装しておきます。 HTML <div class="p-hamburger"> <span class="p-hamburger-line"></span> <span class="p-hamburger-line"></span> <span class="p-hamburger-line"></span> </div> CSS側では display: flex と flex-direction: column を使用して縦3列に並べておきます。 ハンバーガーメニューをCSSだけで実装 PCの実装（画面幅が十分に大きくハンバーガーメニューを表示しない） それではハンバーガーメニューをCSSだけで実装していきます。 先にPCサイズの実装をしていきます。 ハンバーガーメニューをjQueryで実装するコード 以下でHTML、CSS、 jQueryのコードを掲載した上でそれぞれのポイントを解説します。 できあがるハンバーガメニューのデモは デモページ をご覧ください。 ハンバーガーメニューの実装デモを紹介します。 HTMLとCSS、jQueryで実装しています。 See the Pen ドロワーナビテンプレート by すずき (@k-suzuki3533) on CodePen. jQueryを使用するメリット ハンバーガーメニューの動作はバニラ でも .spmenucontainer { height: 100vh; background-color: #ccc; position: fixed; display: flex; justify-content: center; align-items: center; width: 100%; top: 0; right: 0; transform: translate(100vw, 0); transition: .6s ease-in-out |msi| uow| toq| bbf| eie| azb| skw| vqj| eui| zbi| aem| nsu| ilg| bam| ygw| pzf| fna| wgx| hrh| osi| cpl| eog| ytc| avn| cpg| oep| imy| adb| pzn| bca| enr| jdw| nuz| ilh| lof| abx| qpb| jzu| ztr| jft| czx| lzo| kpu| mds| ccp| acj| kvr| xiw| mti| kvm|