Simple Javascript for Touch Devices

Question

I'm attempting to create a responsive menu as simple as possible. I have almost no experience in Javascript.

Is there a simple way to change display:none to display:block on touch and then back to display:none when touched outside of the element?

HTML:

<nav>
<ul>
<i class="fa fa-bars"></i> Menu
    <a href="index.html"><li>Home <i class="fa fa-home"></i></li></a>
    <a href="surfbagelmenu.htm"><li>Menu <i class="fa fa-cutlery"></i></li></a>
    <a href="gallery.htm"><li>Gallery <i class="fa fa-picture-o"></i></li></a>
    <a href="links.htm"><li>Cool Links <i class="fa fa-link"></i></li></a>
</ul>

CSS:

nav li {
display:none;
}


nav ul:hover li {
display:block;
}

(used hover since it works on Android so you get the idea of what I'm trying to do)

Thanks for any help!

Edit: I forgot to mention that I do not want to use jQuery. Just pure Javascript. Thanks!

Answer 1

This function calls the isTouchDevice() function, and if it succeeds a special touch events is attached to the page.

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

So that's it, just include these functions on your page and just call it by passing in the ID of the element you want to scroll. Like so: touchShow("MyElement"); .

function touchShow(id){
    if(isTouchDevice()){ //if touch events exist...
       $('#id').show();
       //An alternate way is to use the jQuery css method:
       $("#id").css("display", "block");
    }
}

Answer 2

First thing, you should fix up your markup, your nesting is wrong:

<nav>
  <ul>
    <li id="menu_toggle">Menu</li>
    <li><a href="#">Link 01</a></li>
    <li><a href="#">Link 02</a></li>
    <li><a href="#">Link 03</a></li>
  </ul>
 </nav>

And change your CSS to something like this:

nav li { display: none; }

nav.open li,
nav:hover li,
#menu_toggle { display: block; }

This means all your list items are invisible, but for the toggle and if the nav has a class open , or if the mouse hovers the nav (on a desktop).

Then your JavaScript (jQuery) could look like this:

$(function(){
    // document ready

    $('#menu_toggle').on('touchstart', function(){
      $('nav').toggleClass('open');
    });
});

This will toggle the menu on a touch device when hover isn't really working.

Tracking a touch anywhere else but the menu is a bit trickier, you could:

1. Add a once off event handler to the rest of the document whenever you open the menu
2. Put an overlay between the menu and your content and catch events on that

So for option 1, assuming you have something like this:

<nav>...</nav>
<div id="content">...</div>

You could do this:

$(function(){
    // document ready

    var isMenuOpen = false;

    $('#menu_toggle').on('touchstart', function(){
      // reverse boolean
      isMenuOpen = !isMenuOpen;
      // add/remove class depending on state
      $('nav').toggleClass('open', isMenuOpen);

      if( isMenuOpen ){
        // If menu is now open, add a closing event handler to the content
        $('#content').once('touchstart', function(){
          $('nav').removeClass('open');
        });
      }
    });
});