2009/01/23(金)

固定幅でセンタリングされた要素の横にタブ風メニューをくっ付けるCSS このエントリをはてなブックマークに追加 

Filed under: CSS,WEB制作 — KAY @ 00:38:24

個人的にはリキッドデザインの方が好きなんですけどね。

ウィンドウをリサイズした時、ウィンドウではなく固定幅でセンタリングされたコンテンツに追随するようにメニューだのバナーだのをくっ付ける方法をば。

とりあえず以下の3点、

  • validなCSSである事
  • CSSハックを使わない
  • IE6にも対応させる

これを前提で。
↓サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タブメニューサンプル</title>
<style type="text/css">
    div#main_contents {
        width:600px;
        height:1000px;
        margin:0 auto;
        background-color:#ddd;
    }
    div#menu {
        height:0;
        position:relative;
    }
    div#menu ul {
        margin:0;
        padding:0;
        width:3em;
        position:absolute;
        left:-3em;
    }
    div#menu ul li {
        list-style-type:none;
        background-color:#ddf;
        margin:2px 0;
        padding:0;
    }
</style>
</head>
<body>
<div id="main_contents">
    <div id="menu">
        <ul>
            <li>いち</li>
            <li>にぃ</li>
            <li>さん</li>
            <li>よん</li>
        </ul>
    </div>
    ほにゃららら。
</div>
</body>
</html>

強調部分がポイント。応用利かせれば右側に引っ付ける事も出来ますね。IE6を無視すればもうちょい簡単に出来ますが……。

タブメニューサンプル

コメント(0)

コメントはまだありません。

トラックバック(0)

この記事へのトラックバックはありません。

この投稿へのコメントの RSS フィード。 TrackBack URL

コメントする