小粋空間  -  a cheap joke and a play on words site

3カラムレイアウトをナビゲーションバー部分に適用する

タイトルバナー下にナビゲーションバーを設置している場合、その左右に別の部品を並べて配置したい時のテクニックです。

ここでは、以前紹介した「ナビゲーションバー・シンプルタイプ」に「サイドバーの折りたたみ」の折りたたみマークを合体させ、ナビゲーションバーの左右に折りたたみマークを配置するカスタマイズを紹介します。

下記にサンプルを用意しました。

ナビゲーションバーにサイドバーの折りたたみマークを並べて表示

以下、基本構造および公開テンプレートによるサンプルで説明します。仕組みはタイトルの通り、3カラムレイアウトのCSSをナビゲーションバー部分に適用しています。
ナビゲーションバーの他、横型カレンダーとの組み合わせも（多分）可能です。

１．基本構造

１．１ HTML

HTMLマークアップは次のようになります。ul - li 要素は div 要素でも問題ありません。下から2行目の br 要素（の class 属性）は回り込み解除のため必須です。

リスト1.1　基本的なHTML

<div id="navi">
<ul id="left"><li>[左に表示する部品]</li></ul>
<ul id="navbar"><li>[中央に表示する部品]</li></ul>
<ul id="right"><li>[右に表示する部品]</li></ul>
<br class="clear" />
</div>

１．２ スタイルシート

下記の通りです。基本的な構造は3カラム固定レイアウトと同じです。

リスト1.2　基本的なCSS

#navi {
    padding: [部品全体のパディング];
}
#navi ul {
    margin: 0;
    padding: 0;
    float:left;
}
#navi ul,
#navi ul li {
    display: inline;
}
#navbar {
    width: [中央に配置する部品の幅];
    text-align: center;
}
#left {
    width: [左に配置する部品の幅];
}
#right {
    width: [右に配置する部品の幅];
}
.clear {
    clear: both;
} 

２．ナビゲーションバーとサイドバーの折りたたみマークを合体

サイドバーの折りたたみ用タグ

リスト2.1　サイドバーの折りたたみ用タグ

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
</div>

と、ナビゲーションバーのタグ

リスト2.2　ナビゲーションバーのタグ

<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>

を合体すると下記のようになります。ナビゲーションバー部分は青で示しています。

リスト2.3　同時に表示させる場合のタグ

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
</div>

これだけでは横1列に並んで表示されないため、１項と同じ構造にするため、赤色部分を追加します。

リスト2.4　同時に表示させる場合のタグを修正

<div id="navi">
<ul id="left"><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">&#65308;</a></li></ul>
<ul id="navbar"><li>
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</li></ul>
<ul id="right"><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">&#65310;</a></li></ul>
<br class="clear" />
</div>

これに下記のCSSをスタイルシートに追加します。折りたたみマークは text-align プロパティで一旦両端に配置してから padding プロパティで位置を調整しています。

リスト2.5　同時に表示させる場合のCSS

#navi {
    border-bottom: 1px solid #666699;
    padding: 3px 0;
    font-size: 12px;
}
#navi ul {
    margin: 0;
    padding: 0;
    float:left;
}
#navi ul,
#navi ul li {
    display: inline;
}
#navbar {
    width: 600px;
    _width: 598px;
    text-align: center;
}
#left {
    width: 125px;
    text-align: left;
}
#left li {
    padding-left: 18px;
}
#right {
    width: 125px;
    text-align: right;
}
#right li {
    padding-right: 18px;
}

以上です。やっつけで作ったものですので誤りがありましたらお許しを。

• 
• Tweet