bootsnav的简洁多级导航菜单。bootsnav是以bootstrap为基础的导航菜单插件。被多级导航菜单效果是在bootsnav的基础上，对菜单样式进行了一些美化加工。使用方法在页面中引入bootstrap相关文件，jquery和bootsnav相关文件。 HTML结构该多级导航菜单的基本HTML结构如下：
CSS样式使用下面的CSS代码来对多级导航菜单进行美化。.navbar-brand{ padding: 29px 15px; height: auto;}nav.navbar.bootsnav{ border: none; margin-bottom: 150px;}.navbar-nav{ float: left;}nav.navbar.bootsnav ul.nav > li > a{ color: #474747; text-transform: uppercase; padding: 30px;}nav.navbar.bootsnav ul.nav > li:hover{ background: #f4f4f4;}.nav > li:after{ content: ""; width: 0; height: 5px; background: #34c9dd; position: absolute; bottom: 0; left: 0; transition: all 0.5s ease 0s;}.nav > li:hover:after{ width: 100%;}nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{ content: "+"; font-family: 'FontAwesome'; font-size: 16px; font-weight: 500; position: absolute; top: 35%; right: 10%; transition: all 0.4s ease 0s;}nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: "\f105"; transform: rotate(90deg);}.dropdown-menu.multi-dropdown{ position: absolute; left: -100% !important;}nav.navbar.bootsnav li.dropdown ul.dropdown-menu{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border: none;}@media only screen and (max-width:990px){ nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after, nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; } .dropdown-menu.multi-dropdown{ left: 0 !important; } nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; } nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }} ![bootstrap实现简洁多级导航菜单]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······