>웹 프론트엔드 >HTML 튜토리얼 >基于csss创意堆叠式导航菜单UI界面设计_html/css_WEB-ITnose

基于csss创意堆叠式导航菜单UI界面设计_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:32:161404검색

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

在线预览    源码下载

使用方法

HTML结构

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

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

 

在线预览    源码下载

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.