jQuery menu aim - Sub menu did not work properly - javascript

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%
}

Related

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 4 menu-dropdown and sub-menu-dropdown to have same height

I'm using Bootstrap 4 and trying to get menu-dropdown and sub-menu-dropdown to have equal heights.
So far, I manage to get menu-dropdown height to be equal to sub-menu-dropdown and not the other way around using jQuery. How do I manage to make it look like this as shown below:
JSFiddle: https://jsfiddle.net/g9thp3j5/
HTML:
<div id="main-nav" class="justify-content-end">
<ul id="menu-main-menu" class="navbar-nav">
<li class="menu-item current-menu-item current_page_item menu-item-home active nav-item">Main Menu 1
</li>
<li class="menu-item menu-item-has-children dropdown nav-item">Main Menu 2
<ul class="dropdown-menu" role="menu">
<li class="menu-item menu-item-has-children dropdown nav-item">Menu 1
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item">Sub Menu 1</li>
<li class="menu-item nav-item">Sub Menu 2</li>
<li class="menu-item nav-item">Sub Menu 3</li>
<li class="menu-item nav-item">Sub Menu 4</li>
<li class="menu-item nav-item">Sub Menu 5</li>
<li class="menu-item nav-item">Sub Menu 6</li>
</ul>
</li>
<li class="menu-item menu-item-has-children dropdown nav-item">Menu 2
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item">Sub Menu 11</li>
<li class="menu-item nav-item">Sub Menu 12</li>
<li class="menu-item nav-item">Sub Menu 13</li>
<li class="menu-item nav-item">Sub Menu 14</li>
<li class="menu-item nav-item">Sub Menu 15</li>
<li class="menu-item nav-item">Sub Menu 16</li>
<li class="menu-item nav-item">Sub Menu 17</li>
</ul>
</li>
<li class="menu-item nav-item">Menu 3
</li>
</ul>
</li>
<li class="menu-item nav-item">Main Menu 3</li>
<li class="menu-item nav-item">Main Menu 4</li>
</ul>
</div>
CSS:
.navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-nav > li {
margin: 0 15px;
}
.dropdown-menu .dropdown-toggle::after {
border-bottom: 0.3em solid transparent;
border-left: 0.3em solid;
border-top: 0.3em solid transparent;
}
.dropdown-menu.show {
border: 1px solid #999;
background-color: #ffffff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
position: relative;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
background-color: #ffffff;
border: 1px solid #999;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>.dropdown-menu {
display: block;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>a:after {
border-left-color: #fff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
float: none;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
JS:
$("#main-nav > ul > li").each(function(){
var maxHeight = 0;
var myUl=$("ul", $(this));
myUl.each(function(){
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
myUl.height(maxHeight);
});

Hover not working on dropdown menu

I having problem with this dropdown menu, when you click on forms(link) open a menu, and if you move the out of the forms(links) the color change to blue and is hard to see it
any ideas how to fixed
Demo: http://jsfiddle.net/27Kgq/
HTML:
<nav id="menu">
<ul>
<li>Home</li>
<li>Forms
<ul id="smenu">
<li><a href="#" >Car Form</a></li>
<li>Job Fomr </li>
<li>Test Form </li>
<li>Forms </li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
nav#menu
{
width:192px;
background:#FFF;
padding:0px;
margin:-7px 0px 0px 0px;
}
nav#menu a
{
color:#18819c;
text-decoration:none;
display:block;
height:100%;
margin: -10px 0px 0px -10px;
padding: 10px 0px 10px 10px;
}
nav#menu ul li
{
width: 192px;
margin: 5px 0px -8px -10px;
padding: 10px 0px 0px 10px;
border-bottom:2px solid #c9dce1;
}
nav#menu ul li:hover
{
background:#0f7691;
color:#FFF !important;
}
nav#menu ul li a:hover
{
color:#FFF;
}
#smenu {
display:none;
background:#FFF;
margin: 0px 0px 0px -10px;
padding: 0px 0px 0px 30px;
}
#smenu ul
{
margin:0;
}
#smenu ul li a:hover
{
background:#FFF;
}
JS:
$(document).ready(function(){
$('#showHide').click(function(){
$('#smenu').slideToggle('slow');
});
});

Add this to your css
nav#menu ul li:hover>a
{
color:#FFF;
}

You're doing it wrong. Make your HTML like this
<nav id="menu">
<ul>
<li>Home</li>
<li>Forms</li>
<li id="smenu">
<ul>
<li><a href="#" >Car Form</a></li>
<li>Job Fomr </li>
<li>Test Form </li>
<li>Forms </li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>

Use this selector nav#menu ul li:hover>a
See demo here
http://jsfiddle.net/27Kgq/1/

<li>Forms
You need to close out your '< li>' tag. Always create the closing tag at the same time as your opening tag with HTML or XML.

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

Categories