We Keep Coding

Treeview design ideas [duplicate]

I want to create a list of items and sub items that are connected with lines.
So far I have done this -
ul {
list-style: none;
}
ul.sub-menu {
position: relative;
padding: 0;
margin-left: 30px;
margin-top: 10px;
}
li.item span {
position: relative;
}
ul.sub-menu li.item span::before {
content: '';
height: 100%;
width: 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
position: absolute;
bottom: 10px;
left: -10px;
z-index: -1;
}
<ul class="main">
<li class="items">Task 1</li>
<li class="items">Task 2
<ul class="sub-menu">
<li class="item"><span>Sub Task 1</span></li>
<li class="item"><span>Sub Task 2</span>
<ul class="sub-menu">
<li class="item"><span>Sub Task 1</span></li>
<li class="item"><span>Sub Task 2</span></li>
</ul>
</li>
<li class="item"><span>Sub Task 3</span></li>
</ul>
</li>
<li class="items">Task 3</li>
</ul>
As you can see, Sub Task 3 is not fully connected with its parent. How to connect this?
Note: I saw a question here and gave this as an answer. Then I saw this problem was happening.

I would do it differently like below:
.main {
overflow: hidden;
}
ul {
list-style: none;
padding: 0;
margin-left: 30px;
margin-top: 10px;
}
.item {
position: relative;
line-height: 1.2em;
}
.item::before,
.item::after,
.item:last-child .sub-menu::before{
content: '';
background: #000;
position: absolute;
}
.item::before {
width: 10px;
height: 1px;
top: 0.5em;
left: -10px;
}
.item::after {
left: 20px;
bottom: 0.6em;
top: 1.2em;
width: 1px;
}
/* the bekow will avoid the line to go down if there is no sub task (not transparent!)*/
.item:last-child > .sub-menu::before {
top: calc(0.6em - 1px);
width: 6px;
bottom: 0;
background: #fff;
left: -12px;
z-index: 1;
}
<ul class="main">
<li class="item">Task 1</li>
<li class="item">Task 2
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2</li>
</ul>
</li>
<li class="item">Sub Task 3
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2</li>
</ul>
</li>
<li class="item">Sub Task 3</li>
<li class="item">Sub Task 4</li>
</ul>
</li>
</ul>
</li>
<li class="item">Task 3</li>
</ul>

Prevent child element from triggering parent event on submenu item click

I'm trying to create a sidebar menu which triggers a submenu on parent click - this all works well, however, when I click on a child item/submenu item, the parent class collapses.
I have tried to use e.stopPropogation(); but this didn't seem to work. Please see code below.
var menu = document.getElementById('menu');
document.querySelectorAll('.item').forEach((i) => {
i.addEventListener('click', (ev) => {
ev.stopPropagation();
ev.preventDefault();
i.querySelector('.submenu').classList.toggle('submenu-active');
});
});
* {
margin: 0;
padding: 0;
}
.logo {
z-index: 0;
}
#navigation {
position: relative;
}
#menu {
background-color: #fff;
width: 90%;
position: fixed;
z-index: 1;
transition: 0.25s;
top: 0;
height: 100%;
overflow-y: scroll;
-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
}
#menu .item {
list-style: none;
padding: .6rem .8rem;
background-color: blue;
color: #fff;
border-bottom: 1px solid #fff;
}
.submenu {
display: none;
background-color: darkblue;
padding: none;
}
.submenu li {
list-style: none;
}
.menu-active {
transition: 0.5s;
left: 0 !important;
}
.submenu-active {
display: block;
}
<header>
<div class="container">
<nav id="navigation">
<div class="envisage"></div>
<ul id="menu">
<li class="item">Item 1
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 2
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 3
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 4
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 5
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
</ul>
<button id="menu-btn">
<span>Menu</span>
</button>
</nav>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

You need to use stopPropagation for the .submenu click instead of the parent click.
$(document)
.on('click', '.item', function(e) {
$(this).find('.submenu').toggleClass('submenu-active');
})
.on('click', '.submenu', function(e) {
e.stopPropagation();
});
* {
margin: 0;
padding: 0;
}
.logo {
z-index: 0;
}
#navigation {
position: relative;
}
#menu {
background-color: #fff;
width: 90%;
position: fixed;
z-index: 1;
transition: 0.25s;
top: 0;
height: 100%;
overflow-y: scroll;
-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
}
#menu .item {
list-style: none;
padding: .6rem .8rem;
background-color: blue;
color: #fff;
border-bottom: 1px solid #fff;
}
.submenu {
display: none;
background-color: darkblue;
padding: none;
position: relative;
z-index: 10;
}
.submenu li {
list-style: none;
}
.menu-active {
transition: 0.5s;
left: 0 !important;
}
.submenu-active {
display: block;
}
<header>
<div class="container">
<nav id="navigation">
<div class="envisage"></div>
<ul id="menu">
<li class="item">Item 1
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 2
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 3
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 4
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
<li class="item">Item 5
<ul class="submenu">
<li>S1</li>
<li>S2</li>
<li>S3</li>
</ul>
</li>
</ul>
<button id="menu-btn">
<span>Menu</span>
</button>
</nav>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

bootstrap mega menu, how change to onclick function and drop down item for mobile?

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>home</li>
<li class="dropdown menu-large ">
item 1<b class="caret "></b>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Glyphicons</li>
<li>Available glyphs</li>
<li class="disabled ">How to use</li>
<li>Examples</li>
<li class="divider "></li>
<li class="dropdown-header ">Dropdowns</li>
<li>Example</li>
<li>Aligninment options</li>
<li>Headers</li>
<li>Disabled menu items</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Button groups</li>
<li>Basic example</li>
<li>Button toolbar</li>
<li>Sizing</li>
<li>Nesting</li>
<li>Vertical variation</li>
<li class="divider "></li>
<li class="dropdown-header ">Button dropdowns</li>
<li>Single button dropdowns</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Input groups</li>
<li>Basic example</li>
<li>Sizing</li>
<li>Checkboxes and radio addons</li>
<li class="divider "></li>
<li class="dropdown-header ">Navs</li>
<li>Tabs</li>
<li>Pills</li>
<li>Justified</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Navbar</li>
<li>Default navbar</li>
<li>Buttons</li>
<li>Text</li>
<li>Non-nav links</li>
<li>Component alignment</li>
<li>Fixed to top</li>
<li>Fixed to bottom</li>
<li>Static top</li>
<li>Inverted navbar</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown menu-large ">
item 2 <b class="caret "></b>
<ul class="dropdown-menu megamenu row ">
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Glyphicons</li>
<li>Available glyphs</li>
<li class="disabled ">How to use</li>
<li>Examples</li>
<li class="divider "></li>
<li class="dropdown-header ">Dropdowns</li>
<li>Example</li>
<li>Aligninment options</li>
<li>Headers</li>
<li>Disabled menu items</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Button groups</li>
<li>Basic example</li>
<li>Button toolbar</li>
<li>Sizing</li>
<li>Nesting</li>
<li>Vertical variation</li>
<li class="divider "></li>
<li class="dropdown-header ">Button dropdowns</li>
<li>Single button dropdowns</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Input groups</li>
<li>Basic example</li>
<li>Sizing</li>
<li>Checkboxes and radio addons</li>
<li class="divider "></li>
<li class="dropdown-header ">Navs</li>
<li>Tabs</li>
<li>Pills</li>
<li>Justified</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Navbar</li>
<li>Default navbar</li>
<li>Buttons</li>
<li>Text</li>
<li>Non-nav links</li>
<li>Component alignment</li>
<li>Fixed to top</li>
<li>Fixed to bottom</li>
<li>Static top</li>
<li>Inverted navbar</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

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

jQuery menu aim - Sub menu did not work properly

According to this plugin, here is what I have tried :
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"> <a data-toggle="dropdown" href="#">Explore the Monkeys</a>
<ul class="dropdown-menu" role="menu">
<li data-submenu-id="submenu-1"> Department1
<div id="submenu-1" class="popover">
<!--<h3 class="popover-title">Category1</h3> -->
<div class="popover-content">
<ul>
<li>cate1</li>
<li>cate2</li>
<li>cate3</li>
<li>cate4</li>
<li>cate5</li>
<li>cate6</li>
<li>cate7</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-4">Department4</li>
<li data-submenu-id="submenu-5">Department5</li>
</ul>
</li>
</ul>
</div>
</div>
This is CSS :
.popover {
width: 400px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
overflow: hidden;
}
.popover-content {
text-align: center;
}
.dropdown-menu {
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
Problem : Sub menu of Department1 shows only cate1,2,3,4 and cate5,6,7.
Any one know, how can I display cate5,6,7 on the right of cate1,2,3,4 like Amazon navigation menu.

The best solution would be to add a new ul for every x amount of children.
Therefore:
<ul class="main">
<li>
<ul>
<li>cate 1</li>
<li>cate 2</li>
<li>cate 3</li>
<li>cate 4</li>
</ul>
</li>
<li>
<ul>
<li>cate 5</li>
<li>cate 6</li>
<li>cate 7</li>
<li>cate 8</li>
</ul>
</li>
</ul>
And of course the css is simple:
ul.main > li{
float: left;
}
The css for making one list break like that is possible but would be very hacky.

Providing a fiddle would help greatly!
As for how you may fix this issue by adding:
.popover-content {
text-align: center;
height: 100%
}

Drop down menu - moving from CSS to be functioning using JavaScript

I have the following menu that has drop-down menus as you can see in the HTML, all the CSS is ready, I tried to make it the Drop-down functional using CSS but it is not really good, so I am trying to do that using JavaScript or something.
I am using this script, but for some reason it is not working, what am I doing wrong?
$("ul#mainMenu li").hover(function () {
$(this).parent().next("ul").show();
});
Here is the HTML
<nav>
<ul id="mainMenu"><!--Main Menu-->
<li class="first">
Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li>
<li>Crisis</li>
</ul>
</li>
<li>
Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul>
</li>
<li>
Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul>
</li>
<li>
Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul>
</li>
<li>
Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul>
</li>
<li>
Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul>
</li>
<li>
Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul>
</li>
</ul>
</nav>
CSS:
/*Main Menu*/
#mainMenu {
width: 750px;
display: inline-block;
position: relative;
cursor: default;
}
#mainMenu li {
display: inline-block;
}
#mainMenu li:before{
content: "|";
color: #606060;
margin-right: 4px;
}
#mainMenu li:first-child:before{
content: '';
}
#mainMenu a {
color: #F2F2F2;
padding: 15px 20px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
#mainMenu a:hover {
color: #C7A17B;
background-color:rgba(51,51,51,0.5);
}
#mainMenu a.active {
color: #94877B;
cursor: default;
}
/*Drop Down Menu*/
ul#mainMenu ul {
display: none;
background: #303030 url('../elements/texture.png') repeat;
border: 1px solid #272626;
position: absolute; top: 50px; right: 0; left: 0;
padding: 10px;
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
}
ul#mainMenu li ul li a {
color: #E5E5E5;
padding: 10px;
margin: 2px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#mainMenu li ul li a:hover {
background-color:rgba(71,71,71,0.3);
}

See you have to find ul in this where this belongs to hovered li:
$("ul#mainMenu li").hover(function () {
$("ul",this).show(); // <--show the ul in this li
});
Try this and see if it solves the issue.
using .find():
$("ul#mainMenu li").hover(function () {
$(this).find("ul").show(); // <--show the ul in this li
});

make change to your code below one
$("ul#mainMenu li").hover(function () {
$("ul",this).show();
});