Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS menu problem

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #41418
    Manojnaanak
    Participant

    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

    #117903
    Andy Howells
    Participant

    I can’t see the menu you’re describing. Can you create a codepen for us?

    #117904
    Manojnaanak
    Participant

    plz click on link n u’ll see a navigation at top…..

    #117905
    Andy Howells
    Participant

    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.

    #117907
    Manojnaanak
    Participant

    actually, still I have a problem i m putting it on jsfiddle please amend it…

    http://jsfiddle.net/manojnaanak/K4U2c/

    #117924
    stillb4llin
    Member

    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….

    #117975
    theCSSguru
    Member

    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 :)

    #118045
    Manojnaanak
    Participant

    thanks CSSGuru,

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.