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

前回の記事ナビゲーション(navigation)を横書きに変更するではナビゲーションをとりあえず横書きにする方法を紹介しました。

 

この方法だと、ナビゲーションの2階層目を表示する場合に、1階層目と同じ行に表示されてしまう問題があります。

 

ところが既存レイアウトでは、右の図のようにスライダーバーの位置に2階層目を表示しています。

 

これを実現するするにはどうすればよいのでしょうか?

 

今回はこのテーマで調査してみたいと思います。

(今回はあくまでも調査です!最後まで読んでも解決していないので、ガッカリしないでください!)

 

 

まず、ソースを見て構造を確認します。

 

前回ナビゲーションを横書きにしたページにアクセスして、ナビゲーションの2階層目を展開してください。

 

次に、ログインして編集可能な状態にして、その状態のままソースを表示します。

 

ブラウザは何でもかまいません。

 

ソースを表示したら、そこから"navigation”を探します。

 

すると、次のような箇所が見つかるはずです。(実際は改行されていません)

 

<div id="navigation">
  <div class="cc-nav-action-wrapper">
  <div data-action="button">
  <div id="navi_user_1,2,3">
  <ul id="mainNav1" class="mainNav1">
  <li id="cc-nav-view-264596015">
  <a href="/app/s9c1c2e1abce61710/pd52dfc521664f7a7/" class="level_1">
    <span>ホーム</span>
  </a>
  </li>
  <li id="cc-nav-view-264596115">
  <a href="/app/s9c1c2e1abce61710/pa23f72ced2a80e8a/" class="level_1">
    <span>About me</span>
  </av
  </li>
  <li id="cc-nav-view-264596215">
  <a href="/app/s9c1c2e1abce61710/p66f28b9614f5c9f9/" class="current level_1">
    <span>旅行</span>
  </a>
  </li>
  <li>
  <ul id="mainNav2" class="mainNav2">
  <li id="cc-nav-view-264596315">
  <a href="/app/s9c1c2e1abce61710/p7561b7a4762426ed/" class="level_2">
    <span>ベトナム ハノイ・ハロン湾</span>
  </a>
  </li>
  </ul>
  </li>
  <li id="cc-nav-view-264596515">
  <a href="/app/s9c1c2e1abce61710/p8fd4caddf3829e20/" class="level_1">
    <span>フォトギャラリー</span>
  </a>
  </li>
  <li id="cc-nav-view-264596615">


"navi_user_1,2,3"の部分が独自レイアウトHTMLの次の部分(”navigation[1|2|3]”)が置き換わったものであることは間違いなさそうです。

 

 

では、既存のレイアウトはどうなっているのでしょうか?

 

右図のレイアウト(左上角のレイアウト)に切り替えて先ほどと同じく2階層目を展開し、ログインして編集状態にしてからソースを表示します。

 

 すると・・・

 

<div id="nav_top">
    <div class="gutter">
        <div onmouseover="ccnavigation.hover();" onmouseout="ccnavigation.close(false);">
            <div id="navi_user_1">
                <ul id="mainNav1" class="mainNav1">
                    <li>
                        <a href="***" class="level_1"><span>ホーム</span></a>
                    </li>
                    <li>
                        <a href="***" class="level_1"><span>About me</span></a>
                    </li>
                    <li>
                        <a href="***" class="current level_1"><span>旅行</span></a>
                    </li>
                    <li>
~中略~
              <div id="sidebar">
                  <div class="gutter">
                      <div id="navi_user_2,3">
                          <ul id="mainNav2" class="mainNav2">
                              <li>
                                  <a href="***" class="level_2"><span>ベトナム ハノイ・ハロン湾</span></a>
                              </li>
                          </ul>

"navi_user_1"と"navi_user_2,3"が分かれています!

 

ということは、独自レイアウトの"navigation[1|2|3]"を"navigation[1]"と"navigation[2|3]"に分解して、それぞれ表示したいところに配置すればよさそうです。

 

やってみましょう。

 

独自レイアウトのHTMLを次のように編集して、保存・・・

 

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

ダメでした・・・。

独自レイアウトでは"navigation[1|2|3]"は必須であり、"navigation[1]"と"navigation[2|3]"のように分けることができないのです!

 

ちなみに"navigation[1|2|3]"を記述したうえで"navigation[2|3]"を記述しても、"navigation[2|3]"はただの文字列として扱われてしまいます。

 

ではどうすればよいか?

次の3通りが考えられます。

 

1)独自レイアウトでは横書きナビゲーションは1階層までしか使わないようにする

  実はデザイン的にもコスト的にも最も妥当かもしれません…。

 

2)2階層目は1階層目と同じ行に表示されるものであると妥協する

 

3)がんばる!

 

ここは当然3です。

 

おそらく独自レイアウトのHTMLとCSSだけでは実現できません。(実現する方法をご存知の方はぜひ教えて下さい)

JavaScriptの出番になるでしょう。

 

次回解決編で解決方法を紹介します。

 

では~

コメント: 0 (ディスカッションは終了しました。)
    まだコメントはありません。