[英]bootstrap mega menu, how change to onclick function and drop down item for mobile?
我正在尝试更改小型设备的菜单下拉菜单,用于 item1 和 item2 的“onclick”和“下拉”,问题是下拉菜单 subs 在移动设备的根导航之外?
如何更改根导航中的下拉菜单子项和单击移动设备?
来源来自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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.