Mobile navigation - Not activating on touch

Question

I'm trying to make my website accessible via mobile and have arranged it so below a certain size the menu bar at the top turns into a dropdown. Unfortunately it works with hover so when I try to use it on my mobile nothing happens at all. Can anyone suggest how I would alter the code to make it work with touch?

html

<nav id="nav_mobile" role="navigation">
    <ul>
        <li><a href="#" id="current">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Gallery</a></li>
    </ul>
</nav>

CSS

#nav_mobile {
    position: relative;
    padding-top: 2%;
    margin: 0px auto;
}   
#nav_mobile ul {
    width: 100%;
    text-align: center;
    position: absolute;
    background: #F8F8F8;
    min-height: 50px;
    background-image: url('../img/Menu_button.png');
    background-repeat: no-repeat;
    background-position: 50% 0%;
}
#nav_mobile li {
    display: none;
    margin: 0;
    border-bottom: 1px solid #ceced6;
    background: #070707;
}
#nav_mobile #current {
    display: block;
}
#nav_mobile a {
    display: block;
}
#nav_mobile #current a {
    background: none;
    color: #666;
}
#nav_mobile ul:hover {
    background-image: none;
}
#nav_mobile ul:hover li {
    display: block;
}

Happy to include jQuery in the code if I need to but I'd like to keep it to just css if I can.

EDIT I've changed the hover to active and added ontouchstart="" to the body tag. The result is the menue now activates but doesn't stay active long enough for you to select a link.

http://stackoverflow.com/questions/6063308/touch-css-pseudo-class-or-something-similar — Dmitriy, May 10 '15 at 15:35
Hi, sorry. I had a look at that post but as it includes java script which I'm not vary familiar with I couldn't make head nor tail of it. Could you let me know what I'm supposed to be looking at? — Tessa, May 10 '15 at 15:49

score 0 · Accepted Answer · answered May 10 '15 at 15:42

0

use the :active pseudoclass. It should work, but in some browsers you need a small hack to make it work : attach an event handler to the touchstart event on the body (ex:<body ontouchstart="">)

answered May 10 '15 at 15:42

Nilesh Mahajan

3,506
21
34

Hi, I've tried using active but it doesn't work... what is the ontouchstart thing? do I add it to the body just as you have written it? – Tessa May 10 '15 at 15:51
– Dmitriy May 10 '15 at 15:53
Hi thanks, I've tried this. Now the dropdown activates but you can't click it because the moment you take you finger of the mouse (on computer) or stop pressing the menu button (on mobile) then menu dissapears :-( – Tessa May 10 '15 at 15:57
This did fix it in the end but I needed to use both the hover and active pseudoclass. i,e #nav_mobile ul:hover, #nav_mobile ul:active, {} – Tessa May 10 '15 at 18:27

score 0 · Answer 2 · answered May 10 '15 at 15:51

0

You could create 2 separate menus - one for regular screens and one for mobile and do something like this:

#nav_mobile {display: none;}

@media (max-width: 480px) {
  #nav_mobile {display: inline-block;}
  #nav_regular {display: none;}
}

answered May 10 '15 at 15:51

Rose

220
5
14

Hi, I already have this, I just didn't post the details because my screen menu works fine, it;s only my dropdown menu for smaller screens that doesn't work. – Tessa May 10 '15 at 15:55
There is a good tutorial that I used before from css-tricks: https://css-tricks.com/convert-menu-to-dropdown/ – Rose May 10 '15 at 15:57
It creates a mobile scroll menu though – Rose May 10 '15 at 15:59
Hi, thanks, I've seen that one before but it is not the type of menu that I am trying to create in this instance. – Tessa May 10 '15 at 15:59

Mobile navigation - Not activating on touch

2 Answers2