I've homerolled a Javascript based nav bar (I want it to be click, not hover for mobile friendliness). I've tried to make the HTML, CSS, and Javascript as simple as possible.
I put a listener on the body to close the menu bars if you click anywhere else on the website. I'm trying to filter the listener so that it does not fire if you click on any part of the menu bar. This is to prevent the dropdowns from rolling back up when you click on an element in the dropdown.
I expect the below matcher to ONLY match items that are descendants of the top level menu element. Any advice on why this isn't working would be much appreciated.
EDIT: I understand that you can use an arbitrary function to evaluate the bubble coming up and decide on whether or not you should act on it, but I'm more interested in why the below .on() selector is not working the way I expect.
$("body").on("click", ":not(#menu *)", function (e) {
$("#menu a").next().slideUp(DROP_DOWN_TIME);
});
http://jsfiddle.net/auKzt/16/
HTML
<body>
<div>HEADER</div>
<ul id="menu" class="cf">
<li>FooafsdasiuhfauhfuahsdfFooaf sdasiuhfauhfuahsdfFooafsdasiuhfauhfuahsdf
<ul>
<li>Subitem asdasdasd 1 sadad
</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</li>
<li>Bar
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</li>
<li>Qux</li>
</ul>
<div>CONTENT</div>
<div>FOOTER</div>
</body>
JAVASCRIPT
$(document).ready(function () {
var DROP_DOWN_TIME = 200;
//Setup hidden dropdowns
$("#menu > li > a").next().toggle();
//Hide or unhide dropdowns onclick
$("#menu > li > a").click(function (e) {
$("#menu a").next().not($(e.target).next()).slideUp(DROP_DOWN_TIME);
$(e.target).next().slideToggle(DROP_DOWN_TIME);
e.stopPropagation();
});
$("body").on("click", ":not(#menu *)", function (e) {
$("#menu a").next().slideUp(DROP_DOWN_TIME);
});
});
CSS
#menu {
width: 900px;
padding: 0;
margin: 0;
}
/* Top level menu container */
#menu li {
background-color: aqua;
border: 1px solid black;
padding: 2px;
}
/* Top level menu items */
#menu > li {
display: inline-block;
float: left;
position: relative;
}
/* Submenu container */
#menu > li > ul {
position:absolute;
padding: 0;
margin: 0;
top: 100%;
left: -1px;
}
/* Submenu Items */
#menu > li > ul > li {
display: block;
float: none;
white-space: nowrap;
}
.cf:before, .cf:after {
content:" ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
It is failing because the click is being caught on the menu element. The content inside is being caught.
You need to also add the menu element
$("body").on("click", ":not(#menu, #menu *)", function (e) {
^^^^^^
Try this instead
$("body").on("click", function (e) {
if( e.taget.id !== 'menu' && !$(e.target).closest('#menu').length) {
$("#menu a").next().slideUp(DROP_DOWN_TIME);
}
});
Related
I have list of different list items so when i click on specific item from list it should move from its current position to top position using jquery animate and at the same time hide remaining list items using jquery.
$(document).ready(function() {
$(".menu").click(function() {
$("li").animate({
top: '2px'
}, 'slow');
});
});
ul>li {
list-style-type: none;
line-height: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li>Account</li>
<li>Profile</li>
<li>History</li>
</ul>
You can show click element by adding addClass and css to added class and simultaneously you can hide others li by jquery hide(). Hope it helps. I'm just adding the animation to it.
$(document).ready(function() {
$("li").click(function() {
$(this).addClass('top');
$('li').hide();
});
});
ul>li {
list-style-type: none;
line-height: 34px;
}
.top{
display:inline-block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Account</li>
<li>Profile</li>
<li>History</li>
</ul>
Inorder to animate top the element has to be able to take the css property top. So far I made the element to be capable enough to take the property top and I animated it to top while reducing the opacity using transition. These jquery this are done for the sibling li elements of the clicked one.
$(document).ready(function() {
$(".menu li").click(function() {
$(this).siblings('li').animate({
top: '-60px'
}, 'fast');
$(this).siblings('li').css({
'opacity': '0'
});
});
});
ul>li {
list-style-type: none;
line-height: 34px;
position: relative;
top: 10px;
transition: all 2s ease;
}
.menu {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li>Account</li>
<li>Profile</li>
<li>History</li>
</ul>
i have created a dropdown menu which opens on clicking the nav button. But i couldn't find a way to close the dropdown menu when the mouse clicks on the body of the page.
I you can figure it out, please help me
(function(){
var bodyEl = $('body'),
navToggleBtn= bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e){
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
active-nav is created within css and linked with menu and body
You can bind click event to body, then check if the event is generated from a particular element using event.target
var bodyEl = $('body');
navToggleBtn = bodyEl.find('.nav-toggle-btn');
$('body').on('click', function (e) {
if ($(e.target).hasClass("nav-toggle-btn")) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
e.stopPropagation();
}
else
{
//close the menu here
}
});
I don't know if it is the right solution, but I would add a div element that covers the entire page.
The menu is on top of that div, but the rest is below. If you click the div, it closes itself and the menu.
So basically, it's a lightbox (as for showing images), but without the shade. Or width a shade, because it will make your menu stand out a little more, and it will fit the expectations of disabling clicks on specific elements in the body.
Another advantage of having an extra element instead of just capturing clicks on the main level on the body, it that it won't interfere with other event handlers on the body itself, which could capture the click and therefor have unexpected results for someone who just wants to close the menu.
A rough example can be found below:
$('header > ul > li').on('click', function() {
// Deactive all menu items
$('ul.active').removeClass('active');
// Activate the one clicked.
$(this).closest('li').addClass('active');
// If there is no lightbox setup a new one.
var box = $('.lightbox');
if (box.length == 0) {
// It's just a div with a class.
$('<div>')
.prependTo($('body'))
.addClass('lightbox')
.on('click', function() {
// Lightbox clicked? Remove it, and deactivate the menu.
$('.lightbox').remove();
$('li.active').removeClass('active');
});
}
});
li {
padding: 1em;
}
header > ul > li {
display: inline-block;
vertical-align: top;
position: relative;
background-color: #eee;
}
li > ul {
display: none;
background-color: #ddd;
position: absolute;
top: 100%;
left: 0;
}
li.active > ul {
display: block;
}
.lightbox {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0, 0.2); /* Just for show */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
Header, page title
<ul>
<li>Main
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li>Other</li>
<li>About</li>
</ul>
</header>
<section>
Main content
</section>
I want to only show the sub-menu that is the child of the clicked li and button when it is clicked. Currently the click and show and hide are working but the code below shows both the sub-menus on click, I want only the child sub-menu of the li button to show on click.
<ul id="menu-main-menu" class="nav-menu">
<li class="menu-item">Menu link
<button aria-expanded="false" class="dropdown-toggle"></button>
<ul class="sub-menu">
<li class="menu-item">link1</li>
<li class="menu-item">link1</li>
</ul>
</li>
<li class="menu-item">Menu link 2
<button aria-expanded="false" class="dropdown-toggle"></button>
<ul class="sub-menu">
<li class="menu-item">link1</li>
<li class="menu-item">link1</li>
</ul>
</li>
</ul>
<div class="site-content"></div>
jQuery:
jQuery(document).ready(function ($) {
$("#menu-main-menu").on('click', 'button', function (event) {
$('ul.sub-menu').appendTo('.site-content');
if($('ul.sub-menu:visible').length)
$('ul.sub-menu').hide();
else
$('ul.sub-menu').show();
});
});
CSS:
#menu-main-menu ul.sub-menu {
display: none;
}
ul.sub-menu {
display: none;
position: absolute;
z-index: 200000;
top: 0;
left: 1.5%;
right: 1.5%;
margin: 0 auto 0 auto;
padding: 20px;
list-style: none;
}
ul.sub-menu li {
width: 24%;
display: inline-block;
padding: 8px 9px;
text-align: center;
}
ul.sub-menu .toggled-on {
display: block;
}
.site-content {
display: block;
position: relative;
}
Solution: So the solution here was to not use appendTo(), as I had to put the element back where it came from when toggled off. The solution was to merely toggle the menu item using correct position: absolute CSS for the .sub-menu and $()on('click' to toggle it.
jQuery('#menu-main-menu').on('click', 'button', function(event) {
if($(this).closest("li.menu-item").children("ul.sub-menu").length > 0)
{
$(this).closest("li.menu-item").children("ul.sub-menu").slideToggle('fast');
return false;
}
});
See it working here: http://jsfiddle.net/abdqt6d9/
The problem is that you are writing incorrect selectors for your jquery:
$('ul.sub-menu')
That means it will grab all matching elements within the page.
What you need to do is grab the corresponding li. Within your click(), the $(this) becomes the button that is clicked. Using .parent() will give you the li element. From there, search for your corresponding sub-menus within the li_element:
var $li_element = $(this).parent()
var $sub_menu = $li_element.find(".sub-menu")
if ($li_element.find(".sub-menu:visible").length > 0) {
$sub_menu.hide()
} else {
$sub_menu.show()
}
The other problem is that perhaps your styling for your sub-menu is above the buttons. so once you show it, you can no longer press the button. So you need to restyle your sub-menus.
$("ul.sub-menu") will apply to all the sub-menus, so you need to change it to only look for the sub-menu within the buttons parent. You can do this using .closest (or just .parent()) and then .find
//closest("li") will find the closest parent that is an li
//find(".sub-menu") will find the sub-menu within
$(this).closest("li").find(".sub-menu").show();
If you your button is always going to be before the sub-menu you can slim it down to just .next(".sub-menu")
$(this).next(".sub-menu").show();
I am creating a vertical accordion menu. Here is code what I had done so far. Two problems I am facing.
There is unwanted space between border and menu. It is for all li elements i.e for menu and sub menu items also.
And arrow is showing for submenu also after having following code
#menunav li > a:only-child:before { content: '';}
I trying to put arrow image for menu that having sub menus. e.g. Item 1 is having sub menus so Item 1 should have arrow not its sub menus items. And also if I have Sub-Item 1 a of Item 1, sub menus like below:
<li>Item 1
<ul>
<li>Sub-Item 1 a
<ul>
<li>Sub-Item 1 aa</li>
<li>Sub-Item 1 bb</li>
<li>Sub-Item 1 cc</li>
</ul>
</li>
<li>Sub-Item 1 b</li>
<li>Sub-Item 1 c</li>
</ul>
</li>
Then Item 1 and Sub-Item 1 a will have arrow etc.
I am not able to remove that space and putting arrow for menu that having submenu.
Can someone please suggest what should I change in jquery and css so that I can get that properly working?
CSS
#menunav{padding:0}
since we need to clear the default style of the ul element
Set #menunav, ul into li padding to 0
#menunav, #menunav ul {
padding: 0;
}
Or just reset the padding:
* {
padding: 0
}
Demo
Update
If you want to remove submenu arrow, do this:
Example:
#menunav li ul li a:before {
background: none;
}
updated demo: http://jsfiddle.net/jpcb7w5y/10/
Try this.
CSS:
#menunav {
padding: 0px;
}
#menunav li ul {
padding: 0px;
}
I think your <ul> has its own padding. Hope this helps.
Edited:
DEMO
I you want that the arrows only appears to the main menu that have the sub menu, I have this quick solution for that. Why not try putting some class on the <a> for the main menu. Hope this works.
Instead of:
#menunav li a:before {
content: "";
display: block;
background: url("http://transparency.perkinswill.com/content/images/right-arrow.png") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
Why not:
#menunav .main:before {
content: "";
display: block;
background: url("http://transparency.perkinswill.com/content/images/right-arrow.png") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
Is it possible to trigger changes to CSS of an element that is completely unrelated to the hovered div?
I have a CSS hover effect on a dropdown menu, that I also want to trigger the opacity of a div right at the bottom of the page to create a background overlay effect.
This is the CSS I'm using:
#overlay {
background:rgba(0,0,0,0.5);
position:absolute;
top:120px;
left:0;
z-index:0;
height:120%;
width:100%;
visibility:hidden;
opacity:0;
}
#menu-main-menu li.menu-parent-item:hover ul.sub-menu,
#menu-main-menu li.menu-parent-item:hover #overlay {
visibility:visible;
opacity:1;
}
The hover of the sub menu works fine, but the div #overlay is right at the bottom of the page, and doesn't get called when it's hovered.
I've tried all kinds of alternatives such as :hover > #overlay, :hover + #overlay, but nothing seems to trigger it. I also can't seem to find a definitive answer to the question.
Is it possible?
Yes. You can load this style in a php file and then use jQuery to apply the css when your div has been hovered on.
No there is no way to select parent element in css and that means that you cannot move up in hierarchy.
<ul class="hover-parent">
<li></li>
</ul>
<div>Something here</div>
<div class="target"></div>
From this point :
.hover-parent li:hover you cannot go up (to ul or div).
Selectors which you tried to use are "next":
A>B - This will select only direct B children of A
A+B This will select B immediately preceded by A
Here you can find W3C documentation of CSS selector
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
And demos:
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Notice that it will be really confusing for user that different part off app/page is changing when he is hovering something else. Bad UX idea.
You're going to have to use JavaScript to do this.
Your posted selector #menu-main-menu li.menu-parent-item:hover #overlay is looking for #overlay somewhere inside of an ancestor element of li.menu-parent-item that is somewhere inside of an ancestor element with an id of #menu-main-menu.
Using the child selector > will not work as the overlay element is not a child of the list element you're hovering in your menu from what you have described and from comment responses.
As #Paulie_D has pointed out the two target elements, the element to be hovered and the overlay element, need to adjacent siblings to use the sibling selector +. From what you have described and the comment responses they are not adjacent siblings.
I have setup a basic example for you using jQuery. This example displays the overlay as long as you are hovering any element in the .main-menu element.
HTML
<ul class="main-menu">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three
<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>
</ul>
</li>
</ul>
<main>
Content here.
</main>
<footer>
<div class="overlay">This is my overlay.</div>
</footer>
CSS
body {
margin: 25px auto;
width: 500px;
}
ul,
li {
margin: 0;
padding: 0;
}
main {
min-height: 300px;
}
footer,
.overlay {
height: 50px;
}
footer {
position: realative;
background-color: yellow;
}
.main-menu {
list-style: none;
height: 50px;
}
.main-menu > li {
float: left;
padding: 0 10px;
position: relative;
}
.main-menu > li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
list-style: none;
position: absolute;
left: 10px;
width: 150px;
}
.overlay {
display: none;
text-align: center;
}
jQuery
$overlay = $('.overlay');
$('.main-menu > li').hover(
// when hovered
function() {
$overlay.css('display','block');
},
// when NOT hovered
function() {
$overlay.css('display','none');
}
);
jsFiddle: http://jsfiddle.net/ednf2pzq/
Edit
You could simplify the jQuery hover selector to .main-menu.
jQuery
$('.main-menu > li').hover(
// same code as before
);
jsFiddle: http://jsfiddle.net/ednf2pzq/1/