HTML5 原质化导航栏

Material navigation with CSS 点击菜单出现以菜单为圆点的波动效应，同时内容窗口渐显。

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1745
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #fff;
    background: #383c55;
    overflow: hidden;
}
.navigation {
    width: 100%;
}
.nav {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}
.nav-item {
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    padding: 15px 10px;
    text-align: center;
}
.nav-item:first-child {
    width: 40%;
}
.nav-item-bg {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f1682f;
}
.nav-item-bg:after {
    position: absolute;
    background-color: #f1682f;
    content: '';
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    -webkit-transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.nav-item a {
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    display: block;
}
.nav-item:hover .nav-item-bg:after {
    width: 100%;
    background-color: #de4c0f;
}
.hero {
    height: 450px;
    background: #385e97;
}
.overlay {
    border-radius: 50%;
    width: 0px;
    height: 0px;
    position: absolute;
    top: -100%;
    left: -50%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    border-radius: 50%;
    -webkit-transition: all 1200ms cubic-bezier(0, 0.995, 0.99, 1);
    transition: all 1200ms cubic-bezier(0, 0.995, 0.99, 1);
    -webkit-transition-delay: 350ms;
    transition-delay: 350ms;
}
.overlay.is-active {
    width: 200%;
    height: 300%;
    opacity: 1;
    -webkit-transition: all 600ms cubic-bezier(0, 0.995, 0.99, 1);
    transition: all 600ms cubic-bezier(0, 0.995, 0.99, 1);
}
.overlay.is-active .modal {
    width: 800px;
    height: 450px;
    opacity: 1;
    border-radius: 0;
    -webkit-transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition-delay: 600ms;
    transition-delay: 600ms;
}
.overlay.is-active .modal .modal-content-right {
    background: #fff;
    height: 100%;
}
.overlay.is-active .modal .modal-content-right li {
    color: #385e97;
    border-bottom: 1px solid #385e97;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all 250ms cubic-bezier(0, 0.995, 0.99, 1);
    transition: all 250ms cubic-bezier(0, 0.995, 0.99, 1);
}
.overlay.is-active .modal .modal-content-right li:first-of-type {
    border-bottom: 0;
}
.overlay.is-active .modal .modal-content-right li:nth-of-type(1) {
    -webkit-transition-delay: 2000ms;
    transition-delay: 2000ms;
}
.overlay.is-active .modal .modal-content-right li:nth-of-type(2) {
    -webkit-transition-delay: 2200ms;
    transition-delay: 2200ms;
}
.overlay.is-active .modal .modal-content-right li:nth-of-type(3) {
    -webkit-transition-delay: 2400ms;
    transition-delay: 2400ms;
}
.overlay.is-active .modal .modal-content-right li:nth-of-type(4) {
    -webkit-transition-delay: 2600ms;
    transition-delay: 2600ms;
}
.overlay.is-active .modal .modal-content-right li:nth-of-type(5) {
    -webkit-transition-delay: 2800ms;
    transition-delay: 2800ms;
}
.overlay.is-active .modal .modal-content li:nth-of-type(1) {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all 250ms cubic-bezier(0, 0.995, 0.99, 1);
    transition: all 250ms cubic-bezier(0, 0.995, 0.99, 1);
    -webkit-transition-delay: 1000ms;
    transition-delay: 1000ms;
    background: #fff;
}
.overlay.is-active .modal .modal-content li:nth-of-type(1) .content {
    color: #385e97;
}
.overlay.is-active .modal .modal-content li {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0.995, 0.99, 1);
    transition: transform 250ms cubic-bezier(0, 0.995, 0.99, 1);
}
.overlay.is-active .modal .modal-content li:nth-of-type(1) {
    -webkit-transition-delay: 1100ms;
    transition-delay: 1100ms;
}
.overlay.is-active .modal .modal-content li:nth-of-type(2) {
    -webkit-transition-delay: 1300ms;
    transition-delay: 1300ms;
}
.overlay.is-active .modal .modal-content li:nth-of-type(3) {
    -webkit-transition-delay: 1500ms;
    transition-delay: 1500ms;
}
.overlay.is-active .modal .modal-content li:nth-of-type(4) {
    -webkit-transition-delay: 1700ms;
    transition-delay: 1700ms;
}
.modal {
    position: absolute;
    width: 0;
    height: 0;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #31558a;
    color: #7f8c8d;
    opacity: 1;
    -webkit-transition: all 200ms cubic-bezier(0, 0.995, 0.99, 1);
    transition: all 200ms cubic-bezier(0, 0.995, 0.99, 1);
    overflow: hidden;
}
.modal .modal-content {
    margin: 0;
    padding: 0;
    width: 30%;
    float: left;
    height: 100%;
    overflow: hidden;
}
.modal .modal-content li {
    list-style: none;
    display: block;
    height: 25%;
    overflow: hidden;
    width: 100%;
    background: #385e97;
    border-bottom: 1px solid #214273;
    -webkit-transform: translate3d(-110%, 0, 0);
    transform: translate3d(-110%, 0, 0);
}
.modal .modal-content li:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.modal .modal-content-right {
    float: left;
    width: 70%;
    padding: 0;
    margin: 0;
    list-style: none;
}
.modal .modal-content-right li {
    display: block;
    padding: 10px 5px;
    color: #fff;
    font-size: 16px;
    margin: 10px 20px;
    border-bottom: 1px solid white;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    opacity: 0;
}
.modal .modal-content-right li.title {
    border-bottom: 0;
    color: #ededed;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 30px;
}
.modal h1 {
    margin: 0;
}
.modal .content {
    display: inline-block;
    vertical-align: middle;
    padding: 3px 15px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

HTML

<nav class="navigation">
    <ul class="nav">
        <li class="nav-item logo">
            <div class="nav-item-bg"></div><a href="#">Policy<b>Genius</b></a>
        </li>
        <li class="nav-item" data-hover="Insurance Types">
            <div class="nav-item-bg"></div><a href="#">Insurance Types</a>
        </li>
        <li class="nav-item" data-hover="Insurance Checkup">
            <div class="nav-item-bg"></div><a href="#">Insurance Checkup</a>
        </li>
        <li class="nav-item" data-hover="About">
            <div class="nav-item-bg"></div><a href="#">About</a>
        </li>
    </ul>
</nav>
<section class="hero"></section>
<div class="overlay">
    <div class="modal">
        <ul class="modal-content">
            <li>
                <div class="content">Life</div>
            </li>
            <li>
                <div class="content">Long-Term Disability</div>
            </li>
            <li>
                <div class="content">Pet</div>
            </li>
            <li>
                <div class="content">Renters</div>
            </li>
        </ul>
        <ul class="modal-content-right">
            <li class="title">Your one stop shop for life insurance</li>
            <li>Get a life insurance quote</li>
            <li>Get a life insurance quote</li>
            <li>Get a life insurance quote</li>
        </ul>
    </div>
</div>

Material navigation with CSS 点击菜单出现以菜单为圆点的波动效应，同时内容窗口渐显。

编辑器支持Emmet

快捷键

Material navigation with CSS 点击菜单出现以菜单为圆点的波动效应，同时内容窗口渐显。

HTML5一款很不错的响应式导航栏界面组件（Night Tabs）

HTML5 竖向导航菜单栏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：