Based on the csss creative stacked navigation menu UI design, csssui

Based on the csss creative stacked navigation menu UI design, csssui

This is a very creative stack navigation menu UI design. After you click the hamburger button in the upper right corner of the design result, the current interface will stack the navigation panel in 3D mode below the page, there are 3 panels in total, the last two panels are the last two tabs of the current navigation.

Download Online Preview source code

Method of use: HTML Structure

The HTML structure of the stack navigation menu UI is divided into two parts: onenav.pages-navIs the top grid list navigation,div.pages-stackIs the page panel.

<!-- 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

 

Download Online Preview source code