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

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

Posted at October 23,2006 1:17 AM
Tag:[CSS]

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

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

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

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

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

1.基本構造

1.1 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>

1.2 スタイルシート

下記の通りです。基本的な構造は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.ナビゲーションバーとサイドバーの折りたたみマークを合体

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

リスト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列に並んで表示されないため、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;
}

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

ナビゲーションバーとサイドバーの折りたたみ from Laspalabras De Amor
当初、ウチのブログ上では、サイドバーの折りたたみのマークとナビゲーションバーが一... [続きを読む]

Tracked on October 24, 2006 11:14 AM
コメント

エントリーして下さって有難うございました!早速取り入れました。

これからも参考にさせていただきます。勝手にリンクもさせて頂きました。有難うございました。

[1] Posted by shu : October 24, 2006 11:05 AM

追加です。
実はトラックバックを送ったのですが、送れませんでしたのでコメントさせていただきました。
何度もごめんなさい(汗)

[2] Posted by shu : October 24, 2006 11:19 AM

説明通りしましたけどまったく動作しません? サポート宜しくお願いします。

[3] Posted by panser : October 24, 2006 11:59 PM

>shuさん
こんばんは。
ご利用&ご連絡ありがとうございました。
うまくできたようでよかったです。

>panserさん
こんばんは。
サイトを拝見させて頂きましたが現在何も設定されていないようですので、設定された状態で再度コメント頂けますでしょうか。
それではよろしくお願い致します。

[4] Posted by yujiro : October 25, 2006 10:03 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)