We Keep Coding

From drop-list lists show only the selected list and its subcategories

I want to show only the entire dropdown list, but when you select an option, the remaining list is removed and remains only selected is displayed. I'll show you the current code, all I want is when I click on "Main Item One", the "Main Item Two" option disappears and show only "Main Item One" with options. Or when I click on "Main Item Two" show only "Main Item Two" with subcategory.
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function() {
// get the first submenu and toggle using classes
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
}
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .dropbtn {
background-color: blue;
color: #fff;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
}
.dropdown .dropbtn i {
margin-left: 30px;
color: #8391ab;
}
.dropdown .dropbtn .arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #8191aa;
margin: 100%;
padding-top: 4px;
}
.dropdown .dropbtn-two {
background: red;
}
.dropdown .dropbtn-three {
background: yellow;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
}
.dropdown-content a:hover {
background-color: #F8F8F8;
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.8;
width: 100%;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.6s;
}
ul {
list-style: none;
}
<div class="dropdown">
<button class="dropbtn dropbtn-one">
DropDown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
Main Item One
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
Main Item Two
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
Main Item Two
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
</ul>
</div>
</div>

Inside the click event handler you can get a reference to the parent li element of the selected option using
e.target.parentNode
Now if you loop over the complete list of options
document.querySelectorAll(".item-has-children")
and compare it to the reference you can hide the remaining options.
Here's some code:
var clicked = false;
var allHasChildren = document.querySelectorAll(".item-has-children a");
for (var x = 0; x < allHasChildren.length; x++) {
allHasChildren[x].onclick = function(e) {
var subMenu = this.parentNode.getElementsByClassName("sub-menu")[0];
if (subMenu.classList.contains('selected')) {
subMenu.classList.remove("selected");
} else {
subMenu.classList.add("selected");
}
var allOptions = document.querySelectorAll(".item-has-children");
if (!clicked) {
clicked = true;
var currentOption = e.target.parentNode;
for (var a = 0; a < allOptions.length; a++) {
if (allOptions[a] != currentOption) {
allOptions[a].style.display = "none";
}
}
} else {
clicked = false;
for (var a = 0; a < allOptions.length; a++) {
allOptions[a].style.display = "block";
}
}
}
}
document.getElementsByClassName("dropdown")[0].onmouseout = function() {
if (clicked && window.getComputedStyle(document.getElementsByClassName("dropdown-content")[0], null).getPropertyValue("display") == "none") {
var allOptions = document.querySelectorAll(".item-has-children");
for (var a = 0; a < allOptions.length; a++) {
allOptions[a].style.display = "block";
}
var subMenu = document.getElementsByClassName("sub-menu");
for (var a = 0; a < subMenu.length; a++) {
subMenu[a].classList.remove("selected");
}
clicked = false;
}
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown .dropbtn {
background-color: blue;
color: #fff;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
}
.dropdown .dropbtn i {
margin-left: 30px;
color: #8391ab;
}
.dropdown .dropbtn .arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #8191aa;
margin: 100%;
padding-top: 4px;
}
.dropdown .dropbtn-two {
background: red;
}
.dropdown .dropbtn-three {
background: yellow;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
}
.dropdown-content a:hover {
background-color: #F8F8F8;
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.8;
width: 100%;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: block;
transition: transform 0.6s;
}
ul {
list-style: none;
}
<div class="dropdown">
<button class="dropbtn dropbtn-one">
DropDown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
Main Item One
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
Main Item Two
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
<div class="hr2"></div>
<li class="item-has-children">
Main Item Two
<ul class="sub-menu">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
<li>Sub Item Four</li>
<li>Sub Item Five</li>
<li>Sub Item Six</li>
</ul>
</li>
</ul>
</div>
</div>

How can I expand the dropdown list wider than the title

I am trying to make a simple dropdown menu using Javascript that slides up and down when the user hovers over the title.
It all works OK as long as the dropdown items are no wider than the title. But I cannot work out how to accommodate wider dropdown items, other than to hard code the width of all the items in the relevant list.
Is there a better way to do this (my code is below).
$(document).ready(function() {
$(document).click(function(event) {
var text = $(event.target).text();
});
$("nav li").hover(
function() {
$(this)
.find("ul>li")
.stop()
.slideDown(400);
},
function() {
$(this)
.find("ul>li")
.stop()
.slideUp(400);
}
);
});
ul {
left: 0;
margin: 0;
padding: 0; /* to prevent the menu indenting - ul has padding by default */
list-style: none;
}
ul li {
float: left;
height: 30px;
line-height: 30px;
text-align: center;
background-color: purple;
width: 100px;
}
ul li a {
color: #fff;
text-decoration: none;
}
ul li li {
background-color: purple;
color: #fff;
text-decoration: none;
display: none;
}
ul li li:hover {
background-color: green;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div>
<nav>
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Extra Extra Wide Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
<li>FAQ
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Help</li>
</ul>
</nav>
</div>

In you css where ul li li add width
ul li li {
background-color: purple;
color: #fff;
text-decoration: none;
display: none;
width: 200px;
}
$(document).ready(function() {
$(document).click(function(event) {
var text = $(event.target).text();
});
$('nav li').hover (
function() {
$(this).find('ul>li').stop().slideDown(400);
},
function() {
$(this).find('ul>li').stop().slideUp(400);
}
);
});
ul {
left: 0;
margin: 0;
padding: 0; /* to prevent the menu indenting - ul has padding by default */
list-style: none;
}
ul li {
float: left;
height: 30px;
line-height: 30px;
text-align: center;
background-color: purple;
width: 100px;
}
ul li a {
color: #fff;
text-decoration: none;
}
ul li li {
background-color: purple;
color: #fff;
text-decoration: none;
display: none;
width: 200px
}
ul li li:hover {
background-color: green;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div>
<nav>
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Extra Extra Wide Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
<li>FAQ
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Help</li>
</ul>
</nav>
</div>

Vertical menu dropdown that stays open on sub menu pages

I've been having trouble trying to wrap my head around how to get my menu sub items to stay open when on the active page. I've seen similar issues with resolutions but I can't seem to get them to work when I implement them, so I do apologise for the question being asked before. I'm using Jquery to open the sub menu items, allowing more than one to be open at any time and also closed at any time, the only issue is when a sub menu item is clicked the menu collapses and i'd like it to stay open when that page is visited. I've attached a JSFiddle to this so you can visualise what my questions is. Thank you, all help is greatly appreciated!
$(document).ready(function(e) {
$('.has-sub').click(function() {
$(this).toggleClass('open');
});
});
body {
font-family: sans-serif;
}
.left-nav {
width: 250px;
/*change to 100% of contain*/
background-color: gray;
}
.left-nav ul {
padding: 0px;
}
.left-nav li {
list-style: none;
}
.left-nav a {
display: block;
padding: 10px 0px 10px 20px;
text-decoration: none;
color: #fff;
}
/*hiding sub menu items*/
.left-nav ul ul {
display: none;
}
/*giving jquery a target*/
.left-nav ul li.open ul {
display: block;
}
/*arrow*/
.left-nav .has-sub:before {
content: '\203A';
float: right;
color: #fff;
margin-top: 10px;
margin-right: 40px;
/*to make it move*/
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.left-nav li.open:before {
content: '\2039';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-nav">
<ul>
<li class="has-sub">1st
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li class="has-sub">2nd
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>
</nav>

So what you need to do is to stop the propagation of the event when the user clicks the sub menu item using stopPropagation
$(document).ready(function(e) {
$('.has-sub').click(function() {
$(this).toggleClass('open');
});
// Just add this
$('.has-sub li a').click(function (e) {
e.stopPropagation();
});
});
body {
font-family: sans-serif;
}
.left-nav {
width: 250px;
/*change to 100% of contain*/
background-color: gray;
}
.left-nav ul {
padding: 0px;
}
.left-nav li {
list-style: none;
}
.left-nav a {
display: block;
padding: 10px 0px 10px 20px;
text-decoration: none;
color: #fff;
}
/*hiding sub menu items*/
.left-nav ul ul {
display: none;
}
/*giving jquery a target*/
.left-nav ul li.open ul {
display: block;
}
/*arrow*/
.left-nav .has-sub:before {
content: '\203A';
float: right;
color: #fff;
margin-top: 10px;
margin-right: 40px;
/*to make it move*/
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.left-nav li.open:before {
content: '\2039';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-nav">
<ul>
<li class="has-sub">1st
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li class="has-sub">2nd
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>
</nav>

Use e.target and the methods is() and hasClass() to check the element you are clicking:
$(document).ready(function() {
$('.has-sub').click(function(e) {
var val = $(e.target).parent();
if (val.is("li") && val.hasClass("has-sub")) {
$(val).toggleClass('open');
}
})
})
body {
font-family: sans-serif;
}
.left-nav {
width: 250px;
/*change to 100% of contain*/
background-color: gray;
}
.left-nav ul {
padding: 0px;
}
.left-nav li {
list-style: none;
}
.left-nav a {
display: block;
padding: 10px 0px 10px 20px;
text-decoration: none;
color: #fff;
}
/*hiding sub menu items*/
.left-nav ul ul {
display: none;
}
/*giving jquery a target*/
.left-nav ul li.open ul {
display: block;
}
/*arrow*/
.left-nav .has-sub:before {
content: '\203A';
float: right;
color: #fff;
margin-top: 10px;
margin-right: 40px;
/*to make it move*/
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
.left-nav li.open:before {
content: '\2039';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="left-nav">
<ul>
<li class="has-sub">
1st
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li class="has-sub">2nd
<!-- First nest -->
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>
</nav>

Show submenu with css

this is my menu. I would like to show the submenu (in the last item) when I pass the mouse over the last item. I'm trying to do it with css only but it doesn't work. this is the code
#submenu {
display: block;
position:absolute;
float:right;
right:26px;
background-color:#f1f3f5;
width:21%;
}
#submenu li {
border-bottom: 1px solid #c2c5c9;
padding: 5px 5px;
text-align:right;
}
#submenu li:first-child {
padding-top: 10px;
}
#submenu li:last-child {
border-bottom: none;
}
#submenu li a {
border-right: 0 !important;
padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
display:block;
}
<nav>
First item
Second item
<a href="#" class="last" target="_self">Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</a>
</nav>
Is it possibile to show/hide the submenu when I mouseover/mousout on the last nav item?

This is how you can do this:
nav a.last:hover+#submenu { display:block;}
Complete running example:
#submenu {
display: none;
position:absolute;
float:right;
right:26px;
background-color:#f1f3f5;
width:21%;
}
#submenu li {
border-bottom: 1px solid #c2c5c9;
padding: 5px 5px;
text-align:right;
}
#submenu li:first-child {
padding-top: 10px;
}
#submenu li:last-child {
border-bottom: none;
}
#submenu li a {
border-right: 0 !important;
padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
display:block;
}
nav a.last:hover+#submenu { display:block;}
<nav>
First item
Second item
<a href="#" class="last" target="_self">Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</a>
</nav

<a> can't be nested inside another <a>. You html should be like following.
Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
and css should be
nav .last:hover + #submenu {
display: block;
}

#submenu { display:block; position:absolute;float:right;right:26px;background-color:#f1f3f5;width:21%;}
#submenu li { border-bottom: 1px solid #c2c5c9; padding: 5px 5px; text-align:right;}
#submenu li:first-child { padding-top: 10px;}
#submenu li:last-child { border-bottom: none;}
#submenu li a {border-right: 0 !important;padding:5px 2px 0 0;}
#submenu { display:none;}
nav .parent:hover #submenu { display:block;}
<html>
<nav>
First item
Second item
<span class="parent">
Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</span>
</nav>
</html>

Hide and Show list on buttonclick

I am trying to hide and show a list from a certain point. But it is not working. I am using jquery .toggle to be able to get this effect but for some reason the list items wont budge. Really need an explanation on this and why it isnt working.
CSS:
div#right-column-sidebar{position: absolute; top: 840px; right: -140px}
div#right-column-sidebar ol{position:absolute; right: 150px;margin:
10px 0 10px 10px; font-size: 20px; color: red;list-style-type:none}
div#right-column-sidebar ol li {list-style-type:none;margin: 10px 0 10px 0; border-
bottom: 1px dotted grey; width: 200px; display: block;}}
div#right-column-sidebar ol li a{font-size: 60%; color: blue;margin-left: 20px}
div#right-column-sidebar ol li:nth-child(11){margin-left:}
div#right-column-sidebar ol li a:hover{text-decoration: underline;}
a.button {
border: 1px solid lightgrey;no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
HTML:
<div id="right-column-sidebar">
<ol>
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
<li>Title 5</li>
<li>Title 6</li>
<li>Title 7</li>
<li>Title 8</li>
<li>Title 9</li>
<li>Title 10</li>
<li>Title 11</li>
<li>Title 12</li>
<li>Title 13</li>
<li>Title 14</li>
<li>Title 15</li>
<li>Title 16</li>
<li>Title 17</li>
<li>Title 18</li>
<li>Title 19</li>
<li>Title 20</li>
</ol>
</div>
<a class="button" href="#"><span>Show more</span></a>
JavaScript:
$('a.button').click( function() {
$('div#right-column-sidebar ol li:nth-child(1n)').toggle();
});
That's all the code and I want to hide and show the list items from a point and further down. And again I want to show them when I click again.

Try this - http://jsfiddle.net/9HXzW/1/
$('div#right-column-sidebar ol li:gt(4)').hide();
$('a.button').on("click", function() {
$('div#right-column-sidebar ol li:gt(4)').slideToggle();
});

This is working fine: http://jsfiddle.net/zn55e/1/. My guess is that you're either not loading jQuery correctly or you weirded yourself out by specifying nth-child(1n) in the Javascript - if you're going for the first item, nth-child(1) is the correct parlance.
PS: close the margin-left line at div#right-column-sidebar ol li:nth-child(11){margin-left:.

Something like this?
http://jsfiddle.net/nickaknudson/fkqgz/