你的位置:首页 > 网页设计

[网页设计]基于csss创意堆叠式导航菜单UI界面设计


这是一款非常有创意的堆叠式导航菜单UI界面设计效果。该设计效果中用户点击右上角的汉堡包按钮之后,当前界面会以3D的方式将导航面板堆叠在页面的下方,共有3个面板,后两个面板是当前导航的后面两个导航。

在线预览    源码下载

使用方法

HTML结构

该堆叠式导航菜单UI界面的HTML结构分为两个部分:一个nav.pages-nav是顶部的网格列表导航,div.pages-stack是各个页面面板。

<!-- navigation --><nav > <div ><a href="#page-home">Home</a></div> <div ><a href="#page-docu">Documentation</a></div> <div ><a href="#page-manuals">Manuals</a></div> <div ><a href="#page-software">Software</a></div> <div ><a href="#page-custom">Customization & Settings</a></div> <div ><a href="#page-training">Training</a></div> <div ><a href="#page-buy">Where to buy</a></div> <div ><a href="#page-blog">Blog & News</a></div> <div ><a href="#page-contact">Contact</a></div> <div >  <a href="#"><i ></i><span >Twitter</span></a>  <a href="#"><i ></i><span >LinkedIn</span></a>  <a href="#"><i ></i><span >Facebook</span></a>  <a href="#"><i ></i><span >YouTube</span></a> </div></nav><!-- /navigation--><!-- pages stack --><div > <!-- page --> <div id="page-home">  <!-- page content --> </div> <!-- /page --> <div id="page-docu">  <!-- page content --> </div> <div id="page-manuals">  <!-- page content --> </div> <div id="page-software">  <!-- page content --> </div> <div id="page-custom">  <!-- page content --> </div> <div id="page-training">  <!-- page content --> </div> <div id="page-buy">  <!-- page content --> </div> <div id="page-blog">  <!-- page content --> </div> <div id="page-contact">  <!-- page content --> </div></div>          

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

 

在线预览    源码下载