Dropdown menu inside of another drop down menu is not working - html

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

Related

Dropdown button is not toggle in mobile/table view?

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();
});
});

How can I add a submenu to the sidenav in Materialize?

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>

hover does not work after dropdown class delete

I have a bootstrap template I am practising on. In the navbar there is "Blog" and "Test"
On the test button, I removed the li class="dropdown ", because I wanted to try to make a button where the hover is active like on the "blog" button. But when I hover over the test, the text only display blue, on there is not a white background.
I cannot figure out how I can make that work? I have to make a CSS class for a button on the navbar, who does not have a dropdown.
For fun sake I tried to delete all the CSS, but the hover was still working on the blog button.
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav ">
<li class="dropdown ">
Blog
<ul class="dropdown-menu">
<li >Blog Home <span class="badge">v1.1</span></li>
<li >Blog Home 2 <span class="badge">NEW</span></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav ">
<li>
Test
<ul class="dropdown-menu">
<li >Blog Home <span class="badge">v1.1</span></li>
<li >Blog Home 2 <span class="badge">NEW</span></li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Large Image</a>
<ul class="dropdown-menu to-left">
<li >Right Sidebar</li>
<li >Left Sidebar</li>
<li >Without Sidebar</li>
</ul>
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Medium Image</a>
<ul class="dropdown-menu to-left">
<li >Right Sidebar</li>
<li >Left Sidebar</li>
<li >Without Sidebar</li>
</ul>
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Masonry</a>
<ul class="dropdown-menu to-left">
<li >Right Sidebar</li>
<li >Left Sidebar</li>
<li >Without Sidebar</li>
</ul>
</li>
<li >Timeline</li>
<li >Blog Post</li>
</ul>
</li>
</ul>
</div>
To style your links within navigation menus you have to add one of these lines in your CSS file according to your HTML
(1) if the main parent div is .navbar-collapse:
.navbar-collapse .navbar-nav>li a{background-color:#fff;}
(2) if the main parent is Navbar-default:
.navbar-default .navbar-nav>li a {background-color:#fff;}
(3) if the main parent is navbar-inverse:
.navbar-inverse .navbar-nav>li a{background-color:#fff;}
And something like this depending on the main parent class and the class with in ul tag

Bootstrap3 dropdown issue

I have this in my HTML , I am using bootstrap 3 classes to make a drop down with in another drop down.
<div class="subnav">
<ul class="nav-pills">
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" >
<span id="spnUsrName">Welcome, {{usrName}}</span>
</a>
<ul class="dropdown-menu pull-right">
<li class="disabled" >Disabled link 1</li>
<li class="disabled" >Disabled link 2</li>
<li class="divider"></li>
<li class="dropdown-submenu">Settings
<ul class="dropdown-menu">
<li>Change Password</li></ul>
</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
However, the 'ul' inside the first dropdown-meu is not showing up. The "Settings" option is displayed, but change password option is not displayed. Where have I gone wrong.

Bootstrap centering navbar

I'm new to bootstrap and am having a bit of trouble positioning a fluid dropdown menu. I would like to have it in the center or my page and have tried a few things, but it's not quite right.
I have tried to add a class of span6 and then add float: none; margin: 0 auto; to the css, and this does center it, but when the responsive menu kicks in it's somewhere between the middle instead of the left side. This also messes with the menu items.
I have also tried placing text-align:center; in various places to see if that would do anything, but it doesn't seem to effect anything.
Any help would be wonderful!
Here is my html
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
set margin-left:auto; margin-right:auto on ul with class nav
In Bootstrap.css line: 3102 edit
.nav > li > a {
/* display: block; */
}
Edit the bootstrap.css file line: 3638 to 3651 as shown:
.navbar .nav {
position: relative;
left: 0;
display: block;
/* float: left;
*/ margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
float: right;
margin-right: 0;
}
.navbar .nav > li {
/* float: left; */
}
For the following HTML works. It displays the menu center aligned.
<html>
<head>
<link rel="stylesheet" href="public/css/LNedit.css"><link rel="stylesheet" href="public/css/bootstrap2.css">
<style>
.navbar-inner {
text-align: center !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 navbar-inner" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"> </script><script type="text/javascript" src="js/markdown.js"> </script><!--script(type='text/javascript', src='js/main.js') --><!--script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')--><!--script(type='text/javascript', src='js/ui-bootstrap-tpls-0.4.0.min.js')--><script type="text/javascript" src="js/bootstrap-markdown.js"></script>
</body>
</html>