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

概要

CSS3 animated dropdown menu　

2016年5月の時点で暗号化接続未対応なのでリンク削除

通常…実装していない…他サイトの…

デザイン系のチュートリアルにリンクは入れないのですが

あまりに出来の良いナビゲーションなので…ご紹介…ってか有名ですよね

しかも…2011.11.14…の記事です…

しかしながら…古いブラウザが激減して行くであろう…

今だからこそ…的な側面もあります…私が…近頃…

「CSS3」系の記事を頻繁に書いている事由でもあります…

上記サイトでは…「JavaScript」も用意されてはいますが…

Internet Explorer の下位バージョンのブラウザ判定用ですね…

私的には…「JavaScript」や下位バージョンへの配慮は不要

…と考えていますので…

そういった部分は省き……尚且つ…

このナビゲーションの致命的な欠点…

マウスホバーしてみなければ下位階層が存在するのか判別出来ない…という事を…

下位階層が存在する場合は三角形を付与する事で解決して行きます…

上記サイトでは…懇切丁寧な解説とデモや「JavaScript」がありますので…

触ってみて納得出来たなら…以下をお読みになる必要はありません…

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

基本的に…他サイトのチュートリアルですので…

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

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

「Table Navigation」のサンプル

三角形を付与するなど…改変して調整した「Table Navigation」のサンプルです…

• Menu 1
  
  • Menu 1 / Item 1
    
    • Menu 1 / Item 1-1
      
      • Menu 1 / Item 1-1-1
      • Menu 1 / Item 1-1-2
      • Menu 1 / Item 1-1-3
    • Menu 1 / Item 1-2
      
      • Menu 1 / Item 1-2-1
      • Menu 1 / Item 1-2-2
      • Menu 1 / Item 1-2-3
    • 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-1-3
    • 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-3
    • Menu 1 / Item 3-4
  • Menu 1 / Item 4
    
    • Menu 1 / Item 4-1
    • 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」の「CSS」

「Table Navigation」の「CSS」

.nav-table,.nav-table ul{margin:0;padding:0;list-style:none}
.nav-table{width:300px;height:23px;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}
.nav-table:before,.nav-table:after{content:"";display:table}
.nav-table:after{clear:both}
.nav-table{zoom:1}
.nav-table li{float:left;border-right:1px solid #555;position:relative}
.nav-table a{float:left;width:99px;padding:4px 0 5px;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 li:hover>a{color:#fafafa;font-weight:bold}
.nav-table ul{margin:20px 0 0 0;opacity:0;visibility:hidden;position:absolute;top:25px;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 li:hover>ul{opacity:1;visibility:visible;margin:0}
.nav-table ul ul{top: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 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 ul li:last-child{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}
.nav-table ul a{padding:10px;width:130px;display:block;white-space:nowrap;float:none;text-align:left;text-transform:none}
.nav-table 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 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 ul li:first-child>a:after{content:'';position:absolute;left:40px;top:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #444}
.nav-table ul ul li:first-child a:after{left:-6px;top:50%;margin-top:-6px;border-left:0;border-bottom:6px solid transparent;border-top:6px solid transparent;border-right:6px solid #3b3b3b}
.nav-table ul li:first-child a:hover:after{border-bottom-color:#04acec}
.nav-table ul ul li:first-child a:hover:after{border-right-color:#0299d3;border-bottom-color:transparent}
.nav-table 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 .triangle-rs > a:after{content:"";width:0;height:0;border-width:5px 3px;border-style:solid;border-color:#fff transparent transparent transparent;position:absolute;top:10px;right:8px}
.nav-table .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 li.triangle-re{height:36px}

下位階層が存在する場合に三角形を付与する記述は…

1階層目が…22行目の…

「.nav-table .triangle-rs > a:after{…}」

…で…2階層目以降が…23行目の…

「.nav-table .triangle-re > a:before{…}」

…ですが…23行目だけでは…

こんな感じになってしまうので…

24行目で修正しています…

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

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

<div style="width:480px;height:280px;margin:0 auto;padding:10px;background-color:#999">
<ul class="nav-table">
<li class="triangle-rs"><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>
      <li><a href="#">Menu 1 / Item 1-1-2</a></li>
      <li><a href="#">Menu 1 / Item 1-1-3</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>
      <li><a href="#">Menu 1 / Item 1-2-3</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>
      <li><a href="#">Menu 1 / Item 2-1-3</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><a href="#">Menu 1 / Item 3-2</a></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><a href="#">Menu 1 / Item 4-1</a></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-rs"><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><a href="#">Contact</a></li>
</ul>
</div>

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

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

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

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

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

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

…を…記述して下さい…

おわりに…

上記サイトでは…ブラウザ判定に…

「jQuery」の「$.browser.msie」を使っています…

なので…「不要」とまで書きましたが…まぁ…導入に際しては…

Internet Explorer 下位バージョンへの対応を切り捨てる

…という覚悟で臨んで下さいな…　(￣ー￣) 邪笑®

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

jQuery jQuery / Extra JavaScript Current-Label : Design