布局框架
创意堆叠式导航菜单UI界面设计
PetitQ
这是一款非常有创意的堆叠式导航菜单 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 代码请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
