CSSテクニック

99%CSSで作るプルダウンメニュー3

横型と縦型を組み合わせた2段階展開型の99%CSSでつくるプルダウンメニューを紹介します。
普通プルダウンはjavascriptメインで作るものですが、今回は限界まで使用を抑えています。 CSSの一つの到達点といえるでしょう。
しかし、自由にカスタマイズするにはかなりの熟練が必要です。

*2005.8.6追記*
実際に導入を考えている方はCSSプルダウン for カスタマイズ を利用することをおすすめします。

テクニック使用後


やり方

1:HTMLを書く

HTMLはこんな感じになります。

<DIV id="menu">
<ul class="main">
<li class="off"onmouseover="this.className='on'" onmouseout="this.className='off'">
<A href="./csstec-top.html">トップ</A>
  <ol class="sub">
  <li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><A href="./csstec-top.html">あああああああ</A>
    <ul class="sub-2">
    <li><a href="#">サンプル1</a></li>
    <li><a href="#">サンプル2</a></li>
    <li><a href="#">サンプル3</a></li>
   </ul>
  </li>
  <li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><A href="../index.html">いいい</A>
   <ul class="sub-2">
    <li><a href="#">サンプル4</a></li>
    <li><a href="#">サンプル5</a></li>
    <li><a href="#">サンプル6</a></li>
   </ul>
  </li>
 </ol>
</li>
<li class="off"onmouseover="this.className='on'" onmouseout="this.className='off'">
<A href="./csstec-top.html">インフォ</A>
 <ol class="sub">
  <li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><A href="./csstec-top.html">ううう</A>
   <ul class="sub-2">
    <li><a href="#">サンプル1</a></li>
    <li><a href="#">サンプル2</a></li>
    <li><a href="#">サンプル3</a></li>
   </ul>
  </li>
  <li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><A href="../index.html">えええ</A>
   <ul class="sub-2">
    <li><a href="#">サンプル4</a></li>
    <li><a href="#">サンプル5</a></li>
    <li><a href="#">サンプル6</a></li>
   </ul>
  </li>
  <li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><A href="../index.html">おおお</A>
   <ul class="sub-2">
    <li><a href="#">サンプル7</a></li>
    <li><a href="#">サンプル8</a></li>
    <li><a href="#">サンプル9</a></li>
   </ul>
  </li>
 </ol>
</li>
</ul>
</DIV>

HTML解説

もうソースが長すぎて説明は無理!ってことでしなくても良いですか?だめですか。そうですか。

基本的にはCSSプルダウン1、2でサブメニューを構築していたolタグの下に、更にul class="sub-2"を加えて2段階目のサブメニューを作っています。

2段階目のメニューが展開するようにサブメニューを構築するolのliタグにclass="off2"等を加えて展開するように仕込んでいます。

入れ子がかなり複雑になっているので、気をつけてください。

2:スタイルシートを書く

スタイルシートはこんな感じになります。量はかなり多めです。

/****全体位置の決定****/
DIV#menu{
    position:absolute;/*△*/
    width:100%;/*○*/
    z-index:100;/*△*/
    font-size:14px;/*△*/
    background-color:#FFFFFF;/*○*/
}
/****メインメニュー用スタイル****/
ul.main{
    margin:0px;/*△*/
    padding:0px;/*△*/
    width:100%;/*○*/
    position:relative;/*×*/
    list-style:none;/*△*/
    text-align:center;/*○*/
}
/*通常時*/
.main li.off{
    position:relative;/*×*/
    float:left;/*×*/
    height:1em;/*○*/
    width:100px;/*○*/
    overflow:hidden;/*×*/
    border:1px solid #993300;/*○*/
}
/*展開時*/
.main li.on{
    float:left;/*×*/
    overflow:hidden;/*×*/
    width:100px;/*○*/
    background-color:#FFFFD5;/*○*/
    border:1px solid #993300;/*○*/
}
.main>li.on{
overflow:visible;/*×*/
}
/*リンクスタイル*/
.main a{
    display:block;/*△*/
    text-decoration:none;/*○*/
}
.main a:hover{
    background-color:#FFFFD5;/*○*/
}

/****サブメニュー用スタイル****/
ol.sub{
    margin:0px;/*△*/
    padding:0px;/*△*/
    position:relative;/*×*/
    left:0.5em;/*○*/
    top:0.5em;/*○*/
    width:100%;/*○*/
    border:1px solid #993300;/*○*/
    border-bottom:0px solid #993300;/*○*/
    background-color:#FFCCCC;/*○*/
    list-style:none;/*△*/
    text-align:left;/*○*/;
}
.sub li{
    /*必要に応じて追加*/;
}
.sub a{
    padding:2px 0px 2px 5px;/*○*/
    display:block;/*△*/
    width:115px;/*○*/
    border-bottom:1px solid #993300;/*○*/
}
.sub a:hover{
    background-color:#FFFFFF;/*○*/
}

/****2段階目サブメニューを展開する****/
/*通常時*/
.sub li.off2{
    position:relative;/*×*/
    width:100px;/*○*/
    height:18px;/*○*/
    overflow:hidden;/*×*/
    border-bottom:1px solid #993300;/*○*/
}
/*展開時 背景色は.sub a:hoverと同じにすると良い*/
.sub li.on2{
    width:100px;/*○*/
    height:18px;/*○*/
    overflow:hidden;/*×*/
    background-color:#FFFFFF;/*○*/
    border-bottom:1px solid #993300;/*○*/
}
.sub>li.on2{
overflow:visible;/*×*/
}
/****2段階目サブメニュー用スタイル****/
ul.sub-2{
    margin:0px;/*△*/
    padding:0px;/*△*/
    position:relative;/*×*/
    left:100px;/*○*/
    top:-20px;/*○*/
    width:120px;/*○*/
    border:1px solid #993300;/*○*/
    border-bottom:0px solid #993300;/*○*/
    list-style:none;/*△*/
}
.sub-2 a{
    padding:2px;/*○*/
    display:block;/*△*/
    width:116px;/*○*/
    height:18px;/*○*/
    background-color:#ccCCff;/*○*/
    border-bottom:1px solid #993300;/*○*/
}
.sub-2 a:hover{
    background-color:#ECFFFF;/*○*/
}

CSS解説

ここまで量が増えてしまうと、もう、何が何だかわからないですね。

プルダウン1をベースに、プルダウン2のスタイルシートをoff2,on2,sub-2と書き換えて加えた感じとでもいいましょうか。

各プロパティの横に入れたコメントは変更の可否を表しています。 ○は変更可、△は変更非推奨、×は変更不可を表しています。 改造する際の一つの目安にしてください。

あとはご自身でいろいろ弄って研究してみてください。ただし、下手に弄ると訳が分からなくなること必至なので、バックアップは取っておいた方がいいですよ。


使いこなすための+α

背景画像を使用したり、ロールオーバーリンクと組み合わせることで、可能性は無限に広がります。

javascriptは使用していないに等しいので、CSSが分かる人なら容易に改造できるのが特徴です。 が、改造するのはかなり相当CSSに熟練していないと困難を極めるでしょう。

このテクニックを自在に操れるなら、もううちのサイトに来る必要はないでしょう。っていうぐらい高度なテクニックです。

動作保障はIE6以上、Opera7以上、firefoxのみです。他はどうなってるか知りません。 使うときはそこんとこよろしくです。


一覧へ戻る


Last Modified 2005-08-06 © きくちゃん 2004 - All Rights Reserved