I am having some issue getting a menu to .hide() after clicking on an element.
$(document).on("click", "div.dropdown", function() {
$(this).find("ul").show(0, function() {
$(this).find("li").click(function() {
var a = $(this).html();
$(this).parent().parent().find(".dropdown-title p").html(a);
$(this).parent().hide(); //Onclick won't hide the UL
});
$(this).mouseleave(function() {
$(this).hide();
});
});
return false;
});
div.dropdown {
margin: 0 20px 0 0;
float: left;
border-radius: 3px;
background: rgba(0, 0, 0, .1);
height: 50px;
line-height: 50px;
color: #999;
text-transform: uppercase;
position: relative;
}
div.dropdown div.dropdown-title {
padding: 0 20px;
display: inline-block;
cursor: pointer;
}
div.dropdown div.dropdown-title p {
margin: 0 20px 0 0;
float: left;
font-size: 12px;
}
div.dropdown div.dropdown-title span {
float: left;
}
div.dropdown ul {
position: absolute;
top: 50px;
left: 0;
width: 200px;
overflow-y: auto;
overflow-x: hidden;
border-radius: 0 0 3px 3px;
z-index: 1001;
border: 1px solid #ccc;
list-style-type: none;
padding: 0;
margin: 0;
}
div.dropdown ul li {
line-height: 32px;
background: #fff;
color: #999;
font-size: 12px;
white-space: nowrap;
text-transform: uppercase;
padding: 0 20px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<div class="dropdown-title">
<p>Sort By</p>
<span><i class="fa fa-caret-down" aria-hidden="true"></i></span>
</div>
<ul style="display: none;">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
</ul>
</div>
I am attempting to get the dropdown menu (the ul element) to .hide() when you click on one of the li elements in the menu, as well as when you mouseleave from the ul. Right now, just the mouseleave portion works and not when you click on one of the li elements. I am unsure of what I am overlooking, so if you see any errors or issue please let me know.
Here's the link to my fiddle
When clicking on the li the event propagating to the ul, so what really happens that the click on the li closing the list but the 'click' on the ul opens it again, you can stop the event propagation
$(document).on("click", "div.dropdown", function() {
$(this).find("ul").show(0, function() {
$(this).find("li").click(function(event) {
event.stopPropagation();
var a = $(this).html();
$(this).parent().parent().find(".dropdown-title p").html(a);
$(this).parent().hide(); //Onclick won't hide the UL
});
$(this).mouseleave(function() {
$(this).hide();
});
});
return false;
});
Related
I want a sub menu to be able to be shown when the cursor is hovered over but at the moment the sub menu is closed once the mouse is hovered over any link.
Here is the code
HTML
<div class="body">
<div class="menu">HOVER HERE</div>
<ul class="drop-down">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
CSS
.body {
width: 400px;
margin: 0 auto;
margin-top: 30vh;
font-family: Lato, sans-serif;
}
.menu {
display:block;
border: 1px solid #000;
width: 150px;
background: #000;
color:#FFF;
padding: 15px;
text-align:center;
}
ul li {
border: 1px solid #000;
width: 150px;
padding: 15px;
list-style:none;
text-align:center;
}
ul {
margin: 0;
padding: 0;
}
.drop-down {
display:none;
}
.open {
display:block;
}
JavaScript
document.addEventListener('DOMContentLoaded', function () {
var dropdownItem = document.querySelector('.menu');
var dropdown = document.querySelector('.drop-down');
dropdownItem.addEventListener('mouseenter', function (e) {
dropdown.classList.add('open');
});
dropdownItem.addEventListener('mouseleave', function () {
dropdown.classList.remove('open');
})
})
Codepen is here
https://codepen.io/Kenneman/pen/yLLPmeX
This problem has been solved a thousand times on SO, and virtually every CSS-only menu demonstrates how it's done. The submenu must be inside the hovered element. No JavaScript is necessary:
.menu:hover ul {
display: block;
}
Demo
You'll have to fiddle with styling to get the submenu background fixed, but that's the idea.
There is a dropdown menu, you need to do to submenu falls with a delay.
This is an [example][1] of how I implemented at the moment.
As soon as the button the mouse is over using setTimeout launching the countdown until the menu appears, if the cursor is removed from button, then cancel the timeout using clearTimeout.
Can't understand why it doesn't work.
Transition not working with display: none, so that's not an option.
how to fix to get it working?
The CSS transitions won't work with display: block; or display: none;. You can use jQuery .delay():
$(function () {
$("ul").hide();
$("a").mouseover(function () {
$("ul").delay(1000).fadeIn();
});
});
a {display: inline-block; text-decoration: none; padding: 5px; color: #000; border: 1px solid #ccc; border-radius: 3px; line-height: 1;}
.btn {margin-bottom: -1px;}
ul, li {margin: 0; padding: 0; list-style: none; border: 1px solid #ccc;}
ul {padding: 5px; background-color: #fff; width: 100px;}
ul li a {display: block; border-width: 0; border-top-width: 1px; border-radius: 0}
ul li:first-child a {border-top: 0;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Menu
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Lets say I have the following menu structure. I have 3 problems with it.
$('.parent ul').hide();
var current_parent;
$(document).delegate('.parent', 'click', (function() {
var $this = $(this);
if(current_parent !== undefined) {
current_parent.find('ul').slideUp();
}
current_parent = $this;
// Check if the element is visble or not
if(!$this.find('ul').is(':visible')) {
$this.find('ul').slideDown();
} else {
$this.find('ul').slideUp();
}
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="parent">menu item1
<ul>
<li class="child">Sub menu item1</li>
<li class="child parent">Sub menu item2
<ul>
<li class="child">Sub-sub menu item1</li>
</ul>
</li>
</ul>
</li>
<li class="parent">menu item2
<ul>
<li class="child">Sub menu item3</li>
</ul>
</li>
</ul>
When you click on menu item 1 the Sub-sub menu item1 is also
opened. How can this be prefented?;
When you click on Sub menu item2 the menu item1 is also closed. How can this be prefented?.
How can I make this more dynamic so that when I add deeper menu items the menu still works but without having to add things like: $('ul ul ul').slideDown(); etc.?
Could anyone help me with these problems?
Thanks in advance
You can create a drop drop down menu with jquery
I have given individual HTML, CSS and JQuery code, use it and try to understand it.
There is an outer <div id="navigation"> and inside it their is annow in it everyis main menu item andin everyis sub menu item. Furthermore you can create sub menu in sub menu also by creatingin`.
$(document).ready(function () {
$("li").click(function () {
var x = $(this).children("a:first").attr("href");
if (x != undefined)
window.location.href = x;
});
$("#nav li").hover(function () {
$(this).find("ul:first").css({
visibility: "visible",
display: "none",
}).slideDown(400);
}, function () {
$(this).find("ul:first").css({ visibility: "hidden" });
});
});
body {
font-family: Calibri, Verdana;
font-size: 16px;
color: white;
}
a {
color: inherit;
text-decoration: none;
}
#navigation {
height: 40px;
}
#nav {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ul {
list-style: none;
margin: 10px 0px 0px -5px;
padding: 0px;
display: none;
}
#nav li {
float: left;
width: 150px;
height: 30px;
padding: 10px 0px 0px 5px;
border: 0px solid transparent;
border-right-width: 1px;
border-right-color: gray;
background-color: #6397CB;
}
#nav li ul li {
width: 145px;
height: 22px;
padding: 10px 0px 8px 10px;
border: 0px solid transparent;
border-top-width: 1px;
border-top-color: gray;
}
#nav li ul li ul {
position: relative;
top: -40px;
margin-left: 145px;
color: white;
}
#nav li ul li ul li {
border: 0px solid transparent;
border-left-width: 1px;
border-left-color: gray;
border-top-width: 1px;
border-top-color: gray;
}
#nav li:hover {
background-color: lightgray;
cursor: pointer;
}
#nav li ul li:hover {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
<ul id="nav">
<li>My Name</li>
<li>About U
<ul>
<li>How U?
<ul>
<li>Your Extras</li>
</ul>
</li>
<li>Howz U?</li>
</ul>
</li>
<li>More</li>
</ul>
</div>
I've searched and tried multiple way to accomplish this to no avail...
i have provided my current code below....please feel free to critique and provide with any help necessary...
<script src="jquery.js"></script>
<div id="navigation">
<p>Leave A Note</p>
<ul id="menu">
<li>Artist<ul>
<li>Sketchbook</li><li>Music</li><li>Artwork</li><li>
Media</li><li>Words</li></ul>
</li>
<li>UI/UX Developer<ul><li>Portfolio</li><li>Resume</ul></li></div>
<!--above is the html container-->
<!--Now add javascript to control the hiding and such-->
<script>
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';
$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();
hideMenu = function() {
$('#navigation ul#menu').hide();
$('#navigation').removeClass('Open');
$('#toggle').text(showMenuText);
}
$('#toggle').click(function(event){
event.stopPropogation(); event.preventDefault();
$('#navigation ul#menu').toggle();
$('#navigation').toggleClass('open');
var toggleText = $('#toggle').text();
(toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);});
$('ul#menu > li > a').click(function(event){
$this = $(this);
if ($this.hasClass('page') ) parent.location = $this.attr('href');
if ($this.hasClass('home') ) { parent.location = '/'; }
event.preventDefault(); event.stopPropagation();
if( $this.hasClass('active') ) var justclosed = true;
$('a.active').removeClass('active').next('ul').hide();
if(!justclosed) $this.addClass('active').next('ul').show();
});
</script>
here
the javascript is not doing as what i expect it to..as the unordered lists are still showing as a list and are not hidden....any advice would be greatly appreciated!..
You're missing a closing li at this line:
<li>UI/UX Developer<ul><li>Portfolio</li><li>Resume</ul></li></div>
This should be
<li>UI/UX Developer<ul><li>Portfolio</li><li>Resume</li></ul></li></div>
Maybe this is causing the javascript issue.
Drop Down menus can be done by Pure CSS with relative and absolute elements.
Consider the following HTML:
<ul>
<li>Level 1</li>
<li>
Level 2
<ul>
<li>Level 2-1</li>
<li>Level 2-2</li>
<li>Level 2-3</li>
<li>Level 2-4</li>
<li>Level 2-5</li>
</ul>
</li>
<li>Level 3</li>
<li>Level 4</li>
<li>Level 5</li>
</ul>
Horizontal
Working jsFiddle Demo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
position: absolute;
top: 20px;
left: -1px;
display: none;
}
ul ul li + li {
margin-left: 0;
margin-top: -1px;
}
ul li {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
color: blue;
border: 1px solid blue;
width: 150px;
float: left;
text-align: center;
cursor: pointer;
height: 20px;
}
ul li + li {
margin-left: -1px;
}
ul li:hover {
background: #b0e0e6;
}
ul li:hover ul {
display: block;
}
Vertical
Working jsFiddle Demo
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
position: absolute;
top: -1px;
left: 150px;
display: none;
}
ul li {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
color: blue;
border: 1px solid #4169e1;
width: 150px;
text-align: center;
cursor: pointer;
height: 20px;
}
ul li + li {
margin-top: -1px;
}
ul li:hover {
background: #b0e0e6;
}
ul li:hover ul {
display: block;
}
I would like to do something like this: http://dreamapp.de/sites/portfolio/
At the moment this is done with an additional list item which has position: absolute. So I simply move the list item to the same place as the active list item. But this solution will only work if the content is not dynamically centered. So beside it's an ugly but working, solution, there must be a better one, right?
I thought that I've seen similar things on other website, but I couldn't find anything like this. So how could I do this better?
HTML:
<nav id="menu2" class="menu">
<ul>
<li class="marker"></li>
<li class="nav1">Home</li>
<li class="nav2">HTML/CSS</li>
<li class="nav3">JavaScript</li>
<li class="nav4">Resources</li>
<li class="nav5">Tutorials</li>
<li class="nav6">About</li>
</ul>
</nav>
jQuery:
$(".nav1 a").click(function() {
$(".marker").stop().animate({left:'8px'},200, function() {
$(".marker").stop().animate({display:'show'}, 200);
});
});
$(".nav2 a").click(function() {
$(".marker").stop().animate({'left':'118px'},200, function() {
$(".marker").stop().animate({display:'show'}, 200);
});
});
.
.
.
CSS:
.menu ul li.marker {
width: 110px;
height: 45px;
background-color: #42ff2e;
display:none;
position: absolute;
}
.menu {
width: 660px;
height: 45px;
display: block;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
overflow: hidden;
position: relative;
text-align: center;
line-height: 45px;
}
.menu ul li a {
position: relative;
display: block;
width: 110px;
height: 45px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
Think you could use this for fixed navigation item width http://jsfiddle.net/UqUBr/
(for variable navigation item width - http://jsfiddle.net/bdmjC/)
JS:
var navigation = $('nav'),
items = navigation.find('.item'),
itemWidth = 110
$(".item a").click(function() {
var item = $(this).parent()
$(".marker").stop().animate({left:items.index(item)*itemWidth},200, function() {
$(".marker").stop().animate({display:'show'}, 200);
});
});
HTML:
<nav id="menu2" class="menu">
<ul>
<li class="marker"></li>
<li class="item">Home</li>
<li class="item">HTML/CSS</li>
<li class="item">JavaScript</li>
<li class="item">Resources</li>
<li class="item">Tutorials</li>
<li class="item">About</li>
</ul>
</nav>
CSS:
nav#menu2 {
display: block;
margin: auto;
width: 660px;
position: relative;
}