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
  • January 29, 2015 at 4:58 am #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?

    January 29, 2015 at 5:24 am #194592
    Paulie_D
    Member

    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.

    January 29, 2015 at 6:29 am #194594
    analis
    Participant

    this but dont work

    http://codepen.io/analis/pen/wBqybM

    January 29, 2015 at 6:47 am #194595
    Paulie_D
    Member

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

    What are you expecting to have happen?

    January 29, 2015 at 9:51 am #194620
    analis
    Participant

    disappears I can not click

    how would you ? only with css ?

    January 29, 2015 at 10:00 am #194622
    Paulie_D
    Member

    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.

    January 30, 2015 at 4:46 am #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 ?

    January 30, 2015 at 8:15 am #194699
    Paulie_D
    Member

    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.

    January 30, 2015 at 8:56 am #194703
    analis
    Participant

    better use ul and li.

    January 30, 2015 at 9:17 am #194704
    Paulie_D
    Member

    That still won’t give you ‘clicking’.

    January 30, 2015 at 7:13 pm #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.

    February 2, 2015 at 5:58 pm #194936
    bikejunkie
    Participant

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

    February 2, 2015 at 6:03 pm #194937
    bikejunkie
    Participant

    btw Shikkediel
    your nav menu is REALLY amazing

    February 3, 2015 at 12:43 am #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/

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