NSN: touch menu

by Laura Kishimoto

HTML

<div class="nav__wrap">
    <form class="nav__search">
        <div>
            <div id="search" class="container-inline">
                <div class="form-item" id="edit-search-theme-form-1-wrapper">
                    <input type="text" maxlength="128" name="search_theme_form" id="edit-search-theme-form-1" size="15" value="" title="Enter a keyword to search..." placeholder="Enter a keyword to search..." class="form-text">
                </div>
                <input type="submit" name="op" id="edit-submit" value="? Search" class="form-submit">
                <input type="hidden" name="form_build_id" id="form-3ade0ef173118ca4fe9f4fda8de3469f" value="form-3ade0ef173118ca4fe9f4fda8de3469f">
                <input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form">
            </div>
        </div>
    </form>
    <nav class="primary">
         <h2>Menu</h2>

        <ul class="menu menu__level--1">
            <li class="expanded first"><a href="/portfolio" title="" class=" level-1">Portfolio</a>
                <ul class="menu menu__level--2">
                    <li class="leaf first"><a href="/node/27732" title="" class=" level-2">Portfolio A to Z</a>
                    </li>
                    <li class="leaf"><a href="/node/27727" title="" class=" level-2">Products</a>
                    </li>
                    <li class="expanded"><a href="/node/27727" title="" class=" level-2">Solutions</a>
                        <ul class="menu menu__level--3">
                            <li class="leaf first"><a href="/node/27727" title="" class=" level-3">Customer Experience Management (CEM) for Liquid Net</a>
                            </li>
                            <li class="leaf"><a href="/node/27727" title="" class=" level-3">Device Management</a>
                            </li>
                            <li class="leaf"><a href="/node/27727" title="" class=" level-3">Heterogenous Networks</a>
                      ...

CSS

.sidr {
    display:none;
    position:absolute;
    position:fixed;
    top:0;
    height:100%;
    z-index:999999;
    width:90%;
    overflow-x:none;
    overflow-y:auto
}
.sidr.left {
    left:-90%;
    right:auto
}
/*! normalize.css v1.1.2 | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display:block
}
audio, canvas, video {
    display:inline-block;
    *display:inline;
    *zoom:1
}
audio:not([controls]) {
    display:none;
    height:0
}
[hidden] {
    display:none
}
html {
    font-size:100%;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
html, button, input, select, textarea {
    font-family:sans-serif
}
body {
    margin:0
}
a:focus {
    outline:thin dotted
}
a:active, a:hover {
    outline:0
}
h1 {
    font-size:2em;
    margin:0.67em 0
}
h2 {
    font-size:1.5em;
    margin:0.83em 0
}
h3 {
    font-size:1.17em;
    margin:1em 0
}
h4 {
    font-size:1em;
    margin:1.33em 0
}
h5 {
    font-size:0.83em;
    margin:1.67em 0
}
h6 {
    font-size:0.67em;
    margin:2.33em 0
}
abbr[title] {
    border-bottom:1px dotted
}
b, strong {
    font-weight:bold
}
blockquote {
    margin:1em 40px
}
dfn {
    font-style:italic
}
hr {
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    height:0
}
mark {
    background:#ff0;
    color:#000
}
p, pre {
    margin:1em 0
}
code, kbd, pre, samp {
    font-family:monospace, serif;
    _font-family:'courier new', monospace;
    font-size:1em
}
pre {
    white-space:pre;
    white-space:pre-wrap;
    word-wrap:break-word
}
q {
    quotes:none
}
q:before, q:after {
    content:'';
    content:none
}
small {
    font-size:80%
}
sub, sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup {
    top:-0.5em
}
sub {
    bottom:-0.25em
}
dl, menu, ol, ul {
    margin:1em 0
}
dd {
    margin:0 0 0 40px
}
menu, ol, ul {
    padding:0 0 0 40px
}
nav ul, nav ol {
   ...

JavaScript

$('.menu__level--1 > li > a').replaceWith(function () {
    return $('<span class="nolink">' + $(this).html() + '</span>');
});