Forums

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

Home Forums CSS Stuck with sub-menu

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #45319
    Kuzyo
    Participant

    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

    #137781
    CrocoDillon
    Participant

    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.

    #137790
    Kuzyo
    Participant

    @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

    #137875
    CrocoDillon
    Participant

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

    #137962
    Kuzyo
    Participant

    It’s pefectly works. Thanks ))))

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.