CSS Hover Menu not working on iOS

[mikes02]

Built a simple CSS dropdown menu but it doesn’t toggle well on iOS and I am having trouble finding a solution, any ideas?

HTML:

             <div class="solutions-nav">
                <ul>
                    <li class="top"><a href="javascript:;"><span>Complete Solutions For</span> ▾</a>
                        <ul>
                            <li><a href="">Agriculture</a></li>
                            <li><a href="">Builders</a></li>
                            <li><a href="">Education</a></li>
                        </ul>
                    </li>
                </ul>
            </div>  

CSS

.solutions-nav {
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    font-size: 0.7857142857142857em;
    font-weight: 600;   
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    text-transform: uppercase
}
.solutions-nav ul {
    line-height: 1;
    list-style-type: none;
    margin: 0;
    padding: 0
}
.solutions-nav li {
    text-align: center
}
.solutions-nav li a {
    display: block;
    padding: 0.5625rem 0 0.5rem
}
.solutions-nav li:first-child a {
    color: #464646;
    text-decoration: none   
}
.solutions-nav li ul {
    background: #fff;
    border: 1px solid #e1e1e1;
    padding: 0.5rem;
    cursor: pointer;
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    height: auto
}
.solutions-nav li:hover ul, .solutions-nav li:focus ul {
    display: block;
    z-index: 10;
}
.solutions-nav li:hover a, .solutions-nav li:focus a {
    background: #009fc3;
    color: #fff
}
.solutions-nav li ul li {
    background-color: #f2f2f2;
    font-size: 1em;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    text-align: left;
    text-transform: none
}
.solutions-nav li ul li a {
    background-color: #f2f2f2!important;
    color: #464646!important;
    display: block;
    padding: 0.5625rem 0.5rem 0.5rem;
    text-decoration: none
}
.solutions-nav li li a {
    border-bottom: 1px solid #fff
}
.solutions-nav li ul li a:hover, .solutions-nav li ul li a:focus {
    background-color: #009fc3!important;
    color: #fff!important
}

[Paulie_D]

What does ‘not toggle well’ mean?

Also, codedumps usually aren’t very helpful…a link to the live site would be of more use.

[mikes02]

When you tap the primary link to activate the dropdown it doesn’t stay active.

[Paulie_D]

I’m not sure :focus would be sufficient.

A pure CSS menu won’t stay open (generally) on taps..you would probably need JS for that.

[mikes02]

Ya I’ve tried a few approaches with jquery but haven’t been pleased with the result I may just go with a select menu I could always style it with dropkick.js

[TheDutchCoder]

I would suggest not using :hover and :focus for menus like that, as they’re not well supported on tablets/phones (for good reason).

The easiest thing to do is use jQuery (or something similar) and on click, toggle a class on the menu and then use CSS to show/hide the menu.

Small example:

jQuery (not tested)

$('.solutions-nav a').on('click', function() {
  $(this).parents('.solutions-nav').toggleClass('is-open');
});

CSS

.solutions-nav.is-open ul {
  display: block;
}

Hope that helps!

[mikes02]

I like this approach but you have to click the link again to close the menu.

[TheDutchCoder]

Yes that’s true.

better then would be to only open the menu on the first click, second click would then go to the actual link.

Clicking somewhere outside the menu would the hide the menu.

It’s a bit too long to write without testing, but something like this should work:

$('.solutions-nav a').on('click', function(evt) {

  var $this = $(this);

  // Prevent a click event on the menu from bubbling up and closing the menu.
  evt.stopPropagation();

  // If the menu isn't open yet, show it. Otherwise just follow the link.
  if (!$this.parents('.solutions-nav').hasClass('is-open')) {

    evt.preventDefault();
    $this.parents('.solutions-nav').addClass('is-open');

  }

});

// Close the menu when you click somewhere in the document.
$(document).on('click', function(evt) {

  $('.solutions-nav').removeClass('is-open');

});

You’ll probably need to polish this a bit, but it’s a start ;-)

[Paulie_D]

moving to JS area

[JacobPeters]

This works with no javascript. Comment out the hover selectors or look at it on mobile and you can see.

http://codepen.io/jacobcpeters/pen/zgxrD

[mikes02]

Did you actually test this on an iOS device? Looks like all you did was add tabindex but I just tested it on my iPhone and it didn’t fix anything.

[JacobPeters]

Nope, it doesn’t work. The tabindex makes an unfocusable element become focusable. Behavior is undefined for unfocusable elements like div’s and li’s when you try to focus on them, so it varies across browsers unless you add a tabindex. However, mobile chrome and safari on ios aren’t following spec for tabindex.

[mikes02]

Ya, I am trying to figure this out still, it’s very annoying behavior, when you tap and hold for a second the menu becomes visible but if you tap normally it just flashes and then hides again.

[Author]

Posts