bootstrap超级菜单，如何更改为onclick功能和手机下拉项
bootstrap mega menu, how change to onclick function and drop down item for mobile?
我正在尝试将小型设备的下拉菜单更改为项1和项2的"onclick"answers"drop-down"，问题是下拉菜单子菜单是否在移动设备的根导航之外？
如何更改根导航内的下拉菜单子菜单和移动点击？
来源http://jsfiddle.net/apougher/ydcMQ/
我的编辑：：
HTML:
<body>
<nav class="navbar navbar-default" role="navigation">
<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 hidden-sm hidden-md hidden-lg" href="#"><img src="logo.jpg" alt="Dispute Bills"></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 ">item 1<b class="caret "></b></a>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Glyphicons</li>
<li><a href="# ">Available glyphs</a></li>
<li class="disabled "><a href="# ">How to use</a></li>
<li><a href="# ">Examples</a></li>
<li class="divider "></li>
<li class="dropdown-header ">Dropdowns</li>
<li><a href="# ">Example</a></li>
<li><a href="# ">Aligninment options</a></li>
<li><a href="# ">Headers</a></li>
<li><a href="# ">Disabled menu items</a></li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Button groups</li>
<li><a href="# ">Basic example</a></li>
<li><a href="# ">Button toolbar</a></li>
<li><a href="# ">Sizing</a></li>
<li><a href="# ">Nesting</a></li>
<li><a href="# ">Vertical variation</a></li>
<li class="divider "></li>
<li class="dropdown-header ">Button dropdowns</li>
<li><a href="# ">Single button dropdowns</a></li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Input groups</li>
<li><a href="# ">Basic example</a></li>
<li><a href="# ">Sizing</a></li>
<li><a href="# ">Checkboxes and radio addons</a></li>
<li class="divider "></li>
<li class="dropdown-header ">Navs</li>
<li><a href="# ">Tabs</a></li>
<li><a href="# ">Pills</a></li>
<li><a href="# ">Justified</a></li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Navbar</li>
<li><a href="# ">Default navbar</a></li>
<li><a href="# ">Buttons</a></li>
<li><a href="# ">Text</a></li>
<li><a href="# ">Non-nav links</a></li>
<li><a href="# ">Component alignment</a></li>
<li><a href="# ">Fixed to top</a></li>
<li><a href="# ">Fixed to bottom</a></li>
<li><a href="# ">Static top</a></li>
<li><a href="# ">Inverted navbar</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown menu-large ">
<a href="# " class="dropdown-toggle " data-toggle="dropdown ">item 2 <b class="caret "></b></a>
<ul class="dropdown-menu megamenu row ">
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Glyphicons</li>
<li><a href="# ">Available glyphs</a></li>
<li class="disabled "><a href="# ">How to use</a></li>
<li><a href="# ">Examples</a></li>
<li class="divider "></li>
<li class="dropdown-header ">Dropdowns</li>
<li><a href="# ">Example</a></li>
<li><a href="# ">Aligninment options</a></li>
<li><a href="# ">Headers</a></li>
<li><a href="# ">Disabled menu items</a></li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Button groups</li>
<li><a href="# ">Basic example</a></li>
<li><a href="# ">Button toolbar</a></li>
<li><a href="# ">Sizing</a></li>
<li><a href="# ">Nesting</a></li>
<li><a href="# ">Vertical variation</a></li>
<li class="divider "></li>
<li class="dropdown-header ">Button dropdowns</li>
<li><a href="# ">Single button dropdowns</a></li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Input groups</li>
<li><a href="# ">Basic example</a></li>
<li><a href="# ">Sizing</a></li>
<li><a href="# ">Checkboxes and radio addons</a></li>
<li class="divider "></li>
<li class="dropdown-header ">Navs</li>
<li><a href="# ">Tabs</a></li>
<li><a href="# ">Pills</a></li>
<li><a href="# ">Justified</a></li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Navbar</li>
<li><a href="# ">Default navbar</a></li>
<li><a href="# ">Buttons</a></li>
<li><a href="# ">Text</a></li>
<li><a href="# ">Non-nav links</a></li>
<li><a href="# ">Component alignment</a></li>
<li><a href="# ">Fixed to top</a></li>
<li><a href="# ">Fixed to bottom</a></li>
<li><a href="# ">Static top</a></li>
<li><a href="# ">Inverted navbar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js "></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js "></script>
<script>
// Dropdown Menu Fade
jQuery(document).ready(function(){
$(".dropdown ").hover(
function() { $('.dropdown-menu', this).stop().fadeIn("fast ");
},
function() { $('.dropdown-menu', this).stop().fadeOut("fast ");
});
});
</script>
</body>
CSS:
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding-top: 6px;
padding-right: 6px;
padding-left: 6px;
padding-bottom: 6px;
width: auto;
}
/* This should be around line 4713 in your bootstrap.css */
.navbar-collapse.collapse {
text-align: center;
}
.navbar-nav {
display: inline-block;
float: none;
margin: 0;
max-width: 1200px;
}
.navbar-default {
color: #0A0A0A;
background-color: #FFFCFC;
border-color: rgba(208, 174, 174, 1.00);
}
.navbar-default .navbar-nav > li > a {
color: #030303;
padding-left: 30px;
padding-right: 30px;
}
.navbar-default .navbar-nav > li > a:hover {
color: #7C7373;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #666666;
border-bottom-color: #111222;
}
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
float: none;
}
.megamenu> li > ul {
padding: 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;
font-size: 80%;
text-align: left;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #AB2F2F;
background-color: #EFE7E7;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #9A5455;
}
.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;
}
.dropdown-header {
color: #1D5586;
font-size: 0.9em;
}
@media (max-width: 768px) {
.navbar-default .navbar-nav > li > a {
color: #030303;
padding-right: 1px;
padding-left: 1px;
}
.navbar-collapse.collapse {
text-align: left;
/* Set this */
}
.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;
}
}
我的代码位于：FIDDLE
您需要更改一些css
.navbar-default .navbar-nav > .open > a{
background : transparent !important;
}
.navbar-nav .open .dropdown-menu{
background : white;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color : #999999 !important;
}
这是更新的jsFiddle
相关文章：
- 添加文字和评论功能更新Div
- JavaScript打印功能使日历停止工作
- 每当您在选择器内移动鼠标时，悬停功能就会重复
- 如何防止网页加载后自动启动功能
- 除修剪外的其他功能
- 悬停功能触发器
- 使用angularjs向浏览器发送servlet响应(下载功能）
- 删除CKEditor工具栏按钮，但不删除功能
- bootstrap超级菜单，如何更改为onclick功能和手机下拉项
- 手机间隙拨号功能在安卓平板电脑上
- jquery手机中的自动滚动功能
- 删除手机上的功能
- jquery手机刷屏功能只有在页面刷新后才能使用
- Soundcloud stream: onfinish功能无法与锁定的手机一起工作
- jQuery的点击功能在安卓手机浏览器中不工作
- 让onClick属性和点击功能在触摸屏(智能手机)上工作
- jquery手机扫码功能
- 在移动web浏览器中使用javascript访问手机的本机功能，而不使用本机包装器
- jQuery手机上的点击功能
- 如何让我的鼠标上下键功能在触屏手机上工作?
