Movable Type 備忘録

 CSSでドロップメニュー

  • May182007
  • Vote:
    http://bizcaz.com/archives/2007/05/18-225651.php
  • Categories: Template, Tools
  • Tags:
  • Social Bookmark

こんにちわ^^

今日は風の強い1日でしたが、久しぶりに幼馴染みから連絡があって、銀座で飲んできました (●´∀｀●)
赤ワインを飲み過ぎせいか、かなり体が火照ってます (//▽//)

さて、気をとり直して、先日ドロップメニューのやり方教えて･･･と友人からTELがありました。
はて!? だいぶ前にやり方など教えたはずだが、すっかり忘れてしまっているようなので、改めてCSSでドロップメニューをご紹介します。

これから紹介する示す各ドロップメニューは共通のXHTMLを使用しています。
以下にそのXHTMLを記します。

ドロップメニュー

  1. <div id="menu">
  2.     <ul>
  3.     <li><a href="javascript:void(0);" class="hide">MENU 1</a>
  4.         <!--[if lte IE 6]>
  5.         <a href="javascript:void(0);">MENU 1
  6.         <table><tr><td>
  7.         <![endif]-->
  8.  
  9.         <ul>
  10.         <li><a href="javascript:void(0);">MENU 1-1</a></li>
  11.         <li><a href="javascript:void(0);" class="hide">MENU 1-2 &gt;</a>
  12.             <!--[if lte IE 6]>
  13.             <a class="sub" href="javascript:void(0);">MENU 1-2 &gt;
  14.             <table><tr><td>
  15.             <![endif]-->
  16.  
  17.             <ul>
  18.             <li><a href="javascript:void(0);">MENU 1-2-1</a></li>
  19.             <li><a href="javascript:void(0);">MENU 1-2-2</a></li>
  20.             <li><a href="javascript:void(0);">MENU 1-2-3</a></li>
  21.             </ul>
  22.  
  23.             <!--[if lte IE 6]>
  24.             </td></tr></table>
  25.             </a>
  26.             <![endif]-->
  27.         </li>
  28.  
  29.         <li><a href="javascript:void(0);">MENU 1-3</a></li>
  30.  
  31.         <li><a href="javascript:void(0);" class="hide">MENU 1-4 &gt</a>
  32.             <!--[if lte IE 6]>
  33.             <a class="sub" href="javascript:void(0);">MENU 1-4 &gt;
  34.             <table><tr><td>
  35.             <![endif]-->
  36.  
  37.             <ul>
  38.             <li><a href="javascript:void(0);">MENU 1-4-1</a></li>
  39.             <li><a href="javascript:void(0);">MENU 1-4-2</a></li>
  40.             <li><a href="javascript:void(0);">MENU 1-4-3</a></li>
  41.             <li><a href="javascript:void(0);">MENU 1-4-4</a></li>
  42.             </ul>
  43.  
  44.             <!--[if lte IE 6]>
  45.             </td></tr></table>
  46.             </a>
  47.             <![endif]-->
  48.         </li>
  49.  
  50.         <li><a href="javascript:void(0);">MENU 1-5</a></li>
  51.         </ul>
  52.  
  53.         <!--[if lte IE 6]>
  54.         </td></tr></table>
  55.         </a>
  56.         <![endif]-->
  57.     </li>
  58.  
  59.     <li><a href="javascript:void(0);" class="hide">MENU 2</a>
  60.         <!--[if lte IE 6]>
  61.         <a href="javascript:void(0);">MENU 2
  62.         <table><tr><td>
  63.         <![endif]-->
  64.  
  65.         <ul>
  66.         <li><a href="javascript:void(0);">MENU 2-1</a></li>
  67.         <li><a href="javascript:void(0);">MENU 2-2</a></li>
  68.         <li><a href="javascript:void(0);">MENU 2-3</a></li>
  69.         </ul>
  70.  
  71.         <!--[if lte IE 6]>
  72.         </td></tr></table>
  73.         </a>
  74.         <![endif]-->
  75.     </li>
  76.  
  77.     <li><a href="javascript:void(0);" class="hide">MENU 3</a>
  78.         <!--[if lte IE 6]>
  79.         <a href="javascript:void(0);">MENU 3
  80.         <table><tr><td>
  81.         <![endif]-->
  82.  
  83.         <ul>
  84.         <li><a href="javascript:void(0);">MENU 3-1</a></li>
  85.         <li><a href="javascript:void(0);">MENU 3-2</a></li>
  86.         <li><a href="javascript:void(0);">MENU 3-3</a></li>
  87.         <li><a href="javascript:void(0);">MENU 3-4</a></li>
  88.         </ul>
  89.  
  90.         <!--[if lte IE 6]>
  91.         </td></tr></table>
  92.         </a>
  93.         <![endif]-->
  94.     </li>
  95.  
  96.     <li><a href="javascript:void(0);" class="hide">MENU 4</a>
  97.         <!--[if lte IE 6]>
  98.         <a href="javascript:void(0);">MENU 4
  99.         <table><tr><td>
  100.         <![endif]-->
  101.  
  102.         <ul>
  103.         <li><a href="javascript:void(0);">MENU 4-1</a></li>
  104.         <li><a href="javascript:void(0);">MENU 4-2</a></li>
  105.         <li><a href="javascript:void(0);">MENU 4-3</a></li>
  106.         </ul>
  107.  
  108.         <!--[if lte IE 6]>
  109.         </td></tr></table>
  110.         </a>
  111.         <![endif]-->
  112.     </li>
  113.  
  114.     <li><a href="javascript:void(0);" class="hide">MENU 5</a>
  115.         <!--[if lte IE 6]>
  116.         <a href="javascript:void(0);">MENU 5
  117.         <table><tr><td>
  118.         <![endif]-->
  119.  
  120.         <ul>
  121.         <li><a href="javascript:void(0);">MENU 5-1</a></li>
  122.         <li><a href="javascript:void(0);">MENU 5-2</a></li>
  123.         <li><a href="javascript:void(0);" class="hide">&lt; MENU 5-3</a>
  124.             <!--[if lte IE 6]>
  125.             <a class="sub" href="javascript:void(0);">&lt; MENU 5-3
  126.             <table><tr><td>
  127.             <![endif]-->
  128.  
  129.             <ul class="left">
  130.             <li><a href="javascript:void(0);">MENU 5-3-1</a></li>
  131.             <li><a href="javascript:void(0);">MENU 5-3-2</a></li>
  132.             <li><a href="javascript:void(0);">MENU 5-3-3</a></li>
  133.             </ul>
  134.  
  135.             <!--[if lte IE 6]>
  136.             </td></tr></table>
  137.             </a>
  138.             <![endif]-->
  139.         </li>
  140.         </ul>
  141.  
  142.         <!--[if lte IE 6]>
  143.         </td></tr></table>
  144.         </a>
  145.         <![endif]-->
  146.     </li>
  147.     </ul>
  148. </div><!-- menu -->

縦にレイアウトしたドロップメニュー

まずはサンプルですね。

サンプルを表示できませんでした。

上記のサンプルでは、メニュー項目を縦にレイアウトして、ネストするごとに右にシフトしていくタイプのドロップメニューになります。
スタイルシートは以下のようになります。

IE7含むモダンブラウザー用

  1. <style type="text/css">
  2. /*▼メニューブロック▼*/
  3. div#menu {
  4.     width: 126px; /*メニュー階層１幅① + 2px */
  5.     height: 150px; /*メニュー項目数に応じて調整 */
  6.  
  7.     position: relative;
  8.  
  9.     font-size: 12px;
  10. }
  11. /*▲メニューブロック▲*/
  12.  
  13. /*▼メニュー階層１▼*/
  14. div#menu ul li a, div#menu ul li a:visited {
  15.     width: 124px; /*メニュー階層１幅① */
  16.     height: 20px; /*メニュー階層１高さ① */
  17.  
  18.     display: block;
  19.     text-decoration: none;
  20.     line-height: 19px; /*メニュー階層１高さ - 1px */
  21.     font-size: 11px;
  22.     text-indent: 1em;
  23.  
  24.     color: #4c597f; /*メニュー階層１前景色 */
  25.     background: #eee; /*メニュー階層１背景色 */
  26.  
  27.     border: 1px solid #000; /*サイトの背景色を指定する */
  28.     border-width: 1px 1px 0 0;
  29. }
  30. div#menu ul {
  31.     margin: 0;
  32.     padding: 0;
  33.  
  34.     list-style-type: none;
  35. }
  36. div#menu ul li {
  37.     margin-right: 1px;
  38.  
  39.     float: left;
  40.     position: relative;
  41. }
  42. div#menu ul li ul {
  43.     display: none;
  44. }
  45. div#menu ul li:hover a {
  46.     color: #eee; /*ホバー時の前景色 */
  47.     background: #4c597f; /*ホバー時の背景色 */
  48. }
  49. /*▲メニュー階層１▲*/
  50.  
  51. /*▼メニュー階層２▼*/
  52. div#menu ul li:hover ul {
  53.     width: 125px; /*メニュー階層２幅 + 1px */
  54.  
  55.     position: absolute;
  56.     top: 0;
  57.     left: 125px; /*メニュー階層１幅 + 1px */
  58.  
  59.     display: block;
  60. }
  61. div#menu ul li:hover ul li a.hide {
  62.     color: #eee; /*入れ子メニュー前景色 */
  63.     background: #4c597f; /*入れ子メニュー背景色 */
  64. }
  65. div#menu ul li:hover ul li:hover a.hide {
  66.     width: 125px; /*メニュー階層２幅と同じ */
  67. }
  68. div#menu ul li:hover ul li ul {
  69.     display: none;
  70. }
  71. div#menu ul li:hover ul li a {
  72.     width: 125px; /*メニュー階層２幅と同じ */
  73.  
  74.     display: block;
  75.  
  76.     color: #4c597f; /*メニュー階層２前景色 */
  77.     background: #eee; /*メニュー階層２背景色 */
  78. }
  79. div#menu ul li:hover ul li a:hover {
  80.     color: #eee; /*ホバー時の前景色 */
  81.     background: #a22041; /*ホバー時の背景色 */
  82. }
  83. /*▲メニュー階層２▲*/
  84.  
  85. /*▼メニュー階層３▼*/
  86. div#menu ul li:hover ul li:hover ul {
  87.     position: absolute;
  88.     left: 126px; /*メニュー階層２幅 + 1px */
  89.     top: 0;
  90.  
  91.     display: block;
  92.  
  93.     color: #000;
  94. }
  95. div#menu ul li:hover ul li:hover ul li a {
  96.     width: 125px; /*メニュー階層３幅 */
  97.  
  98.     display: block;
  99.  
  100.     color: #4c597f; /*メニュー階層３前景色 */
  101.     background: #eee; /*メニュー階層３背景色 */
  102. }
  103. div#menu ul li:hover ul li:hover ul li a:hover {
  104.     color: #eee; /*ホバー時の前景色 */
  105.     background: #769164; /*ホバー時の背景色 */
  106. }
  107. /*▲メニュー階層３▲*/
  108. </style>

そして、以下はIE6用のスタイルシートになります。

IE6用

  1. <!--[if lte IE 6]>
  2. <style type="text/css">
  3. div#menu table {
  4.     margin: 0;
  5.     padding: 0;
  6.  
  7.     border-collapse: collapse;
  8.     border: 0;
  9.  
  10.     z-index:100;
  11. }
  12. div#menu ul li a.hide, div#menu ul li a:visited.hide {
  13.     display: none;
  14. }
  15. div#menu ul li a:hover ul li a.hide {
  16.     display: none;
  17. }
  18. div#menu ul li a:hover {
  19.     color: #eee; /*ホバー時の前景色 */
  20.     background: #4c597f; /*ホバー時の背景色 */
  21. }
  22. div#menu ul li a:hover ul {
  23.     width: 125px; /*メニュー階層２幅 + 1px */
  24.  
  25.     position: absolute;
  26.     top: 0;
  27.     left: 125px; /*メニュー階層１幅 + 1px */
  28.  
  29.     display: block;
  30. }
  31. div#menu ul li a:hover ul li a.sub {
  32.     color: #eee; /*入れ子メニュー前景色 */
  33.     background: #4c597f; /*入れ子メニュー背景色 */
  34. }
  35. div#menu ul li a:hover ul li a {
  36.     width: 125px; /*メニュー階層２幅と同じ */
  37.  
  38.     display: block;
  39.  
  40.     color: #4c597f; /*メニュー階層２前景色 */
  41.     background: #eee; /*メニュー階層２背景色 */
  42. }
  43. div#menu ul li a:hover ul li a ul {
  44.     visibility: hidden;
  45. }
  46. div#menu ul li a:hover ul li a:hover {
  47.     color: #eee; /*ホバー時の前景色 */
  48.     background: #a22041; /*ホバー時の背景色 */
  49. }
  50. div#menu ul li a:hover ul li a:hover ul {
  51.     visibility: visible;
  52.     position: absolute;
  53.     left: 126px; /*メニュー階層２幅 + 1px */
  54.     top: 0;
  55.  
  56.     color: #000;
  57. }
  58. div#menu ul li a:hover ul li a:hover ul li a {
  59.     width: 125px; /*メニュー階層３幅 */
  60.  
  61.     display: block;
  62.  
  63.     color: #4c597f; /*メニュー階層３前景色 */
  64.     background: #eee; /*メニュー階層３背景色 */
  65. }
  66. div#menu ul li a:hover ul li a:hover ul li a:hover {
  67.     color: #eee; /*ホバー時の前景色 */
  68.     background: #769164; /*ホバー時の背景色 */
  69. }
  70. </style>
  71. <![endif]-->

通常のドロップメニュー

まずはサンプルですね。

サンプルを表示できませんでした。

上記のサンプルでは、一般的なドロップメニューになります。
スタイルシートは以下のようになります。

IE7含むモダンブラウザー用

  1. <style type="text/css">
  2. div#menu {
  3.     width: 435px; /*メニュー全体の幅 */
  4.                                 /*(メニュー幅 + ボーダー横幅(2px) + 余白(1px)) x メニュー項目数*/
  5.     position: relative;
  6.     font-size: 11px;
  7.     z-index: 100;
  8. }
  9. div#menu ul li a, div#menu ul li a:visited {
  10.     width: 84px; /*メニュー幅 */
  11.     height: 20px; /*メニュー高さ */
  12.  
  13.     display: block;
  14.     line-height: 20px;
  15.     overflow: hidden;
  16.  
  17.     font-size: 11px;
  18.     text-decoration: none;
  19.     text-align: center;
  20.  
  21.     color: #4c597f; /*メニュー前景色 */
  22.     background: #eee; /*メニュー背景色 */
  23.     border: 1px solid #eee;
  24. }
  25. div#menu ul {
  26.     padding: 0;
  27.     margin: 0;
  28.  
  29.     list-style-type: none;
  30. }
  31. div#menu ul li {
  32.     margin-right: 1px;
  33.  
  34.     float: left;
  35.     position: relative;
  36. }
  37. div#menu ul li ul {
  38.     display: none;
  39. }
  40.  
  41. div#menu ul li:hover a {
  42.     color: #eee; /*ホバー時の前景色 */
  43.     background: #4c597f; /*ホバー時の背景色 */
  44. }
  45. div#menu ul li:hover ul {
  46.     width: 85px; /*メニュー幅 + 1px */
  47.  
  48.     position: absolute;
  49.     top: 21px; /*メニュー高さ + 1px */
  50.     left: 0;
  51.  
  52.     display: block;
  53. }
  54. div#menu ul li:hover ul li a.hide {
  55.     color: #eee; /*入れ子メニュー前景色 */
  56.     background: #4c597f; /*入れ子メニュー背景色 */
  57. }
  58. div#menu ul li:hover ul li:hover a.hide {
  59.     color: #eee; /*入れ子メニューホバー時の前景色 */
  60.     background: #a22041; /*入れ子メニューホバー時の背景色 */
  61. }
  62. div#menu ul li:hover ul li ul {
  63.     display: none;
  64. }
  65. div#menu ul li:hover ul li a {
  66.     display: block;
  67.  
  68.     color: #4c597f; /*ドロップメニュー前景色 */
  69.     background: #eee; /*ドロップメニュー背景色 */
  70. }
  71. div#menu ul li:hover ul li a:hover {
  72.     color: #eee; /*ドロップ目ヒューホバー時の前景色*/
  73.     background: #a22041; /*ドロップメニューホバー時の背景色*/
  74. }
  75. div#menu ul li:hover ul li:hover ul {
  76.     position: absolute;
  77.     left: 85px; /*メニュー幅と同じ */
  78.     top: 0;
  79.  
  80.     display: block;
  81. }
  82. div#menu ul li:hover ul li:hover ul.left {
  83.     left: -85px; /*メニュー幅と同じ */
  84.                                 /*右端のドロップメニューを左側に表示するため*/
  85. }
  86. </style>

そして、以下はIE6用のスタイルシートになります。

IE6用

  1. <!--[if lte IE 6]>
  2. <style type="text/css">
  3. div#menu ul li a.hide, div#menu ul li a:visited.hide {
  4.     display: none;
  5. }
  6. div#menu ul li a:hover ul li a.hide {
  7.     display: none;
  8. }
  9. div#menu ul li a:hover {
  10.     color: #eee; /*ホバー時の前景色 */
  11.     background: #4c597f; /*ホバー時の背景色 */
  12. }
  13. div#menu ul li a:hover ul {
  14.     width: 85px; /*メニュー幅 + 1px */
  15.  
  16.     position: absolute;
  17.     top: 21px; /*メニュー高さ + 1px */
  18.     left: 0;
  19.  
  20.     display: block;
  21. }
  22. div#menu ul li a:hover ul li a.sub {
  23.     color: #eee; /*入れ子メニュー前景色 */
  24.     background: #4c597f; /*入れ子メニュー背景色 */
  25. }
  26. div#menu ul li a:hover ul li a {
  27.     display: block;
  28.  
  29.     color: #4c597f; /*ドロップメニュー前景色 */
  30.     background: #eee; /*ドロップメニュー背景色 */
  31. }
  32. div#menu ul li a:hover ul li a ul {
  33.     visibility: hidden;
  34. }
  35. div#menu ul li a:hover ul li a:hover {
  36.     color: #eee; /*ドロップ目ヒューホバー時の前景色*/
  37.     background: #a22041; /*ドロップメニューホバー時の背景色*/
  38. }
  39. div#menu ul li a:hover ul li a:hover ul {
  40.     visibility: visible;
  41.     position: absolute;
  42.     left: 85px; /*メニュー幅と同じ */
  43.     top: 0;
  44.  
  45.     color: #000;
  46. }
  47. div#menu ul li a:hover ul li a:hover ul.left {
  48.     left: -85px; /*メニュー幅と同じ */
  49.                                 /*右端のドロップメニューを左側に表示するため*/
  50. }
  51. </style>
  52. <![endif]-->

各スタイルシートにコメントを入れましたので、各自のお好みで調整してください。
とりあえず、WIN/IE6、IE7、Firefox2.0、Opera9.2で表示確認済みです。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード