浙江 杭州

创意堆叠式导航菜单UI界面设计

系统分类: 网页特效 - jquery插件 - jQuery树形菜单 2016-07-13

人气7848

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款非常有创意的堆叠式导航菜单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>      
              
CSS样式

面板堆叠效果的CSS样式如下:

.js .pages-stack {
  z-index: 100;
  pointer-events: none;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% -50%;
  perspective-origin: 50% -50%;
}

.js .page {
  position: relative;
  z-index: 5;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  pointer-events: auto;
  background: #2a2b30;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
}

.js .pages-stack--open .page {
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.45s, opacity 0.45s;
  transition: transform 0.45s, opacity 0.45s;
  -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.js .page--inactive {
  position: absolute;
  z-index: 0;
  top: 0;
  opacity: 0;
}              
              

完整的CSS和javascript代码请参考下载文件。

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:170.85KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2149.html 非特殊说明,本文版权归原作者所有,转载请注明出处
创意堆叠式导航菜单UI界面设计

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)