ulタグでメニューを作る３

今回はフィルターと組み合わせて、ハイレベルなメニュー作成に挑戦です！

テクニック使用後

企業サイトで見かけるイメージ画像の上に半透明のメニューというパターンを作ってみました。

やり方

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

<div class="sample">
<ul>
<li><A href="#">トップ</A></li>
<li><A href="#">インフォメーション</A></li>
<li><A href="#">BBS</A></li>
<li><A href="#">リンク集</A></li>
</ul>
</div>

ヘッダーになるであろうdiv.sampleとulタグで組んだメニューの組み合わせ。シンプルですね。

スタイルシートはこんな感じ。ちょっと長めです。

div.sample{
    background-image:url(../img/ulmenu-3b.jpg);
    width:480px;
    height:100px;
    position:relative;
}
.sample ul{
    position:absolute;
    bottom:0px;
    width:440px;
    height:20px;
    margin:0;
    padding-left:40px;
    font-size:13px;
    list-style:none;
    background-color:#ffffff;
    filter:alpha(opacity=60);
    opacity:0.6;
}
.sample li{
    height:20px;
    line-height:20px;
    float:left;
    width:100px;
    text-align:center;
    position:relative;
}

.sample a{
    text-decoration:none;
    display:block;
    color:#663300;
}

.sample a:hover{
    width:100%;
    height:100%;
    color:#331100;
    background-color:#cccccc;
}

順を追って解説しましょう。

まず、div.sampleにイメージ画像を指定し、幅と高さを「px単位」で指定します。%は使えません。 そしてposition:relative;を書き加えます。

今度はメニューとなるulのスタイルを指定します。最初にposition:absolute;とbottom:0px; を使ってdiv.sampleの下部に配置します。つづいて幅と高さを「px単位」で指定します。%でも可。
合わせてfont-sizeも「px単位」で指定します。

そして、フィルターの登場。filter:alpha(opacity=60);とopacity:0.6;を書き加えます。 opacity:0.6;というのはfirefoxとOpera用のフィルターです。これはCSS3.0で使用できるようになるプロパティでfirefoxに先行実装されているものです。普段見ることの少ないものなので、ここで覚えておくと良いかもしれません。

重要なのはここまで。あとはulタグでメニューの１，２と組み合わせてfloatやinlineを使ってメニューを横に並べ、リンクの見栄えを整えて完成です。

---

使いこなすための＋α

イメージ画像に手を加えた方が楽なんじゃない？と聞かれると返答に詰まりますねぇ。普段見かける似たようなメニューはそうやって作られているはずですし。

今回のテクニックの良いところは、あらゆるイメージ画像・メニューサイズに適用できる点です。 スタイルシート１つでメニューの大きさを変えることが出来るし、イメージ画像を差し替えるだけで半透明メニューを実現できます。

欠点といえばOpera8以下で使えないことですが、半透明にならないだけなので、支障はありません。

---