- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
hello everyone,
I have problem with menu, actually i have clickable menu when i click it goes open n click again goes close..but problem this is I want to close it even I click anywhere on page.
I hope must be understand what i want..
this is link http://datanova.co.in/dnitest/index.html
thanx in advance
I can’t see the menu you’re describing. Can you create a codepen for us?
plz click on link n u’ll see a navigation at top…..
AH right, I get it now, it’s the first menu item top right.
I can see from the code that it’s being done by JQuery, so instead of having the class toggle on and off when clicking that element, just use the body element as the select for clicking away, that’s probably the most straight forward method.
actually, still I have a problem i m putting it on jsfiddle please amend it…
For this type of stuff I create a background that lays over the current view.
This would mean using z-index to layer your options….
Just fiddled with your code Manojnaanak and this is what I came up with in the jquery:
$(document).ready(function() {
$(‘nav li:has(ul)’).click(function(e){
$(‘nav ul li a.active’).removeClass(‘active’);
$(this).find(‘a:first’).addClass(‘active’);
$(‘nav ul ul.displaynone’).removeClass(‘displaynone’);
$(this).find(‘ul:first’).toggleClass(‘displaynone’);
e.stopPropagation();
});
$(‘html’).click(function() {
$(‘nav ul li a.active’).removeClass(‘active’);
$(‘nav ul ul.displaynone’).removeClass(‘displaynone’);
});
});
Example: http://jsfiddle.net/K4U2c/2/
Now you can click anywhere outside of the menu and it will hide it.
Though I just noticed that if you click the same main nav link that you opened – it stays open. Suppose a toggle needs to be worked in there for that.
Hope it gets you going though :)
thanks CSSGuru,