bootstrap mega menu, how change to onclick function and drop down item for mobile?
Question
I am trying to change menu drop down for small devices for "onclick" and "drop down" for item1 and item2, problem is drop down menu subs is outside of root nav for mobile?
How change drop down menu subs in inside root nav and on click for mobile?
Source from http://jsfiddle.net/apougher/ydcMQ/
My edit::
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;
}
}
my code on: FIDDLE
1 answers
solution1
1 2016-04-19 18:17:03
You need to change some 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;
}
Here is the updated jsFiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap3 Mega Menu Change Drop Down Width
how to add a sub menu to a drop down menu item in bootstrap 5?
jquery mega drop down menu plugin (dcMegaMenu) how to change event hover to click on window resize
How to change hover effect to onclick only for a drop down menu
How To Place Mega Drop Down Menu With Position Relative?
JavaScript - how to change item from drop-down menu
How to programmatically change the selected item in this drop down menu?
Two horizontal lines with Mega Drop Down Menu
LinkButton OnClick event does not fire in Bootstrap drop-down menu
bootstrap - open drop down menu and submenu at specific menu item
Related Tags