タイトル: HTML、CSS、jQuery を使用してレスポンシブなスライド メニューを作成するための実践的なガイド
現代の Web デザインでは、レスポンシブ デザインがトレンドになっています。ユーザー エクスペリエンスを向上させるために重要な要素は、Web ナビゲーション メニューを可能な限り最適な方法で表示することです。この記事では、HTML、CSS、jQuery を使用して応答性の高いスライド メニューを作成し、Web デザインでのユーザー ナビゲーション エクスペリエンスを向上させる方法を紹介します。
1. HTML 構造
まず、HTML ファイルに基本的なメニュー構造を作成します。一般的なメニュー構造の例を次に示します。
<div class="menu-container"> <div class="menu-toggle"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> <ul class="menu"> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">服务</a></li> <li><a href="#">联系</a></li> </ul> </div>
上記のコードでは、.menu-container
はメニュー全体 .menu-toggle# を含むコンテナです。 ## はメニューの表示/非表示をトリガーするために使用されるボタン、
.menu は実際のメニュー リストです。
.menu-container { position: relative; } .menu-toggle { display: block; cursor: pointer; padding: 10px; background-color: #333; color: #fff; } .bar { display: block; width: 30px; height: 4px; background-color: #fff; margin-bottom: 6px; } .menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: #333; color: #fff; } .menu li { padding: 10px; border-bottom: 1px solid #555; } @media (min-width: 768px) { .menu-toggle, .menu { display: none; } .menu-container { position: static; } .menu { display: flex; justify-content: space-between; align-items: center; background-color: transparent; color: #333; } .menu li { border-bottom: none; } }
$(function() { $('.menu-toggle').on('click', function() { $('.menu').slideToggle(300); }); });
slideToggle() メソッドを使用して、メニューを 300 ミリ秒間表示または非表示にします (必要に応じて調整できます)。
以上がHTML、CSS、jQueryを使用してレスポンシブなスライドメニューを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。