How to remove duplicate html wrapper ? (jQuery) - javascript

I have a navigation menu that needs to be wrapped with certain div and class so that CSS will apply.
1. The default blog post has the necessary html wrapper and css for the navigation
<nav class="main-navigation dd-menu toggle-menu">
<ul id="menu-main-menu" class="menu-main-menu">
<li>Home</li>
<li>About Us</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children >
Books
<ul class="sub-menu">
<li>
<div class="megamenu-container container">
<div class="row">
<li>
<div class="megamenu-container container">
<div class="row">
<li>Rental</li>
<li>New</li>
<li>Used</li>
</div>
</div>
</li>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
2. The other type of blog post has a faulty navigation menu:
<nav class="main-navigation dd-menu toggle-menu">
<ul id="menu-main-menu" class="menu-main-menu">
<li>Home</li>
<li>About Us</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children >
Books
<ul class="sub-menu">
<li>
<li>Rental</li>
<li>New</li>
<li>Used</li>
</li>
</ul>
</li>
</ul>
</nav>
After executing the script below:
<script type="text/javascript">
var j = jQuery.noConflict();
j(function() {
j('main-navigation.dd-menu #menu-main-menu .menu-item-has-children > .sub-menu').wrapInner('<li class=""><div class="megamenu-container container"><div class="row"></div></div></li>');
});
</script>
This item will now have a duplicate wrapper
1. The default blog post has the necessary html wrapper and css for the navigation
<nav class="main-navigation dd-menu toggle-menu">
<ul id="menu-main-menu" class="menu-main-menu">
<li>Home</li>
<li>About Us</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children >
Books
<ul class="sub-menu">
<li>
<div class="megamenu-container container">
<div class="row">
<li>
<div class="megamenu-container container">
<div class="row">
<li>Rental</li>
<li>New</li>
<li>Used</li>
</div>
</div>
</li>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
How to remove the duplicate wrapper so that it will only have a single wrapper?

Related

Navbar dropdown moving to extreme left after putting $('#header').load('header.html') script

My navbar dropdown is moving towards the extreme left and also not opening properly after adding this script, when i remove the script and run it like a normal static html page it is running completely fine, Please help if you can, it would save me a lot of time in this
$(function() {
$('#header').load('header.html');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
</script>
HERE IS HTML OF MY NAVBAR
<header class="header-area">
<div class="main-header-area">
<div class="classy-nav-container breakpoint-off">
<div class="container">
<!-- Classy Menu -->
<nav class="classy-navbar justify-content-between" id="robertoNav">
<!-- Logo -->
<a class="nav-brand" href="#"><img src="./img/core-img/logo.png" alt=""></a>
<!-- Navbar Toggler -->
<div class="classy-navbar-toggler">
<span class="navbarToggler"><span></span><span></span><span></span></span>
</div>
<!-- Menu -->
<div class="classy-menu">
<!-- Menu Close Button -->
<div class="classycloseIcon">
<div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
</div>
<!-- Nav Start -->
<div class="classynav">
<ul id="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Products
<ul class="dropdown">
<li>Item
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>-Double Width Tower
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Item</li>
<li>Item
<ul class="dropdown">
<li>dropdow</li>
<li>dropdown</li>
<li>dropdown</li>
</ul>
</li>
<li>-other accessories
<ul class="dropdown">
<li>dropdown</li>
</ul>
</li>
</ul>
</li>
<li>Ladders
<ul class="dropdown">
<li>dropdown</li>
<li>dropdown</li>
<li>dropdown</li>
</ul>
</li>
<li>Accessories
<ul class="dropdown">
<li>- dropdown</li>
<li>- dropdown Item</li>
<li>- dropdown</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<!-- Nav End -->
</div>
</nav>
</div>
</div>
</div>
</header>

Multilevel sidebar menu using JS/jquery

I need to have a responsive sidebar navigation (as part of making the website responsive) for a multilevel menu of depth 3. The html markup is as below,
<nav>
<div data-level="1">
<ul>
<li class="main-menu">
Level1
<div data-level="2">
<ul>
<li class="submodule">
example1.1
<div data-level="3">
<ul>
<li>example1.1.1</li>
<li>example1.1.2</li>
<li>example1.1.3</li>
</ul>
</div>
</li>
<li class="submodule">
example1.2
<div data-level="2">
<ul>
<li>example1.2.1</li>
<li>example1.2.2</li>
<li>example1.2.3</li>
</ul>
</div>
</li>
<li class="submodule">
example1.3
<div data-level="2">
<ul>
<li>example1.3.1</li>
<li>example1.3.2</li>
<li>example1.3.3</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
Level2
<div data-level="2">
<ul>
<li>
example2.1
<div data-level="3">
<ul>
<li>example2.1.2</li>
<li>example2.1.3</li>
<li>example2.1.4</li>
</ul>
</div>
</li>
<li>
example2.2
<div data-level="2">
<ul>
<li>example2.2.1</li>
<li>example2.2.2</li>
<li>example2.2.3</li>
</ul>
</div>
</li>
<li>
example2.3
<div data-level="2">
<ul>
<li>example2.3.1</li>
<li>example2.3.2</li>
<li>example2.3.4</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
At first menu shows only the top level,
Level1
Level2
When Level1 is clicked menu should show,
Back to Main Menu
example 1.1
example 1.2
When example1.1 is clicked,
Back to sublevel
example1.1.1
example1.1.2
example1.1.3
Each of back button takes to the menu before.
How to do the navigation using JS/jQuery?

It was necessary to adjust your navigation a little bit - the navigation for Level 2 was missing the submodule class. In addition you could consider to adjust your usage of <div data-level="3"> as you only use it for the 2nd and 3rd sublevel navigation while the 1st sublevel is in a <div data-level="2">. The following navigation fulfills your requirements while it is not complete - you can adjust it so a visible sublevel navigation gets toggled when the main navigation gets clicked. I already took care about the issue to only have one main navigation and submodule navigation visible at the same time.
$(".main-menu").on("click", function() {
if ($(".main-menu").not(this).find(".submodule").is(":visible")) {
$(".main-menu").not(this).find(" > div[data-level='2'], .submodule").hide();
}
$(this).find(" > div[data-level='2'], .submodule").toggle();
});
$(".submodule").on("click", function(e) {
e.stopPropagation();
$(".submodule").not(this).each(function() {
if ($(this).find(" > div[data-level='3'], > div[data-level='2']").is(":visible")) {
$(this).find(" > div[data-level='3'], > div[data-level='2']").hide();
}
});
$(this).find(" > div[data-level='3'], > div[data-level='2']").toggle();
});
$(".submodule.back").on("click", function(e) {
e.stopPropagation();
$(this).closest(".main-menu").find(" > div[data-level='2'], .submodule").hide();;
});
$(".back").not(".submodule").on("click", function(e) {
e.stopPropagation();
$(this).closest(".submodule").find(" > div[data-level='3'], > div[data-level='2']").hide();
});
div[data-level ="2"]{
display:none;
}
div[data-level ="3"]{
display:none;
}
.submodule {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div data-level="1">
<ul>
<li class="main-menu">
Level1
<div data-level="2">
<ul>
<li class="submodule back">
Back to main menu
</li>
<li class="submodule">
example1.1
<div data-level="3">
<ul>
<li class="back">Back to sublevel</li>
<li>example1.1.1</li>
<li>example1.1.2</li>
<li>example1.1.3</li>
</ul>
</div>
</li>
<li class="submodule">
example1.2
<div data-level="2">
<ul>
<li class="back">Back to sublevel</li>
<li>example1.2.1</li>
<li>example1.2.2</li>
<li>example1.2.3</li>
</ul>
</div>
</li>
<li class="submodule">
example1.3
<div data-level="2">
<ul>
<li class="back">Back to sublevel</li>
<li>example1.3.1</li>
<li>example1.3.2</li>
<li>example1.3.3</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="main-menu">
Level2
<div data-level="2">
<ul>
<li class="submodule back">
Back to main menu
</li>
<li class="submodule">
example2.1
<div data-level="3">
<ul>
<li class="back">Back to sublevel</li>
<li>example2.1.2</li>
<li>example2.1.3</li>
<li>example2.1.4</li>
</ul>
</div>
</li>
<li class="submodule">
example2.2
<div data-level="2">
<ul>
<li class="back">Back to sublevel</li>
<li>example2.2.1</li>
<li>example2.2.2</li>
<li>example2.2.3</li>
</ul>
</div>
</li>
<li class="submodule">
example2.3
<div data-level="2">
<ul>
<li class="back">Back to sublevel</li>
<li>example2.3.1</li>
<li>example2.3.2</li>
<li>example2.3.4</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>

Nested collapse

I'm trying to collapse a nested menu with jQuery. I read this answer and, to me, it appears to be similar to my solution. The problem is that mine doesn't work.
What I think I'm saying with my JavaScript code is: "hey, when a user clicks on a li that is the parent of a ul.submenu, get its ul.submenu children and attach the slideToggle only to it". But, as you can see from the snippet, it closes also the parent ul.submenu and I can't understand why.
$(document).ready(function () {
$('.submenu').hide();
$('.submenu').parent('li').click(function () {
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>

You want to stop the click event from bubbling up the DOM and triggering the click handler on the parent. Use .stopPropagation() for that:
$(document).ready(function() {
$('.submenu').hide();
$('.submenu').parent('li').click(function(e) {
e.stopPropagation()
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>

Combine Navigation UL jQuery Function

I am trying to write a function that will combine two children ul#level_2and append them to their parent li#level_1 within a dropdown #navigation.
I currently have the following which does the job, but it means I have to manually target each category. I'm sure there is a far shorter way to produce the same results with very little code.
$('li#furniture ul.level_2').children('li').appendTo('li#furniture ul.level_2:first');
$('li#furniture ul.level_2').children('li').not(':first').remove();
Here is a shortened version of my current html structure & below is the desired result:
Simple Current HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2">
Link A
</li>
</ul>
<ul class="level_2">
<li class="level_2">
Link B
</li>
</ul>
</div>
</li>
</ul>
</div>
Desire HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<ul class="level_2">
<li class="level_2">
Link A
</li>
<li class="level_2">
Link B
</li>
</ul>
</li>
</ul>
</div>
Full Detailed HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1 furniture">
Furniture
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 sofa">
Sofa
</li>
</ul>
<ul class="level_2">
<li class="level_2 bed">
Bed
</li>
</ul>
</div>
</li>
<li class="level_1 bathroom">
Bathroom
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 shower">
<a href="#">Shower/a>
</li>
</ul>
<ul class="level_2">
<li class="level_2 bath">
Bath
</li>
</ul>
</div>
</li>
</ul>
</div>

This should do what you need.
var wrapper = $(".subnav_wrapper").contents();
$(".subnav_wrapper").replaceWith(wrapper );
$('ul.level_2').children('li').appendTo('ul.level_2:first');
$('ul.level_2').not(':first').remove();
JSFIDDLE DEMO

Foundation top bar issue: The menu items floats down when added more menu items

In Zurb foundation, I've found top-bar to be working good. But whenever large no of menu Items are added, the menu items float down instead of collapsing.
Normal Image:
Issue Image:
Expected Image:
Code:
<div class="fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">WIKISAN
<ul class="dropdown">
<li>Choose Another Program</li>
<li>Home</li>
</ul>
</li>
<li class="has-dropdown">Organization
<ul class="dropdown">
<li>List Organization</li>
<li>Add Organization</li>
</ul>
</li>
<li class="has-dropdown">Group
<ul class="dropdown">
<li>List Group</li>
<li>Add Group</li>
</ul>
</li>
<li class="has-dropdown">Individual
<ul class="dropdown">
<li>List Individual</li>
<li>Add Individual</li>
<li>Add Individual To Program</li>
</ul>
</li>
<li class="has-dropdown">Program
<ul class="dropdown">
<li class="has-dropdown">Kisan
<ul class="dropdown">
<li>Kisan Training Form</li>
<li>Kisan Training List </li>
<li>Kisan Leverage Form</li>
<li>Kisan Leverage List</li>
<li>Kisan Asset </li>
<li>Kisan Seed </li>
</ul>
</li>
</ul>
</li><li class="has-dropdown">Settings
<ul class="dropdown">
<li>Land Unit Converter</li><li>Add Indicator</li><li>Add District</li><li class="has-dropdown">Individual Lookup
<ul class="dropdown">
<li>Individual Activity</li>
<li>Individual Education</li>
<li>Language</li>
<li>Latrine Type</li>
<li>Occupation List</li>
<li>Project List</li>
<li>Religion</li>
<li>Social Group</li>
</ul>
</li><li class="has-dropdown">Organization Lookup
<ul class="dropdown">
<li>Organization Category</li>
<li>Organization Component</li>
<li>OCAT Stage List</li>
<li>Organization Sector</li>
<li>Organization Type</li>
</ul>
</li><li class="has-dropdown">Group Lookup
<ul class="dropdown">
<li>Group Registration</li>
<li>Group Sector</li>
<li>Group Type</li>
</ul>
</li><li class="has-dropdown">Training Lookup
<ul class="dropdown">
<li>Training Sector</li>
<li>Beneficiary Type</li>
<li>Training Type</li>
</ul></li><li class="has-dropdown">Leverage Lookup
<ul class="dropdown">
<li>Leverage Scheme</li>
</ul></li></ul></li> <li class="has-dropdown">Report
<ul class="dropdown">
<li>Report Dashboard</li>
<li>Summary Query Report</li>
</ul>
</li>
</ul>
<ul class="right">
<li class="has-dropdown"> Logged in as Sujit Prasad Baniya
<ul class="dropdown">
<li>Change Password</li><li>User Location Settings</li><li class="has-dropdown">Admin
<ul class="dropdown"><li>Add users</li>
<li>List users</li>
<li>Set Program Targets</li>
<li>Set Default Location</li>
<li>Query Log Report</li><li>Debug Mode On</li><li>Add Program</li>
<li>List Program</li>
<li>Add Activity</li>
<li>Add Activity To Program</li></ul></li>
<li>Logout</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Here is the code that generated following result

Categories