Bootstrap自适应多级导航菜单效果代码
代码语言：html
所属分类：菜单导航
代码描述：Bootstrap自适应多级导航菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
.w3_megamenu .dropdown a,
.w3_megamenu .dropdown-menu a {
color: #656565;
}
.w3_megamenu .dropdown-menu > li > a {
padding: 6px 15px;
}
.w3_megamenu .navbar-nav > li > .dropdown-menu {
margin-top: 1px;
}
.w3_megamenu i {
color: #BFBFBF
}
.w3_megamenu .dropdown-menu {
box-shadow: none;
border: 1px solid #efefef;
padding: 0;
}
.w3_megamenu .form-control {
margin-top: 10px;
border: 1px solid #efefef;
}
.w3_megamenu .btn {
margin: 10px 0 20px
}
.w3_megamenu video {
max-width: 100%;
height: auto;
}
.w3_megamenu iframe,
.w3_megamenu embed,
.w3_megamenu object {
max-width: 100%;
}
.w3_megamenu .google-map {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.5);
min-height: 200px;
}
.w3_megamenu div.google-map {
background: rgba(255, 255, 255, 0.5);
background: #ffffff;
height: 200px;
margin: 0 0 0px 0;
width: 100%;
}
#googlemaps img {
max-width: none;
}
.w3_megamenu .dropdown-menu .withoutdesc {
margin-top: 0;
padding: 15px 20px;
display: block;
text-align: left;
text-transform: none;
width: 100%;
}
.w3_megamenu a:hover {
text-decoration: none
}
.w3_megamenu .dropdown-menu .withoutdesc ul li {
padding: 3px 10px;
}
.w3_megamenu .dropdown-menu .withoutdesc ul li:hover,
.w3_megamenu .dropdown-menu .withoutdesc ul li:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5 !important
}
.w3_megamenu .dropdown-menu .withoutdesc li:last-child {
border-bottom: 0 solid #fff;
}
.w3_megamenu .w3_megamenu-content.withdesc a:after {
color: #CFCFCF;
content: attr(data-description);
display: block;
font-size: 11px;
font-weight: 400;
line-height: 0;
margin: 10px 0 15px;
text-transform: uppercase;
}
.w3_megamenu .dropdown-submenu {
position: relative;
}
.w3_megamenu .dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.w3_megamenu .dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.w3_megamenu .dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.w3_megamenu .dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
.w3_megamenu .dropdown-submenu.pull-left {
float: none;
}
.w3_megamenu .dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.w3_megamenu p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
color: #656565;
}
.w3_megamenu .nav,
.w3_megamenu .collapse,
.w3_megamenu .dropup,
.w3_megamenu .dropdown {
position: static;
}
.w3_megamenu .half {
width: 50%;
left: auto !important;
right: auto !important;
}
.w3_megamenu .container {
position: relative;
}
.w3_megamenu .dropdown-menu {
left: auto;
}
.w3_megamenu .nav.navbar-right .dropdown-menu {
left: auto;
right: 0;
}
.w3_megamenu .w3_megamenu-content {
padding: 15px 25px;
background: #fafafa;
}
.w3_megamenu .dropdown.w3_megamenu-fw .dropdown-menu {
left: 0;
right: 0;
}
.w3_megamenu .title {
font-size: 13px;
font-weight: bold;
margin-top: 15px;
text-transform: uppercase;
border-bottom: 1px solid #efefef;
padding-bottom: 10px;
}
.w3_megamenu ul {
list-style: none;
padding-left: 0px;
}
body {
font-family: 'Open Sans', 'sans-serif';
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
</style>
</head>
<body translate="no">
<nav class="navbar navbar-default w3_megamenu" role="navigation">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#defaultmenu" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand"><i class="fa fa-home"></i></a>
</div>
<!-- end navbar-header -->
<div id="defaultmenu" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:;">Home</a></li>
<!-- Mega Menu -->
<li class="dropdown w3_megamenu-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">W3lessons<b class="caret"></b></a>
<ul class="dropdown-menu fullwidth">
<li class="w3_megamenu-content">
<div class="row">
<div class="col-sm-4">
<h3 class="title">Facebook Wall Script</h3>
<img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_225,/quality,q_90" class="img-responsive" alt="product 3" />
</div>
<!-- end col-4 -->
<div class="col-sm-4">
<h3 class="title">HTML5 Tutorials</h3>
<ul class="media-list">
<li class="media"><a href="" class="pull-right"><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_225,/quality,q_90" alt="" width="70" class="img-thumbnail media-object"></a>
<div class="media-body">
<p>
HTML5 Inline Edit with PHP, MYSQL & jQuery Ajax
</p>
</div>
</li>
<li class="media"><a href="" class="pull-right"><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_225,/quality,q_90" alt="" width="70" class="img-thumbnail media-object"></a>
<div class="media-body">
<p>
Advanced HTML5 Tutorials - Working Offline, Geolocation, Client Side Data Storage
</p>
</div>
</li>
</ul>
</div>
<!-- end col-4 -->
<div class="col-sm-4">
<h3 class="title">Add Google Map</h3>
<img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_225,/quality,q_90">
</div>
<!-- end col-4 -->
</div>
<!-- end row -->
<hr>
<div class="row">
<div class="col-sm-6">
<h3 class="title">About W3lessons.info</h3>
<p>
W3lessons.info is a web2.0 programming blog maintained by Karthikeyan. Tutorials focused on Programming, Jquery, Ajax, CSS3, HTML5, PHP, Web Services etc
</p>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown w3_megamenu-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Mega DropDown<b class="caret"></b></a>
<ul class="dropdown-menu fullwidth">
<li class="w3_megamenu-content withdesc">
<div class="row">
<div class="col-sm-3">
<h3 class="title">CSS3</h3>
<ul>
<li><a data-description="Image Animation" href="">Animate Images on Page Scroll using jQuery & CSS3</a></li>
<li><a data-description="Tooltips" href="">Fancy Tooltips using CSS3</a></li>
<li><a data-description="Image Animation" href="">Image Hover Effects using CSS3</a></li>
<li><a data-description="Metro Style Boxes" href="">Animated Windows Metro Boxes using CSS3</a></li>
<li><a data-description="Css3 Skill bar" href="http://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/">Skill Bar with jQuery & CSS3</a></li>
</ul>
</div>
<div class="col-sm-3">
<h3 class="title">jQuery</h3>
<ul>
<li><a data-description="DropDown Menu" href="">Mashable Style Ajax Drop Down Menu using PHP, Mysql & jQuery</a></li>
<li><a data-description="Facebook Friends Search" href="">Facebook Style Search Friends using jQuery</a></li>
<li><a data-description="Text Search" href="">Live Text Search using jQuery</a></li>
<li><a data-description="Security" href="">Protect / Secure your Website Content using jQuery</a></li>
<li><a data-description="Page Speed" href="/">How to reduce web page loading time with jQuery</a></li>
</ul>
</div>
<div class="col-sm-3">
<h3 class="title">PHP</h3>
<ul>
<li><a data-description="Checking Expired Sessions" href="">How to Check Expired Sessions using PHP & jQuery Ajax</a></li>
<li><a data-description="Smiley Parser" href="/">Smiley Parser with PHP</a></li>
<li><a data-description="IP address validation" href="/">Validate IPv4 Address in PHP</a></li>
<li><a data-description="PHP TimeZones" href="">PHP Country Time Zones</a></li>
<li><a data-description="Fixing Urls" href="">Fixing url using PHP by adding http & https</a></li>
</ul>
</div>
<div class="col-sm-3">
<h3 class="title">HTMl5</h3>
<ul>
<li><a data-description="HTML5 Inline Edit" href="">HTML5 Inline Edit with PHP, MYSQL & jQuery Ajax</a></li>
<li><a data-description="Advanced HTML5 Tutorials" href="">Advanced HTML5 Tutorials – Client Side, Offline, Geolocation – Part I</a></li>
<li><a data-description="HTML5 Chart" href="">HTML5 Chart</a></li>
<li><a data-description="HTML5 Whiteboard Marker" href="/">WhiteBoard Drawing Widget using HTML5</a></li>
<li><a data-description="Free HTML5 Ebook" href="">Free HTML5 and CSS3 Ebook</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown w3_megamenu-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Mega Menu 2 <b class="caret"></b></a>
<ul class="dropdown-menu half">
<li class="w3_megamenu-content withoutdesc">
<div class="row">
<div class="col-sm-6">
<h3 class="title">PHP</h3>
<ul>
<li><a data-description="Facebook Url Expander" href="/">Facebook Url Expander with jQuery Ajax and PHP</a></li>
<li><a data-description="Google oAuth login" href="">Google OAuth 2.0 Ajax Login using jQuery, PHP & MYSQL</a></li>
<li><a data-description="Instant Soundcloud Search" href="/">Instant Soundcloud Search using PHP & jQuery Ajax</a></li>
<li><a data-description="PHP TimeZones" href="/">PHP Country Time Zones</a></li>
<li><a data-description="Fixing Urls" href="/">Fixing url using PHP by adding http & https</a></li>
</ul>
</div>
<div class="col-sm-6">
<h3 class="title">HTMl5</h3>
<ul>
<li><a data-description="HTML5 Inline Edit" href="/">HTML5 Inline Edit with PHP, MYSQL & jQuery Ajax</a></li>
<li><a data-description="Advanced HTML5 Tutorials" href="/">Advanced HTML5 Tutorials – Client Side, Offline, Geolocation – Part I</a></li>
<li><a data-description="HTML5 Chart" href="/">HTML5 Chart</a></li>
<li><a data-description="HTML5 Whiteboard Marker" href="/">WhiteBoard Drawing Widget using HTML5</a></li>
<li><a data-description="Free HTML5 Ebook" href="/">Free HTML5 and CSS3 Ebook</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Facebook <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/">Facebook Style Tag Selector</a></li>
<li><a href="/">Facebook Style Home Page</a></li>
<li><a href="/">Facebook Style ToolTip</a></li>
<li><a href="/">Facebook Style Buttons</a></li>
<li><a href="/">Facebook Style Url Data Extracter</a></li>
<li><a href="/">Facebook Style Video Url Expander</a></li>
<li class="dropdown-submenu">
<a href="#">Wall Scripts</a>
<ul class="dropdown-menu">
<li><a href="/">Facebook Wall Script 4.0 – Codeigniter</a></li>
<li><a href="/">Facebook Wall Script 3.0</a></li>
<li><a href="/">Facebook Wall Script 2.0</a></li>
</ul>
<!-- end dropdown-menu -->
</li><!-- end dropdown-submenu -->
</ul>
<!-- end dr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0