レスポンシブなドロップダウン メニューを作成する方法
P粉521013123
2023-09-04 15:47:42
<p>ハンバーガー メニューのアイコンが右側、画像が左側にある必要があります。 </p>
<p>メニューをクリックして開くと、ドロップダウン メニューが展開され、ロゴ ホーム <em>会社概要</em> ギャラリー 連絡先が表示されます。 </p>
<pre class="brush:html;toolbar:false;"><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>
</pre>
<p>CSS に変換するだけです。 </p>
<p>iPhone 14 Pro のレスポンシブ デザインに適応させてハンバーガー メニューにする必要があります。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これが役に立つかもしれないと思いました: CSS @media Rule。チュートリアルで見たように、CSS には画面の幅を確認する方法があります。
リーリーこの例では、幅が 600 ピクセル未満の場合、背景色は水色に設定されます。このルールを使用すると、それに応じて CSS を変更できます。
インターネットからコピー＆ペーストするだけではなく、自分で実装してみる必要があります。 CSS を楽しく使ってみましょう。これが CSS を学ぶ唯一の方法です。
これは、レスポンシブなハンバーガー メニューを実装するために変更された CSS コードです:
CSS (styles.css):
リーリー