【CSS3】「JavaScript」不要で「display:table;」「ease-in-out」で構築する多階層ナビゲーション【ボトム設置編】

概要

前記事で紹介した多階層ナビゲーションを…

 「JavaScript」不要で「display:table;」「ease-in-out」で構築する多階層ナビゲーション


メインのナビゲーションとして使うのは少数派かと思われます…

しかしながら…ニッチな需要はありそうなので…

Blogger でボトムに固定して設置してみましょう…

様々な変更をしていますが…前記事と同様の理由で…

掘り下げた解説はしませんのでご了承を…

仮に…「Table Navigation Bottom」という名称で解説を進めていきます…

「Table Navigation Bottom」の動作サンプル

Lorem ipsum dolor sit amet, vivendum urbanitas mediocritatem eum te. Debitis similique ex pro, tale repudiare adversarium eu sed, eum an verear persius postulant. Vix clita conclusionemque ea. Vix ex eligendi suscipiantur, eu usu insolens invenire voluptaria.

Feugait minimum salutatus cu duo, ne has verterem definiebas, antiopam incorrupte sea ne. No etiam audire probatus nam, eu eius sensibus ius. Electram efficiendi no mel. Eos justo mnesarchum concludaturque at, ne dico audire appetere qui.

Te accusata posidonium mea, ei qui populo ponderum sententiae, justo iisque ornatus ex eum. Ne quidam mediocrem qui. Ut elit impetus pertinax sit. In qui veri salutatus.

• Menu 1
  
  • Menu 1 / Item 1
    
    • Menu 1 / Item 1-1
      
      • Menu 1 / Item 1-1-1
    • Menu 1 / Item 1-2
      
      • Menu 1 / Item 1-2-1
      • Menu 1 / Item 1-2-2
    • Menu 1 / Item 1-3
    • Menu 1 / Item 1-4
  • Menu 1 / Item 2
    
    • Menu 1 / Item 2-1
      
      • Menu 1 / Item 2-1-1
      • Menu 1 / Item 2-1-2
    • Menu 1 / Item 2-2
      
      • Menu 1 / Item 2-2-1
      • Menu 1 / Item 2-2-2
      • Menu 1 / Item 2-2-3
    • Menu 1 / Item 2-3
    • Menu 1 / Item 2-4
      
      • Menu 1 / Item 2-4-1
      • Menu 1 / Item 2-4-2
      • Menu 1 / Item 2-4-3
  • Menu 1 / Item 3
    
    • Menu 1 / Item 3-1
    • Menu 1 / Item 3-2
      
      • Menu 1 / Item 3-2-1
      • Menu 1 / Item 3-2-2
      • Menu 1 / Item 3-2-3
    • Menu 1 / Item 3-3
    • Menu 1 / Item 3-4
  • Menu 1 / Item 4
    
    • Menu 1 / Item 4-1
      
      • Menu 1 / Item 4-1-1
      • Menu 1 / Item 4-1-2
      • Menu 1 / Item 4-1-3
    • Menu 1 / Item 4-2
    • Menu 1 / Item 4-3
    • Menu 1 / Item 4-4
• Menu 2
  
  • Menu 2 / Item 1
    
    • Menu 2 / Item 1-1
    • Menu 2 / Item 1-2
    • Menu 2 / Item 1-3
  • Menu 2 / Item 2
    
    • Menu 2 / Item 2-1
    • Menu 2 / Item 2-2
    • Menu 2 / Item 2-3
  • Menu 2 / Item 3
    
    • Menu 2 / Item 3-1
    • Menu 2 / Item 3-2
    • Menu 2 / Item 3-3
• Contact

「Table Navigation Bottom」の設置領域の設定

「テンプレート」「HTMLの編集」から「CSS」を記述します…

#outer-bottom{width:1100px;position:fixed;bottom:0;margin:0 auto;z-index:10}

ご自身のサイトに合わせて適宜変更して下さい…

最下部に固定する領域ですから「</body>」直前に以下を記述して…

<b:section class='outer-bottom' id='outer-bottom' showaddelement='yes'/>

「テンプレートを保存」すれば…設置領域の設定は完了です…

「レイアウト」からガジェットを追加出来るようになります…

「Table Navigation Bottom」の「CSS」

「テンプレート」「HTMLの編集」から以下を記述して「保存」します…

「Table Navigation Bottom」の「CSS」

.nav-table-b,.nav-table-b ul{margin:0;padding:0;list-style:none}
.nav-table-b{width:240px;margin:0;border-top:1px solid #555;border-bottom:1px solid #555;border-left:1px solid #555;background-color:#111;background-image:-moz-linear-gradient(#444,#111);background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#111));background-image:-webkit-linear-gradient(#444,#111);background-image:-o-linear-gradient(#444,#111);background-image:-ms-linear-gradient(#444,#111);background-image:linear-gradient(#444,#111);-moz-box-shadow:1px 1px 3px #666;-webkit-box-shadow:1px 1px 3px #666;box-shadow:1px 1px 3px #666;position:relative}
.nav-table-b:before,.nav-table-b:after{content:"";display:table}
.nav-table-b:after{clear:both}
.nav-table-b{zoom:1}
.nav-table-b li{float:left;border-right:1px solid #555;position:relative}
.nav-table-b li a{float:left;width:119px;margin:0;padding:5px 0;color:#999;text-align:center;text-transform:none;font-style:italic;font-size:12px;text-decoration:none;text-shadow:0 1px 0 #000}
.nav-table-b li:hover>a{color:#fafafa;font-weight:bold}
.nav-table-b ul{opacity:0;visibility:hidden;position:absolute;bottom:26px;left:0;z-index:1;background:#444;background:-moz-linear-gradient(#444,#111);background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#111));background:-webkit-linear-gradient(#444,#111);background:-o-linear-gradient(#444,#111);background:-ms-linear-gradient(#444,#111);background:linear-gradient(#444,#111);-moz-box-shadow:0 -1px rgba(255,255,255,.3);-webkit-box-shadow:0 -1px 0 rgba(255,255,255,.3);box-shadow:0 -1px 0 rgba(255,255,255,.3);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.nav-table-b li:hover>ul{opacity:1;visibility:visible;margin:0}
.nav-table-b ul ul{bottom:0;left:150px;margin:0 0 0 20px;-moz-box-shadow:-1px 0 0 rgba(255,255,255,.3);-webkit-box-shadow:-1px 0 0 rgba(255,255,255,.3);box-shadow:-1px 0 0 rgba(255,255,255,.3)}
.nav-table-b ul li{float:none;display:block;border:0;-moz-box-shadow:0 1px 0 #111,0 2px 0 #666;-webkit-box-shadow:0 1px 0 #111,0 2px 0 #666;box-shadow:0 1px 0 #111,0 2px 0 #666}
.nav-table-b ul li:last-child{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}
.nav-table-b ul a{margin-bottom:-36px;padding:10px;width:130px;display:block;white-space:nowrap;float:none;text-align:left;text-transform:none}
.nav-table-b ul a:hover{background-color:#0186ba;background-image:-moz-linear-gradient(#04acec,#0186ba);background-image:-webkit-gradient(linear,left top,left bottom,from(#04acec),to(#0186ba));background-image:-webkit-linear-gradient(#04acec,#0186ba);background-image:-o-linear-gradient(#04acec,#0186ba);background-image:-ms-linear-gradient(#04acec,#0186ba);background-image:linear-gradient(#04acec,#0186ba)}
.nav-table-b ul li:first-child>a{-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}
.nav-table-b ul li:last-child>a:after{content:'';position:absolute;left:40px;bottom:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #111}
.nav-table-b ul ul li:last-child a:after{left:-6px;bottom:50%;margin-bottom:-6px;border-left:0;border-bottom:6px solid transparent;border-top:6px solid transparent;border-right:6px solid #111}
.nav-table-b ul li:last-child a:hover:after{border-top-color:#0186ba}
.nav-table-b ul ul li:last-child a:hover:after{border-right-color:#0299d3;border-top-color:transparent}
.nav-table-b ul li:last-child>a{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
.nav-table-b .triangle-rn > a:after{content:"";width:0;height:0;border-width:5px 3px;border-style:solid;border-color:transparent transparent #fff transparent;position:absolute;top:5px;right:8px}
.nav-table-b li.triangle-re > a:before{content:"";width:0;height:0;border-width:3px 5px;border-style:solid;border-color:transparent transparent transparent #fff;position:absolute;top:15px;right:2px}
.nav-table-b li,.nav-table-b li.triangle-re{height:36px}
.nav-table-b li.triangle-no,.nav-table-b li.triangle-rn{height:25px}

1階層目の「li」は…幅「120px」高さ「25px」…で…

下位階層がある場合は…北向き三角形を付与しています…

2階層目以降の「li」は…幅「150px」高さ「36px」…で…

下位階層がある場合は…東向き三角形を付与しています…

「Table Navigation Bottom」の「HTML」マークアップ

「レイアウト」から「HTML/JavaScript」を追加して内容をこのように記述します…

「Table Navigation Bottom」の「HTML」マークアップ

<div style="margin:0 auto">
<ul class="nav-table-b">
<li class="triangle-rn"><a href="#">Menu 1</a>
  <ul>
  <li class="triangle-re"><a href="#">Menu 1 / Item 1</a>
    <ul>
    <li class="triangle-re"><a href="#">Menu 1 / Item 1-1</a>
      <ul>
      <li><a href="#">Menu 1 / Item 1-1-1</a></li>
      </ul>
    </li>
    <li class="triangle-re"><a href="#">Menu 1 / Item 1-2</a>
      <ul>
      <li><a href="#">Menu 1 / Item 1-2-1</a></li>
      <li><a href="#">Menu 1 / Item 1-2-2</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 1 / Item 1-3</a></li>
    <li><a href="#">Menu 1 / Item 1-4</a></li>
    </ul>
  </li>
  <li class="triangle-re"><a href="#">Menu 1 / Item 2</a>
    <ul>
    <li class="triangle-re"><a href="#">Menu 1 / Item 2-1</a>
      <ul>
      <li><a href="#">Menu 1 / Item 2-1-1</a></li>
      <li><a href="#">Menu 1 / Item 2-1-2</a></li>
      </ul>
    </li>
    <li class="triangle-re"><a href="#">Menu 1 / Item 2-2</a>
      <ul>
      <li><a href="#">Menu 1 / Item 2-2-1</a></li>
      <li><a href="#">Menu 1 / Item 2-2-2</a></li>
      <li><a href="#">Menu 1 / Item 2-2-3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 1 / Item 2-3</a></li>
    <li class="triangle-re"><a href="#">Menu 1 / Item 2-4</a>
      <ul>
      <li><a href="#">Menu 1 / Item 2-4-1</a></li>
      <li><a href="#">Menu 1 / Item 2-4-2</a></li>
      <li><a href="#">Menu 1 / Item 2-4-3</a></li>
      </ul>
    </li>
    </ul>
  </li>
  <li class="triangle-re"><a href="#">Menu 1 / Item 3</a>
    <ul>
    <li><a href="#">Menu 1 / Item 3-1</a></li>
    <li class="triangle-re"><a href="#">Menu 1 / Item 3-2</a>
      <ul>
      <li><a href="#">Menu 1 / Item 3-2-1</a></li>
      <li><a href="#">Menu 1 / Item 3-2-2</a></li>
      <li><a href="#">Menu 1 / Item 3-2-3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 1 / Item 3-3</a></li>
    <li><a href="#">Menu 1 / Item 3-4</a></li>
    </ul>
  </li>
  <li class="triangle-re"><a href="#">Menu 1 / Item 4</a>
    <ul>
    <li class="triangle-re"><a href="#">Menu 1 / Item 4-1</a>
      <ul>
      <li><a href="#">Menu 1 / Item 4-1-1</a></li>
      <li><a href="#">Menu 1 / Item 4-1-2</a></li>
      <li><a href="#">Menu 1 / Item 4-1-3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 1 / Item 4-2</a></li>
    <li><a href="#">Menu 1 / Item 4-3</a></li>
    <li><a href="#">Menu 1 / Item 4-4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li class="triangle-rn"><a href="#">Menu 2</a>
  <ul>
  <li class="triangle-re"><a href="#">Menu 2 / Item 1</a>
    <ul>
    <li><a href="#">Menu 2 / Item 1-1</a></li>
    <li><a href="#">Menu 2 / Item 1-2</a></li>
    <li><a href="#">Menu 2 / Item 1-3</a></li>
    </ul>
  </li>
  <li class="triangle-re"><a href="#">Menu 2 / Item 2</a>
    <ul>
    <li><a href="#">Menu 2 / Item 2-1</a></li>
    <li><a href="#">Menu 2 / Item 2-2</a></li>
    <li><a href="#">Menu 2 / Item 2-3</a></li>
    </ul>
  </li>
  <li class="triangle-re"><a href="#">Menu 2 / Item 3</a>
    <ul>
    <li><a href="#">Menu 2 / Item 3-1</a></li>
    <li><a href="#">Menu 2 / Item 3-2</a></li>
    <li><a href="#">Menu 2 / Item 3-3</a></li>
    </ul>
  </li>
  </ul>
</li>
<li class="triangle-no"><a href="#">Contact</a></li>
</ul>
</div>

ナビゲーション全体の「ul」に…

「Table Navigation Bottom」のクラス名「class="nav-table-b"」

下位階層がある…1階層目の「li」に…

北向き三角形のクラス名「class="triangle-rn"」

下位階層が無い…1階層目の「li」に…

三角形無しのクラス名「class="triangle-no"」

下位階層がある…2階層目以降の「li」に…

東向き三角形のクラス名「class="triangle-re"」

…を…記述して下さい…ご自身の「HTML」と差し替えて「保存」します…

ガジェットの設定

「タイトル」と「クイック編集アイコン」は不要で…尚且つ…

デザインにも影響しますので…このように書き換えて「保存」します…

ガジェットの設定

<b:widget id='HTML13' locked='false' title='Table Navigation Bottom' type='HTML'>
  <b:includable id='main'>
    <div class='widget-content'>
      <data:content/>
    </div>
  </b:includable>
</b:widget>

おわりに…

当サイトのナビゲーションは…

スクロールするとトップに固定されますので実装していませんが…

 縦スクロール発生時にヘッダーのナビゲーションをページ上部にスルスルと移動して固定する


通常の…スクロールで消えて行くナビゲーションを使用している方は…

ボトムに固定するナビゲーションの併設も一考してみては如何でしょう

以上です…最後までお読みいただきましてありがとうございます…

jQuery jQuery / Extra JavaScript Current-Label : Design