I have a dropdown menu in bootstrap where user clicked on to open sub-menu but when again user clicked on it is not closing. for reference check this image below mobile/table view
see when user clicked on caret is only opens not closing existing menu
Also: For reference you can check the live website:
HTML:
<li class="dropdown megamenu">
<li class="dropdown megamenu">
Kontakt & Anmeldung <span class="caret"></span>
<ul class="dropdown-menu">
<div class="container">
<div class="col-lg-2">
<ul>
<li>Kontakt</li>
<li>Reiseanmeldung</li>
<li>Videochat-Termin</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
About<span class="caret"></span>
<ul class="dropdown-menu">
<div class="container">
<div class="col-lg-2">
<ul>
<li>About us</li>
<li>Our Team</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
jQuery
$(document).ready(function () {
// Toggle div display
$(".dropdown .megamenu").click(function () {
$(this).find('.dropdown-menu').toggle();
});
});
Related
How can I add submenu to the following sidenav?
<ul class="sidenav sidenav-fixed" id="nav-mobile" style="width:250px">
<li> Text here</li>
<li>
<div class="divider"></div>
</li>
<li>
<a onclick="load('home')"><i class="material-icons">home</i>Home</a>
</li>
<li><a onclick="load('intro')"><i class="material-icons">apps</i>Content Table</a></li>
</ul>
MaterializeCSS documentation site uses a collapsible inside the sidenav:
https://materializecss.com/collapsible.html
Collapsible is a separate component that also needs initialising:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
Working codepen:
https://codepen.io/doughballs/pen/RwPWVqy
The actual markup taken from the Materialize doc site is:
<!-- Start nested content -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal" tabindex="0"><i class="material-icons">menu</i>Nested</a>
<div class="collapsible-body">
<ul>
<li>Color</li>
<li>Grid</li>
<li>Helpers</li>
<li>Media</li>
<li>Pulse</li>
<li>Sass</li>
<li>Shadow</li>
<li>Table</li>
<li>Transitions</li>
<li>Typography</li>
</ul>
</div>
</li>
</ul>
</li>
You can do something like below with MaterializeCSS
<div id="slide-out" class="sidenav" style="transform: translateX(0%);">
<ul class="collapsible">
<li class="active">
<div class="collapsible-header">
Group1
</div> <div class="collapsible-body" style="display: block;">
<li>Course 1</li>
<li>Course 2</li>
</div>
</li>
<li class="">
<div class="collapsible-header">
केंद्रीय लोकसेवा आयोग
</div>
<div class="collapsible-body" style="">
</div>
</li>
</ul>
</div>
I'm having trouble getting a drop-down menu inside another dropdown menu to work. The first level dropdown works fine, but for the second level, when I click on the option for the dropdown menu (Learning Profiles) nothing happens... the menu fails to display.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-2">
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li id="navBarTitle">MENU</li>
<li class="dropdown">
Children <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Add Child
</li>
<li>
Archive/Delete Child
</li>
<li>
Children Details
</li>
<li class="dropdown">
Learning Profiles<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Observations
</li>
<li>
Learning Outcomes
</li>
<li>
Photos
</li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
there is little change in the html
<div class="container">
<div class="row">
<div class="col-md-2">
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li id="navBarTitle">MENU</li>
<li class="dropdown">
Children <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Add Child
</li>
<li>
Archive/Delete Child
</li>
<li>
Children Details
</li>
<li class ="dropdown-submenu">
Learning Profiles<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Observations
</li>
<li>
Learning Outcomes
</li>
<li>
Photos
</li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
and add the following css
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
also you need to add javascript
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
working plunker : https://plnkr.co/edit/jjrowMvX3FJ7OAsFpiaA?p=preview
So I have a dropdown that works and scales down perfectly fine thanks to Bootstrap.
The client however wants the collapse to act like an accordion.
I'm trying to get to something like this. Avada's main nav menu-scaled down into mobile: Note how the 'Home Samples' header goes missing and becomes a toggle with the list items as its dropdown. How could I find out what was used to create this?A push in the right direction would be appreciated.
This is a fiddle of what i got.
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="header1"> Apparel
<ul class="dropdown-menu mega-dropdown-menu row mega-dropdown-menu-1">
<div class="dropimg"><img class="img-responsive" src="images/dropdown.jpg"> </div>
<li class="col-sm-2">
<ul>
<li class="dropdown-header">APPAREL</li>
<li class="dropdown-header_a">ALL PRODUCTS
<ul class="dropdown-menu">
<li>Bottoms</li>
<li>Formal Wear</li>
<li>Golfers</li>
<li>Jackets</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Sweaters</li>
<li>Tracksuits</li>
<li>T-Shirts</li>
</ul>
</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">BRANDS</li>
<li>Altitude</li>
<li>Birdi</li>
<li>Chefworks</li>
<li>Drimac</li>
<li>Flexfit</li>
<li>Lexor</li>
<li>SA Rugby</li>
<li>Underarmour</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">CATEGORY</li>
<li>Activewear</li>
<li>Hospitality</li>
<li>Locally Produced</li>
<li>Outdoor</li>
<li>Supporters</li>
<li>Team Wear</li>
<li>Workplace</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">CLEARANCE</li>
</ul>
</li>
<li class="col-sm-1">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">SPECIALS</li>
</ul>
</li>
</ul>
</li>
</ul>
In the fiddle. the first in the dropdown, i've tried to make it a dropdown like normal. Is there a way to make it work without the use of java?
[EDITED]
With a little research and patience, I managed to add a slightly similar accordion-like transition effect to the bootstrap dropdown. I also managed to fix a visual bug that happened when the dropdown slided up too fast.
With bootstrap 3, they exposed quite a few javascript events for us to tinker with. The events that we will use are: 'show.bs.dropdown' and 'hide.bs.dropdown'. Learn more about their javascript events. Or check out the Dropdown events.
Inside each event, we will add a few jquery lines to give the dropdown our desired effect. The jquery events are: slideDown and slideUp.
All there is left for you is to overwrite bootstrap's default navbar color and add your own styles to it.
Here is the result (Click the phone icon on the far right): Bootply example
Javascript/Jquery:
$(function(){
//Add OnResize event
window.onresize = myResize;
myResize();
});
//This finction will fire each time the browser is resized
function myResize(){
//Get browser/device height and width
var bWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var bHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
//If viewport is lower than ipad, hence mobile
if(bWidth < 768){
// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
//On Complete, we reset all active dropdown classes and attributes
//This fixes the visual bug associated with the open class being removed too fast
$('.dropdown').removeClass('open');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
});
});
}
}
HTML/Bootstrap navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
APPAREL <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Bottoms</li>
<li>Formal Wear</li>
<li>Golfers</li>
<li>Jackets</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Sweaters</li>
<li>Tracksuits</li>
<li>T-Shirts</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
BRANDS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Altitude</li>
<li>Birdi</li>
<li>Chefworks</li>
<li>Drimac</li>
<li>Flexfit</li>
<li>Lexor</li>
<li>SA Rugby</li>
<li>Underarmour</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Activewear</li>
<li>Hospitality</li>
<li>Locally Produced</li>
<li>Outdoor</li>
<li>Supporters</li>
<li>Team Wear</li>
<li>Workplace</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>CLEARANCE</li>
<li>SPECIALS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Ok I have looked all over the css and can't seem to figure out what is determining the width between the top level links on my navbar. I need to make them just barely smaller so when it adjust for a sub 900px screen it doesn't turn it into a 2 row navbar instead of the usual 1 row.
I tried something like navbar > li but had no success getting them to move. But to no avail so I am asking
Thank You here is my navbar code
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.html">PC3</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
About Us <b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Services</li>
<li>Core values</li>
<li>Staff</li>
<li>How To Know God</li>
<li>Volunteering</li>
<li>Giving</li>
<li>Directions & Contact</li>
</ul>
</li>
<li class="dropdown">
Adult Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Personal Spiritual Trainer</li>
<li>Care Team</li>
<li>Hospitality team</li>
<li>Intercessory Prayer</li>
<li>Women's Ministry</li>
<li>Amplified Worship</li>
<li>Sermons</li>
</ul>
</li>
<li class="dropdown">
Student Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Just For Parents</li>
</ul>
</li>
<li class="dropdown">
PC Kids<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Videos</li>
</ul>
</li>
<li class="dropdown">
Life Groups<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Schedule</li>
<li>Leaders & Group Info</li>
</ul>
</li>
<li>Events</li>
<li>Missions</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
I figured out what I was looking for, didn't look in the second css, which has the responsive css and didn't edit the padding for the .inner class.
That was my fault thank you tho
Right I have seen the following information on this topic so do understand more about is here is what I have read so far:
Removing/adding link class onclick
Changing an element's ID with jQuery
and I have read the obvious jquery UI page but I can't find the way to add the onclick so that it changes the "parent" element to class="active"
<!--navbar-->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="#" >Relution.co.uk</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left hide-for-medium-up">
<li class="has-form">Click Here to login</li>
<li class="has-form">Not a member? Register for free</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="active">Home</li>
<li class="divider"></li>
<li>About</li>
<li class="divider"></li>
<li>Services</li>
<li class="divider"></li>
<li>Portfolio</li>
<li class="divider"></li>
<li>Contact</li>
<li class="divider"></li>
<li class="has-dropdown hide-for-small">
</i>
<ul class="dropdown">
<li><i class="foundicon-search"></i> Search</li>
</ul>
</li>
<li class="has-form hide-for-medium-up">
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
Search
</div>
</div>
</form>
</li>
</ul>
</section>
</nav>
<!--/navbar-->
Below is the code that I'm using to target the links for an onlick even when I do this I want the parent li to become acive and all others to not be active
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(){
http://jsfiddle.net/n5CLu/
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(e){
e.preventDefault();
$(this).parent().addClass('active').siblings().removeClass('active');
});