Forums

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

Home Forums CSS Mobile css menu without lists

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #194588
    analis
    Participant

    starting from a menu of this type

    < div >
    <a href="">Link 1</a> 
    <a href="">Link 2</a>
    < / div >
    

    how can I turn the div in a colored square that touch becomes a drop-down menu without UL AND LI?

    #194592
    Paulie_D
    Moderator

    What have you tried?

    Try taking an existing dropdown menu and using divs and anchors instead of ul & li.

    I’m not sure what this has to do specifically regarding mobile.

    Is there something you’re having trouble with at smaller viewports that you think this alternate structure will solve.

    Oh, and I’m assuming by ‘dropdown menu’ you mean an actual menu and not a &lt;select&gt;

    EDIT: Also, why links for the parents?..they can’t be active links otherwise they’d take you away from the location.

    #194594
    analis
    Participant
    #194595
    Paulie_D
    Moderator

    What do you mean…”doesn’t work”.

    What are you expecting to have happen?

    #194620
    analis
    Participant

    disappears I can not click

    how would you ? only with css ?

    #194622
    Paulie_D
    Moderator

    You mean it goes away when you hover off, well that’s understandable?

    If you want ‘clicking’ or ‘touching’ you really need Javascript.

    There are checkbox “hacks” but I’m not sure I’d recommend them.

    #194673
    analis
    Participant

    1) I click , the menu appears but if I click on the link disappears.

    2) I read your guide for the button three horizontal lines I tried this & # 9776 ;, appears a square, utf8 is not supported inthe small phone ?

    #194699
    Paulie_D
    Moderator

    If you have have click events enabled, then we need to see that code in the Codepen.

    If you have no Javascript / Jquery etc…then you need it to enable click events.

    CSS won’t do that kind of interaction.

    #194703
    analis
    Participant

    better use ul and li.

    #194704
    Paulie_D
    Moderator

    That still won’t give you ‘clicking’.

    #194739
    Shikkediel
    Participant

    Recently made this – seems on topic :

    http://codepen.io/Shikkediel/pen/LEyYpp

    It has touch support – and the delayed hiding can easily be removed.
    Recommended to use a normal hover (HTML5) &lt;noscript&gt; fallback.

    #194936
    bikejunkie
    Participant

    I would check this out (though it uses ul li)
    http://codepen.io/boxabrain/pen/sdzcf

    #194937
    bikejunkie
    Participant

    btw Shikkediel
    your nav menu is REALLY amazing

    #194947
    Shikkediel
    Participant

    Thanks, bikejunkie. That pen certainly has a cool trick that made me do some research – gotta remember that one. B-)

    https://css-tricks.com/the-checkbox-hack/

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