ページの主な部分:
<body> <ul id = menu> <li> <a href =#> first menu1 </a> <ul> <li> 2番目のメニュー1 </li> <li> 2番目のメニュー1 </li> <li> 2番目のメニュー1-3 </li> </ul> </li> <li> 2番目のメニューメニュー2 </a> <ul> <li>セカンドメニュー2-1 </li> <li>セカンドメニュー22-2 </li> <li>セカンドメニュー2-3 </li> </li> </li> <li>セカンドメニュー3 </a> <ul> <li>セカンドメニュー3 </a> <ul> <li>セカンドメニュー3 <li> 2番目のメニュー3 </li> </li> <li>セカンドメニュー3 </a> <ul> <li>セカンドレベルメニュー4-1 </li> <li>セカンドレベルメニュー4-2 </li> <li>セカンドレベルメニュー4-3 </li> </li> </li> <ul> </body>
折りたたみメニューの例:
CSSパーツ
<head> <style type = text/css> li {list-style:none;リストの以前のグラフィックを削除} li a {color:#123;最初のレベルのメニューのテキスト色を設定します} #menu ul {display:none;デフォルトで表示されないセカンダリメニューを設定} #menu> li:hover ul {display:block;マウスが最初のレベルのメニューをスライドすると、セカンダリメニューが表示されます} </style> </head>アコーディオンメニューの例:
CSSパーツ
<head> <style type = text/css> li {list-style:none;リストの前の図を削除} li a {color:#123;最初のレベルのメニューのテキスト色を設定します} #menu> li、#menu> li> a、#menu> li> ul {float:left;第1レベルのメニュー、セカンドレベルのメニュー左移動} #menu> li> a {display:block;背景色;赤; } #menu> li:hover ul {display:block;}#menu> ul {display:none;幅:100px;バックグラウンドカラー:#123;パディングトップ:20px;} </style> </head>要約します上記は、編集者が紹介した折りたたみメニューとアコーディオンメニューを実装するためのコードの例です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!
この記事が役立つと思われる場合は、再版してください。ソースを示してください、ありがとう!