这是一款基于bootsnav的超酷3d导航菜单。该导航菜单已bootsnav插件为基础，通过css代码来构建鼠标悬停菜单项时的3d翻转动画效果。
使用方法
在HTML文件中引入。
<linkhref="css/bootsnav.css"rel="stylesheet">
<scriptsrc="//code.jquery.com/jquery.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
<scriptsrc="js/bootsnav.js"></script>
HTML结构
<divclass="collapsenavbar-collapse"id="navbar-menu">
<ulclass="navnavbar-nav"data-in="fadeInDown"data-out="fadeOutUp">
<liclass="active"><ahref="#"data-hover="Home">Home<spandata-hover="Home"></span></a></li>
<li><ahref="#"data-hover="About">About<spandata-hover="About"></span></a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown"data-hover="Shortcodes">Shortcodes<spandata-hover="Shortcodes"></span></a>
<ulclass="dropdown-menuanimated">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown">SubMenu</a>
<ulclass="dropdown-menuanimated">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown">SubMenu</a>
<ulclass="dropdown-menumulti-dropdownanimated">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown"data-hover="Pages">Pages<spandata-hover="Pages"></span></a>
<ulclass="dropdown-menuanimated">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown">SubMenu</a>
<ulclass="dropdown-menuanimated">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown">SubMenu</a>
<ulclass="dropdown-menumulti-dropdownanimated">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</li>
<li><ahref="#"data-hover="Portfolio">Portfolio<spandata-hover="Portfolio"></span></a></li>
<liclass="dropdownmegamenu-fw">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown"data-hover="Megamenu">Megamenu<spandata-hover="Megamenu"></span></a>
<ulclass="dropdown-menumegamenu-contentanimated"role="menu">
<li>
<divclass="row">
<divclass="col-menucol-md-3">
<h6class="title">TitleMenuOne</h6>
<divclass="content">
<ulclass="menu-col">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</div>
</div><!--endcol-3-->
<divclass="col-menucol-md-3">
<h6class="title">TitleMenuTwo</h6>
<divclass="content">
<ulclass="menu-col">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</div>
</div><!--endcol-3-->
<divclass="col-menucol-md-3">
<h6class="title">TitleMenuThree</h6>
<divclass="content">
<ulclass="menu-col">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</div>
</div>
<divclass="col-menucol-md-3">
<h6class="title">TitleMenuFour</h6>
<divclass="content">
<ulclass="menu-col">
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
<li><ahref="#">CustomMenu</a></li>
</ul>
</div>
</div><!--endcol-3-->
</div><!--endrow-->
</li>
</ul>
</li>
<li><ahref="#"data-hover="Contact">Contact<spandata-hover="Contact"></span></a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
CSS样式
nav.navbar.bootsnav{
font-family:'Roboto',sans-serif;
margin-bottom:150px;
border:none;
}
nav.navbar.bootsnav.navbar-collapse{padding:0;}
nav.navbar.bootsnavul.nav>li>a{
color:#fff;
background-color:#333;
font-size:16px;
font-weight:700;
text-transform:uppercase;
padding:10px15px10px;
margin:0;
border:none;
border-bottom:3pxsolid#e84393;
overflow:hidden;
position:relative;
z-index:1;
transition:all0.1sease-out;
}
nav.navbar.bootsnavul.nav>li.dropdown>a{padding:10px25px10px10px;}
nav.navbar.bootsnavul.nav>li.active>a,
nav.navbar.bootsnavul.nav>li.active>a:hover,
nav.navbar.bootsnavul.nav>li>a:hover,
nav.navbar.bootsnavul.nav>li.on>a{
color:#fff;
background-color:#e84393;
text-shadow:3px3px0rgba(0,0,0,0.3);
}
nav.navbar.bootsnavul.nav>li>a>span:before,
nav.navbar.bootsnavul.nav>li>a>span:after{
content:'';
background:rgba(0,0,0,0.2);
height:50%;
width:50%;
opacity:1;
position:absolute;
left:-50%;
top:-50%;
z-index:-1;
transition:all0.2sease;
}
nav.navbar.bootsnavul.nav>li>a>span:after{
left:100%;
top:100%;
}
nav.navbar.bootsnavul.nav>li.active>a>span:before,
nav.navbar.bootsnavul.nav>li.active>a:hover>span:before,
nav.navbar.bootsnavul.nav>li>a:hover>span:before,
nav.navbar.bootsnavul.nav>li.on>a>span:before{
left:0;
top:0;
}
nav.navbar.bootsnavul.nav>li.active>a>span:after,
nav.navbar.bootsnavul.nav>li.active>a:hover>span:after,
nav.navbar.bootsnavul.nav>li>a:hover>span:after,
nav.navbar.bootsnavul.nav>li.on>a>span:after{
left:50%;
top:50%;
}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-contentlia:hover,
nav.navbar.bootsnavli.dropdownul.dropdown-menulia:hover,
nav.navbar.bootsnavli.dropdownul.dropdown-menulia.dropdown-toggle:active,
nav.navbarul.navli.dropdown.onul.dropdown-menuli.dropdown.on>a{
text-shadow:005px#000;
}
nav.navbar.bootsnavul.nav>li.dropdown>a.dropdown-toggle:after{
color:#fff;
margin:0007px;
position:absolute;
top:9px;
right:7px;
transition:all0.3s;
}
nav.navbar.bootsnavul.nav>li.dropdown>ul{
background-color:#333;
opacity:0;
transform:perspective(600px)rotateX(-90deg);
transform-origin:topcenter;
transform-style:preserve-3d;
visibility:hidden;
transition:all0.3sease0s;
}
nav.navbar.bootsnavul.nav>li.dropdown.on>ul{
opacity:1!important;
visibility:visible!important;
transform:perspective(600px)rotateX(0);
}
.dropdown-menu.multi-dropdown{
position:absolute;
left:-100%!important;
}
nav.navbar.bootsnavli.dropdownul.dropdown-menu{
background-color:#333;
border:none;
top:101%;
z-index:1;
transition:all0.3sease;
}
nav.navbar.bootsnavli.dropdownul.dropdown-menu>li>a{
color:#fff;
font-weight:500;
border:none;
position:relative;
transition:all0.3s;
}
nav.navbar.bootsnavli.dropdownul.dropdown-menu>li>a:after,
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content.menu-collia:after{
content:'';
background-color:#e84393;
height:100%;
width:5px;
transform:scaleY(0);
position:absolute;
top:0;
left:0;
transition:all0.3sease;
}
nav.navbarul.navli.dropdown.onul.dropdown-menuli.dropdown.on>a:after,
nav.navbar.bootsnavli.dropdownul.dropdown-menu>li>a:hover:after,
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content.menu-collia:hover:after{
transform:scaleY(1);
}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content{
background-color:#333;
overflow:hidden;
top:86%;
}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-contentli{font-size:14px;}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content.menu-collia{
color:#fff;
padding-left:10px;
position:relative;
}
nav.navbar.bootsnavul.navli.megamenu-fw>a:hover,
nav.navbar.bootsnavul.navli.megamenu-fw>a:focus,
nav.navbar.bootsnavul.navli.megamenu-fw.on>a{background-color:#e84393!important;}
nav.navbar.bootsnavul.dropdown-menu.megamenu-content.col-menu{padding:015px;}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content.title{
color:#fff;
background-color:#e84393;
font-size:16px;
font-weight:bold;
padding:5px10px;
border-radius:5px05px5px;
}
@mediaonlyscreenand(max-width:990px){
.dropdown-menu.multi-dropdown{left:0!important;}
nav.navbar.bootsnav.navbar-toggle{
color:#fff;
background:#e84393!important;
padding:3px8px;
margin-top:2px;
border-radius:0;
}
nav.navbar.bootsnav.navbar-mobile.navbar-collapse{background-color:#333;}
nav.navbar.bootsnavul.nav>li{margin:0auto2px;}
nav.navbar.bootsnav.navbar-mobileul.nav>li>a{
text-align:center;
padding:10px15px;
margin:0;
border:none;
}
nav.navbar.bootsnavul.nav>li.dropdown>a{padding:10px10px10px28px;}
nav.navbar.bootsnavul.nav>li.dropdown>a.dropdown-toggle:before{color:#fff;}
nav.navbar.bootsnavul.nav>li.dropdown>ul{left:-5px;}
nav.navbar.bootsnavul.navli.dropdownul.dropdown-menu{
margin:00-1px0!important;
z-index:1;
}
nav.navbar.bootsnavul.navli.dropdownul.dropdown-menu>li>a{
color:#fff;
padding-left:10px;
border:none;
position:relative;
}
nav.navbar.bootsnavul.navli.dropdownul.dropdown-menu>li.dropdown:after{
content:'';
background-color:#e84393;
height:50px;
width:5px;
transform:scaleY(0);
position:absolute;
left:0;
top:0;
z-index:1;
transition:all0.3sease;
}
nav.navbar.bootsnavul.navli.dropdownul.dropdown-menu>li.dropdown:hover:after,
nav.navbar.bootsnavul.navli.dropdownul.dropdown-menu>li.dropdown.on:after{
transform:scaleY(1);
}
nav.navbar.bootsnav.dropdown-menu{z-index:0;}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content{top:0;}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content.title{
color:#fff;
font-size:14px;
font-weight:600;
border:none;
}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content.content{border:none;}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content.col-menu.on.title{font-weight:600;}
nav.navbar.bootsnavli.dropdownul.dropdown-menu.megamenu-content.col-menulia{
color:#fff;
background-color:#333;
border:none;
margin-bottom:0;
}
}
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery