Javascript

【Javascript】オフキャンバススライドイン/アウトのハンバーガーナビゲーションSide Nav

December 25, 2016
side nav

Side Navはオフキャンバススライドイン/アウトのハンバーガーナビゲーション。

CSS

nav#primary-nav {
  display: none;
}

HTML

    <header id="masthead">
        <h1>company<span>name</span></h1>
        <button id="primary-nav-toggle" class="material-icons" aria-label="toggle navigation">menu</button>
        <div class="treatment"></div>
        <nav id="primary-nav">
            <ul>
                <li><i class="material-icons">home</i>Home</li>
                <li><i class="material-icons">add</i>Add</li>
                <li><i class="material-icons">bubble_chart</i>Ideas</li>
                <li><i class="material-icons">insert_photo</i>Insert a Photo</li>
                <li><i class="material-icons">headset</i>Audio Options</li>
                <li><i class="material-icons">cast</i>Cast Options</li>
                <li><i class="material-icons">nature_people</i>Man Tree</li>
                <li><i class="material-icons">tag_faces</i>Are you Happy?</li>
                <li><i class="material-icons">settings</i>Settings</li>
            </ul>
        </nav>
    </header>