横書きナビゲーションで2階層目を表示する(解決編)

前回の調査編では"navigation[1|2|3]"を分割して配置できず、既存レイアウトと同じような記述ができないところまでを確認しました。

 

しかし、実は"navigation[1|2|3]"は複数配置することができるのです。

 

これを利用して、簡単に2階層目のメニューを作成する方法を紹介します。

 

目標とするのは、既存レイアウトと同様にサイドバーの位置に2階層目のメニューを表示することです。

 

大まかな方針は次のようになります。

 

 

1)ヘッダーの下とサイドバーの両方にナビゲーションを配置する。

 

2)jQueryを使って表示の際にヘッダー下のナビゲーションから2階層目を削除する。

 

3)2と同様にサイドバーのナビゲーションから1階層目を削除する。

まず、レイアウトを決めます。

 

"content-wrap"の内側に"sidebar-wrap"を新設します。

 

"sidebar-wrap"の内側に"navigation-sub"を新設し、既存のsidebarを配置します。

 

修正後のHTMLは次のようになります。

 

"navigation"と”navigation-sub”の中身はともにnavigaion[1|2|3]です。

<div id="container">
    <div id="header">
        <h1>
            Headline
        </h1>
        <img src="header.jpg" alt="" />
    </div>

    <div id="navigation">
        <var>navigation[1|2|3]</var>
    </div>

    <div id="content-wrap">
        <div id="sidebar-wrap">
            <div id="navigation-sub">
                <var>navigation[1|2|3]</var>
            </div>

            <div id="sidebar">
                <var>sidebar</var>
            </div>
        </div>

        <div id="content">
            <var>content</var>
        </div>
    </div>

    <div id="footer">
        <div class="gutter">
            <var>footer</var>
        </div>
    </div>
</div>

次にCSSです。

 

"#sidebar-wrap"と"#navigation-sub"を追加します。

#navigation
{
    float:left;
    width:800;
    padding:0px;
    margin-left: 17px;      
}

#content-wrap{
    position: relative;
    clear: both;
    float: left;
    width: 800px;
    margin-left: 17px;       
}

#sidebar-wrap{
    clear: both;
    float: left;
    width: 180px;
    margin-left: 0px;       
    display: inline;
}

#navigation-sub
{
    float:left;
    width:180;
    padding:0px;
    padding-top:10px;
    margin-left:17px; 
}

#sidebar
{
    float:left;
    width:180px;
    padding:0px;
    padding-top:10px;
}

#content
{
    float:right;
    width:580px;
    padding:17px;
    margin-left: 0px;
}

最後にjQueryのコードを追加します。

(jQueryの導入については、imdoでjQueryを使う為の準備を参照してください。)

 

最初に説明した通り、ヘッダ下のナビゲーションから2階層目を削除して、サイドバーのナビゲーションから1階層目を削除します。

 

削除に使用するidやclassの選択要素は、プレビュー状態かログオフした状態でページのソースを表示して確認します。

 

色々なやり方がありますが、今回は次のコードのように選択しました。


最終的な結果は右の画のようになります。

 

2階層目の項目を持たない場合は、2階層目の表示位置の部分は完全に無くなり、Jimdo広告が上にずれます。

 

いかがでしょうか?

若干表示が遅いような気がしますが、見た目は既存のレイアウトとほぼ同じものを再現できていると思います。

 

 

さて、次のテーマはどうしましょうか…。

前回今回とちょっと重かったので、次回は軽めにいきたいと思います。

 

では~

コメント: 3 (ディスカッションは終了しました。)
  • #1

    aki☆ (土曜日, 25 9月 2010 11:31)

    おなじかんじで、JQを利用して、
    #mainNavi2を指定idのなかに展開するっていうやりかたもかんたんですよ~
    removeをつかわないので処理が1行ですみます!
    (function($){
    $(function(){
    $('ul.mainNav2').appendTo('#sub_nav').show();
    });

    idが重複するのでナンセンスですが、footerにもnaviを追加した場合、
    サブナビが2箇所にでてしまうので、
    $('#main_nav ul.mainNav2').appendTo('#sub_nav').show();
    こんなかんじにして、
    footerの#mainNav2 をhiddenにしておくと、表示ができます。

    サンプル↓(勉強会発表のためのサンプル。つくりかけです。。。)
    http://www.jiraffelab.jimdo.com/

  • #2

    liyuan (日曜日, 26 9月 2010 15:47)

    コメントありがとうございます。
    なるほど。その通りですね。

    私のやり方は、まず2個配置できるのか?という試行錯誤から始まって、
    あ、置けた!じゃあ片方は余計な部分を消そうってところまでで止まっていますから。

    今後もご指摘ありましたら、よろしくお願いいたします。

  • #3

    Jesse (日曜日, 22 7月 2012 20:27)

    I was looking for something similar, I am very grateful you have shared this subject