Touch Device Shows Navigation

A prototype to test touch device interaction with navigation fly-out menus.

by Jed Mao

HTML

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<nav class="primary">
    <a href="#foo">Foo</a>
    <a href="#bar">Bar</a>
    <a href="#baz">Baz</a>
</nav>
<nav class="secondary">
    <a href="#women">Women</a>
    <a href="#men">Men</a>
    <a href="#baby">Baby</a>
    <a href="#kids">Kids</a>
    <a href="#beauty">Beauty</a>
    <a href="#home">Home</a>
    <a href="#kitchen">Kitchen</a>
    <a href="#furniture">Furniture</a>
    <a href="#electronics">Electronics</a>
    <a href="#video-games">Video Games</a>
    <a href="#toys">Toys</a>
    <a href="#christmas">Christmas</a>
    <a href="#deals">Deals</a>
    <a href="#more">More</a>
</nav>
<h1></h1>

SCSS

nav {
    display: table;
    width: 100%;
    
    a {
        text-align: center;
        padding: 20px;
        text-decoration: none;
        color: white;
    }
    
    &.primary {
        background-color: lightslategray;
        
        a {
            display: table-cell;
        }
        
        &:hover ~ nav {
            display: block;
        }
            
    }
    
    &.secondary {
        display: none;
        background-color: indianred;
        
        &:hover {
            display: block;
        }
        
        a {
            display: block;
            
            &:nth-child(even) {
                background-color: crimson;
            }
        }
    }
}
/* your custom CSS \*/
</style>
<meta name="viewport" content="width=device-width">
<style>

JavaScript

var $primaryNav = $('nav.primary');
var $secondaryNav = $('nav.secondary');

$primaryNav.on('click touchstart', 'a', function(e) {
    $('h1').text('clicked');
    if ($secondaryNav.is(':visible')) {
        alert('navigate: primary');
    } else {
        alert('showing secondary nav');
        $secondaryNav.show();
        e.preventDefault();
    }
});

$secondaryNav.on('click touchstart', 'a', function() {
    alert('navigate: secondary');
});