We Keep Coding

Change on hover effect to click to showdropdown list

Ok, I have a dropdown list which appears 'on hover', is there a way to change it to have it appear 'on click' instead. Ideally, CSS only, but open to JS options as well. If I could push the boat out further I would also like a cross in the top right-hand corner to close the dropdown list.
I have made a fiddle here so that you can see my current 'on hover' setup
current CSS
ul {
padding: 15px;
list-style: none;
text-align: center;
}
.navigationWrap ul li {
width: 100%;
float: left;
color: #000;
font-size: 16px;
position: relative;
}
.navigationWrap ul li a {
text-decoration: none;
color: #000;
display: block;
}
.navigationWrap ul li a:hover {
color: #000;
background-color: #e6ffe6;
}
.navigationWrap ul li ul.subNav {
position: absolute;
width: 95%;
padding: 10px;
background-color: #fff;
border: #4399fc solid 1px;
display: none;
z-index: 999;
left: 0;
top: 100%;
text-align: left;
max-height: 350px;
overflow: auto;
overflow-x: hidden;
}
.navigationWrap ul li ul.subNav li {
float: left;
width: 100%;
font-size: 20px;
letter-spacing: 1px;
padding-bottom: 10px;
}
.navigationWrap ul li ul.subNav a {
float: left;
width: 100%;
transition: all 0.3s ease-in-out;
display: block;
}
.navigationWrap ul li ul.subNav li a:hover {
color: #000;
padding-left: 10px;
}
.navigationWrap ul li ul.subNav li.active a {
color: #04A000;
}
.navigationWrap ul li.dropdown:hover ul.subNav {
display: block;
}
The HTML code
<div class="navigationWrap">
<ul>
<li class="dropdown">☰ See Options<ul class="subNav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>
<p></p>
</li>
<li>Option 6</li>
<li>Option 7</li>
</ul>
</li>
</ul>
</div>
Many thanks, Jason.

It's very much possible to using JavaScript. I did by jQuery. I closed dropdown if user click outside of the dropdown container.
Here is JS code.
$(function(){
$('.dropdown .dropdown-toggle').on('click', function(e){
e.preventDefault;
e.stopPropagation;
$(this).parents('.dropdown').toggleClass('show');
});
// Remove dropdown if click outside of dropdown
const $menu = $('.dropdown');
$(document).mouseup(e => {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&& $menu.has(e.target).length === 0) // ... nor a descendant of the container
{
$menu.removeClass('show');
}
});
});
CSS change.
/* Before */
.navigationWrap ul li.dropdown:hover ul.subNav {
display: block;
}
/* After */
.navigationWrap ul li.dropdown.show ul.subNav {
display: block;
}
Here is HTML.
<div class="navigationWrap">
<ul>
<li class="dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">☰ See Options</a>
<ul class="subNav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>
<p></p>
</li>
<li>Option 6</li>
<li>Option 7</li>
</ul>
</li>
</ul>
</div>
Here is the CodePen.

You can do this
We toggle class (add/remove) and change display value via css
document.querySelector('.dropdown').onclick = () => {
document.querySelector('.dropdown').classList.toggle('show');
};
If class .show exists then display: block
.navigationWrap ul li.show ul.subNav{
display: block;
}
Check this out

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>

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>

Submenu with jquery is not working as it should

My process:
I´m using jQuery for the hover effect, when I hover the mouse in list item I want to find for a submenu and then I use the fadeToggle effect.
Its like, When I hover my mouse it will look for children list items and if its displayed it will hide if its hidden it will display.
And I use the stop method to avoid some strange effects if people pass very fast over the menu over and over again.
My issue:
I think I thought correctly but unfortunately I´m having a issue.
The submenu items are appear behind other elements, behind the #banner-container, so the submenu items are not visible.
I have tried to play with the positions, but so far without success, does anyone know how to solve this problem?
My jsfiddle where you can see my problem:
http://jsfiddle.net/jcak/9EcnL/6/
html:
<nav id="menu">
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Procuts
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
jQuery:
$('li').hover(function(){
$(this).find('ul>li').stop().fadeToggle(300);
});
CSS:
#menu ul li ul li {display:none;}
#menu-container
{
background:green;
width:100%;
height:46px;
float:left;
z-index:7;
}
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
float:left;
height:46px;
line-height:46px;
font-weight:300;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
#menu ul li a:hover
{
color:#fff;
}

You probably want something like this, right?
http://jsfiddle.net/9EcnL/3/
Your javascript was fine, you just forgot to add in the jQuery library in the jsfiddle options. I put in some CSS to make it so that the submenus displayed a little better.
#menu ul li
{
display: inline-block;
float:left;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
#menu ul li a:hover
{
color:#fff;
}
#menu ul li ul {
position: absolute;
left: 0;
-webkit-padding-start: 0;
width: 300px;
}
#menu ul li ul li
{
color:#fff;
}

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