Touch Or Mouse demonstration

Demonstration of our Touch Or Mouse jQuery plugin (https://gist.github.com/lmeurs/e5db12f0b3ef43f9cd65) detects whether an event has been invoked by a touchscreen or a mouse.

HTML

<nav>
		<ul>
			<li id="nav-button">
				<a id="nav-click" href="#">Menu <i class="fa fa-bars"></i></a>
				<ul class="sub-nav">
					<li><a href="#">Link1</a></li>
					<li><a href="#">Link2</a></li>
					<li><a href="#">Link3</a></li>
					<li><a href="#">Link4</a></li>
				</ul>
			</li>
		</ul>
	</nav>

<div class="log">
    
</div>

CSS

nav {
  position: absolute;
  left: 50%;
  top: 11px;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  cursor: pointer; }
  nav #nav-click {
    margin: 0;
    text-transform: uppercase;
    color: #BFB5B5;
    transition: all 0.3s; }
  nav ul {
    padding: 0;
    margin: 0; }
  nav li {
    padding: 0;
    list-style-type: none; }

#nav-button {
  position: relative;
  border-radius: 30px;
  border: 1px solid #BFB5B5;
  padding: 5px 15px;
  transition: all 0.3s;
  background-color: #ffffff;
  z-index: 109; }
  #nav-button:hover, #nav-button:focus {
    border-color: #4A4040; }
    #nav-button:hover #nav-click, #nav-button:focus #nav-click {
      color: #4A4040; }
  #nav-button .fa {
    margin-left: 5px; }

.sub-nav {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -100%;
  left: -25%;
  width: 150%;
  transition: all 0.3s; }
  .sub-nav li {
    float: left;
    width: 100%;
    text-align: center;
    background-color: #ffffff; }
    .sub-nav li a {
      padding: 7px;
      display: block;
      font-size: 14px; }

.show-nav {
  visibility: visible;
  opacity: 1;
  top: 100%;
  padding-top: 10px; }

JavaScript

// On DOM ready.
jQuery(function($) {
    var container = $('#nav-button');
	var list = $('.sub-nav');
    
  // Make body element track touch events.
  var $body = $(document.body).touchOrMouse('init');

  // Bind mouse events to links.
  container
    .click(myClickCallback)
    .mouseenter(myMouseenterCallback)
    .mouseleave(myMouseleaveCallback);

  // Click callback.
  function myClickCallback(e) {
    var touchOrMouse = $body.touchOrMouse('get', e);

    // If mouse event has been invoked by touch.
    if (touchOrMouse === 'touch') {
      // Toggle .hovered class.
      list.toggleClass('show-nav');
    }

    // Do not follow the link.
    e.preventDefault();
  }

  // Mouse enter callback.
  function myMouseenterCallback(e) {
    var touchOrMouse = $body.touchOrMouse('get', e);

    // If mouse event has not been invoked by touch.
    if (touchOrMouse === 'mouse') {
      // Add .hovered class.
      list.addClass('show-nav');
    }
  }

  // Mouse leave callback.
  function myMouseleaveCallback(e) {
    var touchOrMouse = $body.touchOrMouse('get', e);

    // If mouse event has not been invoked by touch.
    if (touchOrMouse === 'mouse') {
      // Remove .hovered class.
      list.removeClass('show-nav');
    }
  }
});

/*! Touch Or Mouse - v0.2 - 2014-10-10
 * Shared at https://gist.github.com/lmeurs/e5db12f0b3ef43f9cd65
 * Demonstrated at http://jsfiddle.net/lmeurs/uo4069nh
 * Discussed at http://stackoverflow.com/a/26145343/328272
 * Copyright (c) 2014 Laurens Meurs, wiedes.nl; Licensed MIT */
(function(e){"use strict";var t={ghostEventDelay:1e3};var n={init:function(n){var r=this;if(!r.data("touchOrMouse")){r.on("touchstart.touchOrMouse touchend.touchOrMouse",function(t){e(this).data("touchOrMouse").touchEventInProgress=t.type==="touchstart";e(this).data("touchOrMouse").lastTouchEventTimestamp=Date.now()}).data("touchOrMouse",{options:e.extend(t,n||{}),touchEventInProgress:false,lastTouchEventTimestamp:0})}return r},get:function(t){var...