基于Twitter Bootstrap3的轻量级大型导航菜单

最新推荐文章于 2022-06-18 16:37:27 发布
最新推荐文章于 2022-06-18 16:37:27 发布
阅读量298 收藏
点赞数
分类专栏： html 文章标签： Bootstrap 大型导航菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxydyx/article/details/89139653
版权

这个是一款基于Twitter Bootstrap3的轻量级大型导航菜单插件。该大型菜单使用Bootstrap3标准的导航菜单标签和流式网格系统来制作，适合用于制作复杂的网站导航菜单。

demo

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Mega Menu</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">




      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  <style id="compiled-css" type="text/css">
      .navbar-brand>img {
  padding-top: 11px;
  width: 130px;
  margin-left: 60px;
}
.navbar-brand {
    height: auto;
    margin: 0;
    padding: 0;
    margin-right: 20px;
}
.navbar-default{
/*color: #fff;*/
background-color: #2F4F4F;
border-color: #000000;
}
.navbar-default .navbar-nav > li > a{
	color:#fff;
}
.navbar-default .navbar-nav > .dropdown > a .caret{
	border-top-color: #fff;
    border-bottom-color: #fff;
}
.navbar-default .navbar-brand{
	color:#fff;
}
.menu-large {
  position: static !important;
}
.megamenu{
  padding: 20px 0px;
  width:100%;
}
.megamenu> li > ul {
  padding: 0;
  margin: 0;
}
.megamenu> li > ul > li {
  list-style: none;
}
.megamenu> li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  color: #999999;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: #00A7E8;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}
@media (max-width: 768px) {
  .megamenu{
    margin-left: 0 ;
    margin-right: 0 ;
  }
  .megamenu> li {
    margin-bottom: 30px;
  }
  .megamenu> li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header{
	color:#fff;
  }
}
  </style>
	<link type="text/css" rel="stylesheet" href="css/easy-responsive-tabs.css" />
    <script src="js/easyResponsiveTabs.js" type="text/javascript"></script>

  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">



jQuery(document).ready(function(){
$('#verticalTab').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true
        });
	
	
	
	
});
</script>

</head>
<body>
<div style="height:0px;backgound:red"></div>
    <div class="navbar navbar-default navbar-static-top">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="/"><img src="logo.png" /></a>
      </div>
      <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li class="dropdown menu-large">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Products <b class="caret"></b> </a>
               <ul class="dropdown-menu megamenu row">
                  <li>
				  <div class="container">
					<div class="row">
					<div class="col-sm-6 col-md-3">
                        <a href="#" class="thumbnail">
                        <img src="https://placehold.it/150x120">
                        </a>
                     </div>
                     <div class="col-sm-6 col-md-3">
                        <a href="#" class="thumbnail">
                        <img src="https://placehold.it/150x120">
                        </a>
                     </div>
                     <div class="col-sm-6 col-md-3">
                        <a href="#" class="thumbnail">
                        <img src="https://placehold.it/150x120">
                        </a>
                     </div>
                     <div class="col-sm-6 col-md-3">
                        <a href="#" class="thumbnail">
                        <img src="https://placehold.it/150x120">
                        </a>
                     </div>
                     <div class="col-sm-6 col-md-3">
                        <a href="#" class="thumbnail">
                        <img src="https://placehold.it/150x120">
                        </a>
                     </div>
                     <div class="col-sm-6 col-md-3">
                        <a href="#" class="thumbnail">
                        <img src="https://placehold.it/150x120">
                        </a>
                     </div>
                     <div class="col-sm-6 col-md-3">
                        <a href="#" class="thumbnail">
                        <img src="https://placehold.it/150x120">
                        </a>
                     </div>
                     <div class="col-sm-6 col-md-3">
                        <a href="#" class="thumbnail">
                        <img src="https://placehold.it/150x120">
                        </a>
                     </div>
					</div>
				  </div>
                     
                  </li>
               </ul>
            </li>
            <li class="dropdown menu-large">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Categories <b class="caret"></b></a>          
               <ul class="dropdown-menu megamenu row">
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Software</li>
                        <li><a href="#">Desktop</a></li>
                        <li class="disabled"><a href="#">Mobile</a></li>
                        <li><a href="#">Tablet</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Hardware</li>
                        <li><a href="#">Arduino</a></li>
                        <li><a href="#">Raspberry PI</a></li>
                        <li><a href="#">VoCore</a></li>
                        <li><a href="#">Banana PI</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Nano-Tech</li>
                        <li><a href="#">AFM</a></li>
                        <li><a href="#">STM</a></li>
                        <li><a href="#">Nano-Tubes</a></li>
                        <li><a href="#">Nano-Wires</a></li>
                        <li><a href="#">Materials</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">A.I.</li>
                        <li><a href="#">Artificial Intelligence</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">SaaS</li>
                        <li><a href="#">On-Demand</a></li>
                        <li><a href="#">No Software</a></li>
                        <li><a href="#">Cloud Computing</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">On-Premise</li>
                        <li><a href="#">Data Center</a></li>
                        <li><a href="#">Hosting Environment</a></li>
                        <li><a href="#">Internal IT</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Server-Side</li>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">Java</a></li>
                        <li><a href="#">Python</a></li>
                        <li><a href="#">Ruby</a></li>
                        <li><a href="#">ColdFusion</a></li>
                        <li><a href="#">ASP.NET</a></li>
                        <li><a href="#">GO</a></li>
                        <li><a href="#">Perl</a></li>
                        <li><a href="#">Lasso</a></li>
                     </ul>
                  </li>
               </ul>
            </li>
             <li class="dropdown menu-large">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Services <b class="caret"></b></a>          
               <ul class="dropdown-menu megamenu row">
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Web Design</li>
                        <li><a href="#">HTML5</a></li>
                        <li class="disabled"><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Web Development</li>
                        <li><a href="#">Websites</a></li>
                        <li><a href="#">Mobile Apps</a></li>
                        <li><a href="#">Responsive</a></li>
                        <li><a href="#">Web Apps</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Graphic Design</li>
                        <li><a href="#">PSD</a></li>
                        <li><a href="#">Images</a></li>
                        <li><a href="#">Logos</a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#">Vertical variation</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Database Design</li>
                        <li><a href="#">Single button dropdowns</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">UI/UX Design</li>
                        <li><a href="#">User Interface</a></li>
                        <li><a href="#">User Experience</a></li>
                        <li><a href="#">Web Designers</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Digital Marketing</li>
                        <li><a href="#">Paid</a></li>
                        <li><a href="#">Social</a></li>
                        <li><a href="#">Content Marketing</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Project Management</li>
                        <li><a href="#">Initiating</a></li>
                        <li><a href="#">Planning</a></li>
                        <li><a href="#">Executing</a></li>
                        <li><a href="#">Monitoring</a></li>
                        <li><a href="#">Controlling</a></li>
                        <li><a href="#">Closing</a></li>
                        <li><a href="#">PM Systems</a></li>
                        <li><a href="#">Best Practices</a></li>
                        <li><a href="#">Project Manager</a></li>
                     </ul>
                  </li>
               </ul>
            </li>
			<!--tabs-->
			<li class="dropdown menu-large">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">tabs <b class="caret"></b></a>    <style type="text/css">
			  .tabs-vertical{font:700 13px sans-serif;background-color:#f7f7f7;box-shadow:0 0 22px #e2e2e2 inset,2px 2px 3px #e8e8e8;border:1px solid #cecece;margin:30px auto;max-width:580px;text-align:center;border-radius:2px}.tabs-vertical ul{float:left;list-style:none;text-align:left;margin:0;padding-left:0}.tabs-vertical ul li{margin-right:-1px}.tabs-vertical ul li a{display:block;text-decoration:none;color:#656a6d;border:1px solid transparent;border-right:0;border-left:0;padding:16px 40px 16px 20px}.tabs-vertical ul li a.tab-active{border-color:#ddd;background-color:#fff;box-shadow:0 2px 0 #efefef}.tabs-vertical ul li:first-child a{border-top:0}.tabs-vertical .tabs-content-placeholder{overflow:hidden;border-left:1px solid #ddd;font-weight:400;background-color:#fff;padding:20px 40px 45px;margin:0 auto;box-shadow:-3px 0 0 #f3f3f3;text-align:center}.tabs-vertical .tabs-content-placeholder div{display:none}.tabs-vertical .tabs-content-placeholder div.tab-content-active{display:block}.tabs-vertical .tabs-content-placeholder div p{color:#565a5c;line-height:1.5;text-align:left;margin:5px 0 20px}.tabs-vertical .tabs-content-placeholder div img{max-width:100%}@media(max-width:600px){.tabs-vertical ul{float:none}.tabs-vertical ul li{display:inline-block;margin-bottom:-1px}.tabs-vertical ul li a{border:1px solid transparent;border-bottom:0;border-top:0;padding:12px 15px}.tabs-vertical ul li a.tab-active{border-color:#ddd;background-color:#fff;box-shadow:2px 0 0 #efefef}.tabs-vertical ul li:first-child a{border-left:0}.tabs-vertical .tabs-content-placeholder{padding:15px 30px 30px;border-left:0;border-top:1px solid #ddd;box-shadow:0 -3px 0 #f3f3f3}}
			   </style>      
               <ul class="dropdown-menu megamenu">
			   <div class="container">
					<div id="verticalTab">
						<ul class="resp-tabs-list">
							<li>Responsive Tab 1</li>
							<li>Responsive Tab 2</li>
							<li>Responsive Tab 3</li>
							<li>Long name Responsive Tab 4</li>
						</ul>
						<div class="resp-tabs-container">
							<div>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
							</div>
							<div>
								<p>This tab has icon in it.</p>
							</div>
							<div>
								<p>Suspendisse blandit velit Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravid urna gravid eget erat suscipit in malesuada odio venenatis.</p>
							</div>
							<div>
								<p>d ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
							</div>
						</div>
					</div>
			</div>
               </ul>
			   <script>

</script>
            </li>
			<!--tabs-->
         </ul>
      </div>
   </div>
</div>

  

</body></html>

demo

lxydyx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Bootstrap】Bootstrap基础导航栏(响应式导航菜单)
MruAn的博客
12-20 4749
Bootstrap基础导航栏(响应式导航菜单) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
基于Bootstrap3的轻量级大型导航菜单
12-12
yamm3是一款基于Twitter Bootstrap3的轻量级大型导航菜单插件。该大型菜单使用Bootstrap3标准的导航菜单标签和流式网格系统来制作。它具有顶部固定和响应式等特点，适合用于制作复杂的网站导航菜单。
Bootstrap系列之导航（Navs）
老__L的博客
06-18 4513
关于如何使用Bootstrap包含的导航组件的文档和示例。Bootstrap中可用的导航共享一般的标记和样式，从基本的类到激活和禁用状态。交换修饰符类以在每种样式之间切换。基本的组件是用flexbox构建的，为构建所有类型的导航组件提供了一个强大的基础。它包括一些样式重写(用于处理列表)，一些链接填充用于更大的点击区域，以及基本禁用的样式。 整个过程都使用类，因此您的标记可以非常灵活。使用如上图，如果您的项目的顺序是很重要的，或你自己滚元素。因为使用了，所以链接的行为与nav项目相同，但没有额外的标记。
一个炫酷的Bootstrap导航菜单
08-31
主要为大家详细介绍了一个炫酷的Bootstrap导航菜单的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap3多级导航菜单
Hi,印象钟情
10-31 9309
Bootstrap3多级导航菜单 AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuer
bootstrap悬浮多级导航菜单
u010120164的博客
09-10 1342
bootstrap悬浮多级导航菜单 效果图： 源码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>多级导航菜单</title> <meta name="description" content="多级导航菜单"> <meta http-equiv="X-UA-Compatible" content=
jQuery基于Bootstrap顶部浮动导航菜单代码
06-05
jQuery是一个轻量级的JavaScript库，简化了DOM操作、事件处理、动画效果以及Ajax交互。在这个场景下，jQuery被用来监听页面滚动事件，实现导航菜单的隐藏和显示效果。当用户向下滚动页面时，导航菜单会自动隐藏，以...
jQuery+bootstrap响应式二级下拉导航菜单代码.rar
05-29
jQuery 是一个轻量级的JavaScript库，简化了DOM操作、事件处理、动画制作以及Ajax交互。在响应式导航菜单中，jQuery被用来添加交互性，如触发下拉菜单的显示和隐藏，以及可能的触摸事件支持，以优化移动设备的用户...
ace bootstrap 轻量级框架
08-01
Ace Bootstrap 是一个基于Bootstrap框架的轻量级前端开发模版，尤其适用于构建高效、美观的后台管理系统。这个模版集合了Bootstrap的灵活性和Ace框架的功能性，为开发者提供了丰富的组件和设计模式，使得Web应用的...
Bootstrap3+Thinkphp3.2.3响应式轻量级通用网站后台管理系统源码.zip
10-05
Bootstrap3和Thinkphp3.2.3是两个在Web开发领域广泛应用的开源框架，结合使用可以构建出响应式、轻量级且通用的网站后台管理系统。让我们深入了解一下这两个技术及其结合点。 Bootstrap3是由Twitter开发并维护的一...
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
bootstrap.v3.3.7最新版本
10-13
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架，用于开发响应式布局、移动设备优先的WEB项目。它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式。 Bootstrap 3.3.7 更新日志：2015-07-25
WP-Bootstrap4-MegaMenu-Navwalker：Navwalker使用Bootstrap 4.0导航类隐含基于小部件的Mega Menu
02-05
wp-bootstrap4-navwalker-Mega 一个自定义的WordPress nav walker类，可使用内置的WordPress菜单管理器以自定义主题中的Mega Menu项目完全实现Bootstrap 4.0+导航样式。 <-菜单屏幕截图 <-小部件屏幕的屏幕截图 <-菜单屏幕的屏幕截图 这个版本增加了对带有Mega Menu类型导航项目的多级下拉菜单的支持 注意 这是一个实用程序类，旨在使用正确的语法和类来格式化WordPress主题菜单，以利用Bootstrap下拉导航，并且不包括必需的Bootstrap JS文件。 您将必须手动添加它们。 安装 将wp_boo
bootstrap V3.3.7 中文文档
01-26
bootstrap 中文 文档 v3.3.7 2018年版本 bootstrap 中文 文档 v3.3.7 2018年版本 bootstrap 中文 文档 v3.3.7 2018年版本
Bootstrap3.3.7
11-17
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架，用于开发响应式布局、移动设备优先的WEB项目。它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式。此zip文件是Bootstrap3.3.7资源文件，内含css/fonts/js
Bootstrap Mega Menu
weixin_34226182的博客
10-28 278
完整的代码放在 jsFiddle Bootstrap Mega Menu 。 我们管 Mega Menu 叫做“大菜单”吧，“巨”、“超级”啥的，不足以彰显我们的草根贵气。 有道词典： Mega Menu: 大数据量网页菜单；超级菜单式；巨型菜单；超级菜单。 基于Bootstrap Dropdown，实现一个大菜单，有三个问题要解决： ...
bootstrap3.3.7(2018最新版)
01-06
菜鸟教程bootstrap参考手册,全局css样式3.37版本 摘要必须大于50个字节！
bootstrap bootstrap-3.3.7
03-13
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
weixin_34167043的博客
01-11 4739
有人说前端发展太快,框架太多,各有所需，各有所长。看看这幅图，估计都知道这些框架，但是大部分公司中实际要用到的也就那么几个。 发展再快,框架再多。还是得回到原点，不就是Html+Css+JavaScript吗，使用任何牛逼的框架之前你也得把这些东西玩熟练了。bootstrap上大一的时候学html的时候就听老师说过，接触也快一年多了，所以这里准备写一...
html 中Bootstrap实现可折叠3级侧边导航菜单样式好看点
最新发布
06-07
可以试试以下代码，它实现了可折叠的3级侧边导航菜单，并且使用了Bootstrap样式： ```html <span class="sr-only">Toggle navigation <span class="icon-bar"></span> <span class="icon-bar"></span> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值