Skip to main content

Forums

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

    Hi guys

    Just working on something at the moment where I have a sub menu in a ul element that I need to set to display none and flex at the same time.

    I know its not valid to wrap the li in a span but does it really matter? is it going to break anything other than validation?

    So I’d have: https://codepen.io/qwerty-design/pen/qoVWmM

    #268943
    JeroenR
    Participant

    I guess the question is what you want to achieve by doing this.
    I wonder for example why you want to set a list be a flex container when also set to display none. If you can’t see it, why would it have any other CSS properties? Except for when you want to toggle the display or something.

    And why would you want to wrap the list items in another container when you already have the unordered list as a container?

    So maybe you can add some explanation on what you want it to do?

    #268946
    Ricky55
    Participant

    Hi thanks for replying Jeroen.

    I want to set to display none and flex because its a sub menu thats hidden by default until the user clicks to see it.

    It is the UL that Im wanting to use as the flex container. This does reside within another UL but I can’t use that as a flex container as the li’s I’m wanting to target wont be the flex children if that makes sense.

    I’ve decided to re-structure my code now anyway but just wondered what the consensus was on this.

    Thanks

    Richard

    #269032
    bearhead
    Participant

    You shouldn’t need the invalid span to get the functionality you are looking for. I would just set the ul to display:none when the menu is closed and the display:flex when it is open.

    Most modern browsers can interpret invalid html, but they do so in ways that you might not expect, and are not consistent between browsers.

    #269033
    Ricky55
    Participant

    Yeah I tried that bearhead but it created an odd looking jump in the content as the menu appeared.

    Anyway I didn’t explore it any further I changed my mark up.

    Thanks for the help though guys I really appreciate it.

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