csss_html/css_WEB-ITnose に基づくクリエイティブなスタック ナビゲーション メニュー UI インターフェイスのデザイン

これは、非常にクリエイティブな積み上げナビゲーション メニュー UI インターフェイスのデザイン効果です。このデザイン効果では、ユーザーが右上隅のハンバーガー ボタンをクリックすると、現在のインターフェイスはページの下部にナビゲーション パネルを 3D 形式で積み重ねます。パネルは合計 3 つあり、最後の 2 つのパネルは次のとおりです。現在のナビゲーションの後ろにある 2 つのナビゲーション。

オンライン プレビュー ソース コードのダウンロード

使用法

HTML 構造

スタック ナビゲーション メニュー UI インターフェイスの HTML 構造は 2 つの部分に分かれています: nav.pages-nav は上部のグリッド リスト ナビゲーション、div.pages - スタックは各ページのパネルです。

<!-- navigation --><nav class="pages-nav">  <div class="pages-nav__item"><a class="link link--page" href="#page-home">Home</a></div>  <div class="pages-nav__item"><a class="link link--page" href="#page-docu">Documentation</a></div>  <div class="pages-nav__item"><a class="link link--page" href="#page-manuals">Manuals</a></div>  <div class="pages-nav__item"><a class="link link--page" href="#page-software">Software</a></div>  <div class="pages-nav__item"><a class="link link--page" href="#page-custom">Customization & Settings</a></div>  <div class="pages-nav__item"><a class="link link--page" href="#page-training">Training</a></div>  <div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-buy">Where to buy</a></div>  <div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-blog">Blog & News</a></div>  <div class="pages-nav__item pages-nav__item--small"><a class="link link--page link--faded" href="#page-contact">Contact</a></div>  <div class="pages-nav__item pages-nav__item--social">    <a class="link link--social link--faded" href="#"><i class="fa fa-twitter"></i><span class="text-hidden">Twitter</span></a>    <a class="link link--social link--faded" href="#"><i class="fa fa-linkedin"></i><span class="text-hidden">LinkedIn</span></a>    <a class="link link--social link--faded" href="#"><i class="fa fa-facebook"></i><span class="text-hidden">Facebook</span></a>    <a class="link link--social link--faded" href="#"><i class="fa fa-youtube-play"></i><span class="text-hidden">YouTube</span></a>  </div></nav><!-- /navigation--><!-- pages stack --><div class="pages-stack">  <!-- page -->  <div class="page" id="page-home">    <!-- page content -->  </div>  <!-- /page -->  <div class="page" id="page-docu">    <!-- page content -->  </div>  <div class="page" id="page-manuals">    <!-- page content -->  </div>  <div class="page" id="page-software">    <!-- page content -->  </div>  <div class="page" id="page-custom">    <!-- page content -->  </div>  <div class="page" id="page-training">    <!-- page content -->  </div>  <div class="page" id="page-buy">    <!-- page content -->  </div>  <div class="page" id="page-blog">    <!-- page content -->  </div>  <div class="page" id="page-contact">    <!-- page content -->  </div></div>                    

via: http://www.w2bc.com/article/2015-10-25-jquery-animate-ui

オンライン プレビュー ソース コードのダウンロード