(jQuery) Adds touch support to CSS Suckerfish menus

A-Pen-by-Matt-Thomas.markdown

A Pen by Matt Thomas

A Pen by Matt Thomas on CodePen.

Adds touch support to CSS Suckerfish menus

index.html

<ul class="menu">
		<li class="first active guggenheim-video"><a href="#"><span>Video</span></a></li>
		<li class="parent channel"><span class="separator"><span>Channel</span></span>
			<ul>
				<li class="first exhibitions"><a href="#"><span>Exhibitions</span></a></li>
				<li class="last events"><a href="#"><span>Events</span></a></li>
			</ul>
		</li>
		<li class="last parent topic"><span class="separator"><span>Topic</span></span>
			<ul>
				<li class="first architecture"><a href="#"><span>Architecture</span></a></li>
				<li class="music"><a href="#"><span>Music</span></a></li>
				<li class="dance"><a href="#"><span>Dance</span></a></li>
				<li class="painting"><a href="#"><span>Painting</span></a></li>
				<li class="film-a-video"><a href="#"><span>Film &amp; Video</span></a></li>
				<li class="performance"><a href="#"><span>Performance</span></a></li>
				<li class="food"><a href="#"><span>Food</span></a></li>
				<li class="photography"><a href="#"><span>Photography</span></a></li>
				<li class="guggenheim-history">
					<a href="#"><span>Guggenheim History</span></a></li>
				<li class="sculpture"><a href="#"><span>Sculpture</span></a></li>
				<li class="interview"><a href="#"><span>Interview</span></a></li>
				<li class="time-lapse"><a href="#"><span>Time Lapse</span></a></li>
				<li class="installation"><a href="#"><span>Installation</span></a></li>
				<li class="last work-on-paper"><a href="#"><span>Work on Paper</span></a></li>
			</ul>
		</li>
	</ul>

script.js

		(function ($) {
			$(function () {
				$('ul.menu li.parent').on('touchstart', function () {
					var $ul   = $(this).find('ul').first(),
						$open = $(this).find('ul.open');
					$(this).siblings().find('ul.open').css('left', '-999em').removeClass('open');
					if ($ul.hasClass('open')) {
						$open.css('left', '-999em').removeClass('open');
					} else {
						$ul.css('left', 'auto').addClass('open');
					}
				});
			});
		}(jQuery));

style.css

		ul.menu li {
			display : inline-block;
		}

		ul.menu ul {
			position : absolute;
			left     : -999em;
			width    : 16em;
			margin   : 0;
			padding  : 0;
		}

		ul.menu ul li {
			width : 100%;
		}

		ul.menu li:hover ul ul,
		ul.menu ul li:hover ul ul,
		ul.menu ul ul li:hover ul ul {
			left : -999em;
		}

		ul.menu li:hover ul,
		ul.menu ul li:hover ul,
		ul.menu ul ul li:hover ul,
		ul.menu ul ul ul li:hover ul {
			left : auto;
		}