touch menu on iOs using css colours and jquery not working

Question

I have a menu with jquery and css, the menu is working perfect on Desktop and browser, removing and adding the class current.

The problem is when I using it on iOs the jquery does not work.

Someone can help me to make this jquery work on iOS? can be a Css or jquery solution.

I tried use :focus :active but this not work on iOs

I tried this too: How to recognize touch events using jQuery in Safari for iPad? Is it possible?

but I have no success.

Thanks.

css:

.accordion-menu {
  background-color: #f4f4f4;
  position: fixed;
  width: 50px;
  height: 100%;
}
.accordion-menu ul li {
  padding: 10px;
  border-top: 1px solid #dfdfdf;
}
.accordion-menu ul li:first-child {
  border: none;
}
.accordion-menu ul li i {
  color: #000;
}
.accordion-menu ul li i:hover {
  color: #fff;
  background-color: #0086ab;
}
.accordion-menu ul li:hover {
  background-color: #0086ab;
  color: #fff;
}

.nav {
  background-color: red;
}

.nav .fa {
  color: yellow;
}

.nav.active {
  color: black;
  background-color: blue;
}
.nav.active .fa {
  color: red;
}

js:

$('.nav').on('click', function() { 
  $(this).closest('li').toggleClass('active');
});

html:

<div class="accordion-menu">
  <ul class="" role="tabpanel">
    <li class="nav active">
      <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
        <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav"><a class=""><i class="fa fa-search fa-2x" aria-hidden="true"></i></a></li>
  </ul>
</div>

jsfiddle: https://jsfiddle.net/gabcyff6/

Does this help: http://stackoverflow.com/questions/10577906/how-to-make-my-click-function-work-with-ios — Dawcars, May 31 '16 at 10:29

score 0 · Answer 1 · answered May 31 '16 at 11:10

:hover behaving wired,so remove them and use js only

$('.nav').on('click', function(e) {
  $(this).closest('li').toggleClass('active');
});

.accordion-menu {
  background-color: #f4f4f4;
  position: fixed;
  width: 50px;
  height: 100%;
}
.accordion-menu ul li {
  padding: 10px;
  border-top: 1px solid #dfdfdf;
}
.accordion-menu ul li:first-child {
  border: none;
}
.accordion-menu ul li i {
  color: #000;
}
.nav {
  background-color: red;
}
.nav .fa {
  color: yellow;
}
.nav.active {
  color: black;
  background-color: blue;
}
.nav.active .fa {
  color: red;
}

<div class="accordion-menu">
  <ul class="" role="tabpanel">
    <li class="nav active">
      <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
        <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav"><a class=""><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
    </li>

  </ul>
</div>

thanks but that not solve my problem, I need have the hover when that is on desktop, but the hover cannot work on iOs — raduken, May 31 '16 at 11:33
@Raduken use js to detect browser( ua contain ios), case not ios then load css with hover effacts, case ios use touch events to toggle class — Josh Lin, Jun 02 '16 at 01:59

touch menu on iOs using css colours and jquery not working

1 Answers1