レスポンシブなドロップダウン メニューを作成する方法

Question

ハンバーガー メニューのアイコンが右側、画像が左側にある必要があります。

メニューをクリックして開くと、ドロップダウン メニューが展開され、ロゴ ホーム 会社概要 ギャラリー 連絡先が表示されます。

<div class="rectangle1">
    <ul class="ドロップダウン">
        <li class="li1"><a href="home.html"><img class="img" src="YOGI Logo.svg" alt=""> </a></li>
        <li class="li2"<a class="a1" href="#home">ホーム</a></li>


        <li class="li3"<a class="a2" href="aboutus.html">会社概要</a></li>

        <li class="li4"<a class="a3" href="gallery.html">ギャラリー</a></li>

        <li class="li5"<a class="a4" href="contact.html">お問い合わせ</a></li>

        <a class="Contact_Us" href="contact.html">
            <img class="お問い合わせ-img"src="Vector.svg" alt="">
           <span class="Contact-us-text">お問い合わせ</span>
          </a>

    </ul>
</div>

CSS に変換するだけです。

iPhone 14 Pro のレスポンシブ デザインに適応させてハンバーガー メニューにする必要があります。

Answer 1

これが役に立つかもしれないと思いました: CSS @media Rule。チュートリアルで見たように、CSS には画面の幅を確認する方法があります。

リーリー

この例では、幅が 600 ピクセル未満の場合、背景色は水色に設定されます。このルールを使用すると、それに応じて CSS を変更できます。

インターネットからコピー＆ペーストするだけではなく、自分で実装してみる必要があります。 CSS を楽しく使ってみましょう。これが CSS を学ぶ唯一の方法です。

Answer 2

これは、レスポンシブなハンバーガー メニューを実装するために変更された CSS コードです:

CSS (styles.css):

リーリー