Adding second child to dropdown menu - javascript

Im experiencing an issue adding a second child to the drop-down-menu.
here is my html code:
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')"><i class="material-
icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li><a onclick="load('file-name')"><i class="material-
icons">apps</i>TEXT</a>
</li>
<li><a onclick="load('file-name')"><i class="material-
icons">copyright</i>Copyright</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name') class="dropdown-toggle"><i class="material-
icons">assignment</i>Unit A<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
and here is my js:
jQuery(document).ready(function (e) {
$(".dropdown-toggle").click(function () {
$(this).parents(".button-dropdown").children(".dropdown-
menu").toggle().parents(".button-dropdown").children(".dropdown-
toggle").addClass("active")
});
$('.dropdown-toggle').on('click', function () {
$(this)
.find('.changed')
.toggleClass('fa-angle-down')
.toggleClass('fa-angle-right');
});
});
Here are the styles applied for drop-down-menu:
.dropdown-menu li > a {
text-align: center;
}
.dropdown-menu li:hover > a {
background-color: #385170 !important;
color: #fff !important;
}
.changed {
margin-left: 5px;
}
I need to add another child under Menu 1 and Menu 2.
Thanks a lot for your help.

The first issue I found in your code is that you are defining the same event twice, which means that only the last one will be executed.
To append items with jQuery inside an event listener is as easy as:
Keeping code clean.
Globals at the beginning of your code:
var buttonDropdown = $(".button-dropdown");
And then your event listener for dropdown-toggle click:
$('.dropdown-toggle').on('click', function () {
buttonDropdown.append("<li>new item</li>");
});
This will append a new item to button-dropdown everytime you click dropdown-toggle.
Here is an example:
var buttonDropdown = $(".button-dropdown");
jQuery(document).ready(function (e) {
$('.dropdown-toggle').on('click', function (event) {
let itemNumber = buttonDropdown.children().length;
buttonDropdown.append("<ul><li>Menu "+itemNumber+"</li></ul>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')">
<i class="material- icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li>
<a onclick="load('file-name')">
<i class="material- icons">apps</i>TEXT
</a>
</li>
<li>
<a onclick="load('file-name')">
<i class="material- icons">copyright</i>Copyright
</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name')" class="dropdown-toggle">
<i class="material- icons">assignment</i>Unit A
<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
Note: This example is made from the context you provided. If it still not solves your entire issue, feel free to edit your question and comment here so I can update mine with the requirements for your question.
And also, you did not provide any styles for your code, that's why it looks so plain.

Related

How can I select elements having specific siblings?

How can I prevent anchor (<a>) tag from doing nothing if li has ul according to the following code:
<aside class="sidebar">
<div id="leftside-navigation" class="nano">
<ul class="nano-content">
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:void(0);">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
</a>
<ul>
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li>
<a href="index.html">
<span>Lifestyles</span>
</a>
</li>
<li>
<a href="index.html">
<span>Technology</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
I've tried to put javascript:void(0) - it works but I wanted to make it with if else statement or any other way.
I wanted to do that is:
if li.submenu has ul li.has-submenu a prevent default
You can write a selector for a that's a child of an li that has a submenu.
$("li:has(ul) > a").click(function(e) {
e.preventDefault();
});
Another approach would be to not include the <a> tag in general. Just write the the text "Categories" within the <li class="sub-menu> and it will display in menu as normal.
Example:
<li class="sub-menu">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
<ul>
<li>......
Although you would need to add CSS if you want the cursor to change or if you want the text to be underlined for your <span> etc...
You can also try this.
$("li").find("ul > a").click(function(e) {
e.preventDefault();
});

Hiding dropdown menu on hover issues

I can see that this question has been asked a bit although I've found no solution that fixes my specific problem.
I have a sub menu within a menu that doesn't work as intended, it simply needs to be shown when hovered over and then when it's not hovered over, hide the sub menu.
Right now I can hover over the menu item but then when I got to select the next option it disappears.
I don't know where I'm going wrong, I know it's a simple feature yet it's driving me mad! here's my working below:
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseover", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: hidden;
}
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown menu-btn">
<a id=t estmanage class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="btn_addnew" href="#">Create Audit</a></li>
<li>Departments</li>
<li>Products</li>
<li class="dropdown-submenu">
<a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
<ul style="display: none;" class="dropdown-menu">
<li> Labour Costs </li>
<li> Purchases </li>
<li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
<li> Wastage </li>
</ul>
</li>
</ul>
</li>
Forgive me for the formatting of the HTML part, can't get it to look like how it displays on my editor!
This can be done using CSS-Only. Just take a look at my solution:
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: none;
}
.subhover:hover ~ .dropdown-menu, .dropdown-menu:hover {
display: block;
}
<li class="dropdown menu-btn">
<a id=t estmanage class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="btn_addnew" href="#">Create Audit</a></li>
<li>Departments</li>
<li>Products</li>
<li class="dropdown-submenu">
<a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
<ul class="dropdown-menu">
<li> Labour Costs </li>
<li> Purchases </li>
<li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
<li> Wastage </li>
</ul>
</li>
</ul>
</li>
And in this fiddle, both dropdowns are working together: https://jsfiddle.net/thau2g9j/13/
It's not working because you are executing same lines of code on mouseover and mouseleave. The below code is not required. Comment and check, if that should suffice you requirement.
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Below is the running code snippet:
$(document).ready(function() {
$('.dropdown-submenu a.subhover').on("mouseover", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
//$(document).ready(function() {
// $('.dropdown-submenu a.subhover').on("mouseleave", function(e) {
// $(this).next('ul').toggle();
// e.stopPropagation();
// e.preventDefault();
// });
//});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: hidden;
}
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown menu-btn">
<a id=t estmanage class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-database fa-lg "></i> Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="btn_addnew" href="#">Create Audit</a></li>
<li>Departments</li>
<li>Products</li>
<li class="dropdown-submenu">
<a class="subhover" tabindex="-1" href="#"> Data Entry <span class="caret"></span></a>
<ul style="display: none;" class="dropdown-menu">
<li> Labour Costs </li>
<li> Purchases </li>
<li style="cursor: pointer;"><a data-toggle="modal" data-target="#salesModal">Sales</a></li>
<li> Wastage </li>
</ul>
</li>
</ul>
</li>

How to Display anchor elements Inline which are in a list element in dropdown-menu

Below is my Html code
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}}
<a class="fa fa-pencil-square-o" href="{{li.stateh}}"></a>
</li>
</ul>
</li>
I want the edit icon to be adjacent to F/R production Report. Not below Production Report.
P.S. I tried display: inline-block; display: inline; but both are not working.
Have you triend to simply place the tag inside the previous tag?
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}} <a class="fa fa-pencil-square-o" href="{{li.stateh}}"> </a>
</li>
</ul>
</li>

bootstrap navbar toggle not working for mobile

I have a JSfiffle
https://jsfiddle.net/zuer7g75/1/
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">
Camera & photo
</a>
</li>
<li>
<a href="/cell-phones">
Cell phones
</a>
</li>
<li>
<a href="/others">
Others
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/shoes">
Shoes
</a>
</li>
<li>
<a href="/clothing">
Clothing
</a>
</li>
<li>
<a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li>
<a href="/digital-downloads">
Digital downloads
</a>
</li>
<li>
<a href="/books">
Books
</a>
</li>
<li>
<a href="/jewelry">
Jewelry
</a>
</li>
<li>
<a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()"> <div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off"
value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
Expected behaviour is like this.
1 When I click on any parent category text ( for example computers) , it should lead me to the category page.
2 when I click on the down arrow for the category it should expand and show the subcategory items
All of them works fine, But now I want to move the down arrow to right applying a style="float:right" to the element. But now my expected behaviour 2 is broken.It is leading me to the corresponding page instead of expanding the subcategory items.
What am I doing wrong here?
By floating the font awesome icons to the right instead of the actual a tags i got it to work. Only thing is i couldn't get rid of the padding at the bottom. maybe you want it there? https://jsfiddle.net/RachGal/zuer7g75/3/
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var elmnt = $(this).parent().parent();
if (!elmnt.hasClass('nav')) {
var li = $(this).parent();
var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;
if (!li.hasClass('open')) li.addClass('open')
else li.removeClass('open');
$(this).next().css('top', heightParent + 'px');
$(this).next().css('left', widthParent + 'px');
return false;
}
});
});
function setMouseHoverDropdown() {
if ($(window).innerWidth() > 767) {
$('ul.nav li').hover(function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
}
$(window).load(function() {
setMouseHoverDropdown();
});
$(document).ready(function() {
setMouseHoverDropdown();
});
$(window).resize(function() {
setMouseHoverDropdown();
});
.fa-angle-down {
float: right;
margin-top: -50px;
}
a.dropdown-toggle {
height: 10px;
padding-bottom: 0px!important;
line-height: 1!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse category-navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span>
</li>
<li> <a href="/computers">
Computers
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/desktops">
Desktops
</a>
</li>
<li> <a href="/notebooks">
Notebooks
</a>
</li>
<li> <a href="/software">
Software
</a>
</li>
</ul>
</li>
<li> <a href="/electronics">
Electronics
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/camera-photo">
Camera & photo
</a>
</li>
<li> <a href="/cell-phones">
Cell phones
</a>
</li>
<li> <a href="/others">
Others
</a>
</li>
</ul>
</li>
<li> <a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/shoes">
Shoes
</a>
</li>
<li> <a href="/clothing">
Clothing
</a>
</li>
<li> <a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li> <a href="/digital-downloads">
Digital downloads
</a>
</li>
<li> <a href="/books">
Books
</a>
</li>
<li> <a href="/jewelry">
Jewelry
</a>
</li>
<li> <a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()">
<div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off" value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</body>
You can just make the a tags within the li to float left, then it should work.
.navbar-default .navbar-nav>li>a {
float:left;
}
Please change the css to be relevant to your project.
In order to get the clicking of the arrow down to work:
close all other drop downs that are currently visible.
remove the "open" class from all OTHER li.
toggle the open class from the current li that corresponds to our click.
toggle the visibility of the drop down that corresponds to our click.
Within the hover code, we also toggle the open class on the li. If a user hovers over arrow down, then we addClass open to the corresponding li. And vice versa.
Please see: https://jsfiddle.net/qynfvow3/30/

How to add active class only on second level of the navigation

I have an vertical navigation with two levels.
What I want is when I press the main li to add active and open class just to the main li and when I press on the sub-menu I want to add active just to that li. Here is my code:
HTML
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="start active open">
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active">
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li>
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
JS
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu li").on("click", function() {
$(".page-sidebar-menu li").removeClass("active open");
$(this).addClass("active open");
});
You have to target the closest li inside class .page-sidebar-menu
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu > li").on("click", function() {
$(".page-sidebar-menu > li").removeClass("active open");
$(this).addClass("active open");
});
i'm not sure if i understood exactly what you asked.
But, from what i get i remade your html a bit (added a menu class to bind the click event more precisely)
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="menu start active open"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active"> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li class="menu"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
And so my version of your jQuery looks like that :
$(document).ready(function () {
// added a menu class to bind the click event more precisely
$(".menu > a").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
// and close the other menus
$(".menu").removeClass("open");
$(this).parent().addClass("active open");
});
$(".sub-menu li").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
$(this).addClass("active");
});
});
The CSS i used to test it was just this :
.menu { display: block; }
.sub-menu { display: none; }
.open, .open .sub-menu { display: block; }
.active { text-transform: uppercase; }
For an example, go check that jsfiddle that i made to answer you (really basic css here) and tell me if that's what you asked for.

Categories