Grow your CSS skills. Land your dream job.

Stuck with sub-menu

  • # June 5, 2013 at 2:22 pm

    Hi, guys.

    I’m a little stuck with menu, I can’t make sub-menu to dissapear by CSS3, here is code
    http://codepen.io/Kuzyo/pen/icwbt

    Thanks for the help

    # June 5, 2013 at 3:45 pm

    You’re probably going to end up looking at `:target` for that.
    https://developer.mozilla.org/en-US/docs/Web/CSS/:target
    http://css-tricks.com/on-target/

    However I’d suggest against it. Rather stick with javascript for functionality like that for now.

    # June 5, 2013 at 5:02 pm

    Hehe, gratz on getting that Pen featured :P

    I’d stick with JS as well, it can be done ‘light’, don’t need jQuery for that. I need sleep now else I’d make something for you. Maybe tomorrow if no one beats me to it.

    # June 5, 2013 at 5:38 pm

    @jamy_za thanks for answers never heard about :target

    @CrocoDillon Hi, want to see your solution

    solve the problem http://codepen.io/Kuzyo/pen/icwbt

    # June 6, 2013 at 2:58 pm

    (function() {
    var mainLinks = document.querySelectorAll(‘.main-link’),
    current;

    for (var i = 0; i < mainLinks.length; i++) {
    mainLinks.onclick = function(e) {
    // always collapse current sub-nav if there is one
    if (current)
    current.style.height = ’0px’;

    // get sub-nav
    var subNav = this.parentNode.querySelector(‘.sub-nav’);
    if (subNav) {
    // prevent default browser behavior
    e = e || event;
    (e.preventDefault) ? e.preventDefault() : e.returnValue = false;

    if (current == subNav)
    // same main-link clicked, unset current
    current = null;
    else {
    // another main-link clicked, open that sub-nav
    current = subNav;
    current.style.height = ’123px’;
    }
    } else {
    // if there is no sub-nav, unset current
    current = null;
    }
    }
    }
    })();

    You should remove the hover states to see that JS working (but leave the transitions, the JS would be a lot more complex without it). You can see that with jQuery it would be a lot easier, but you don’t really need it (I think it’s IE8+ because of querySelectorAll)

    # June 7, 2013 at 8:32 am

    It’s pefectly works. Thanks ))))

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

You must be logged in to reply to this topic.

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