Grow your CSS skills. Land your dream job.

menu problem

  • # December 18, 2012 at 7:16 am

    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

    # December 18, 2012 at 7:27 am

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

    # December 18, 2012 at 7:31 am

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

    # December 18, 2012 at 7:35 am

    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.

    # December 18, 2012 at 7:59 am

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

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

    # December 18, 2012 at 10:41 am

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

    # December 18, 2012 at 4:47 pm

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

    # December 19, 2012 at 12:31 am

    thanks CSSGuru,

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".