当前位置：首页 > 网页特效 > 导航菜单

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

分类：导航菜单日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html

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


<div class="pages-stack">
  
  <div class="page" id="page-home">
    
  </div>
  
  <div class="page" id="page-docu">
    
  </div>
  <div class="page" id="page-manuals">
    
  </div>
  <div class="page" id="page-software">
    
  </div>
  <div class="page" id="page-custom">
    
  </div>
  <div class="page" id="page-training">
    
  </div>
  <div class="page" id="page-buy">
    
  </div>
  <div class="page" id="page-blog">
    
  </div>
  <div class="page" id="page-contact">
    
  </div>
</div>   
```   
#####  CSS样式
面板堆叠效果的CSS样式如下：

```html
.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;
}       
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果