atomicmenu/demo.html at master · mttshw/atomicmenu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
    <title>Atomic Menu Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
    <link rel="stylesheet" href="atomicmenu.css">
    <body>
        <header class="sans-serif">
            <div class="bg-white-80">
                <nav class="flex w-100 mw8 center items-center justify-between">
                    <h2 class="v-mid pa3">
                        <a href="/" class="flex items-center h2 grow-large border-box no-underline black">
                            <span class="dib w2"><svg class="db" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="Layer 2" id="Layer_2"><path fill="#000" d="M19,6a3,3,0,0,0-2.44,1.26L8,4.81A3,3,0,1,0,4.61,8l1.82,8.49a3,3,0,1,0,4.33,1.38l6.83-6.2A3,3,0,0,0,19,12a3,3,0,0,0,0-6ZM8.39,16,6.57,7.55a3,3,0,0,0,.87-.81L16,9.19a3,3,0,0,0,.22,1l-6.83,6.2A3,3,0,0,0,8.39,16ZM4,5A1,1,0,1,1,5,6,1,1,0,0,1,4,5ZM8,20a1,1,0,1,1,1-1A1,1,0,0,1,8,20ZM19,10a1,1,0,1,1,1-1A1,1,0,0,1,19,10Z"/></g></svg></span class="dib w2">
                            <span class="dib w4">Atomic Menu</span>
                        </a>
                    </h2>
                    <div class="atomicmenu atomicmenu-lighttheme w-100 v-mid tr ph3">
                        <div class="atomicmenu-container">
                            <a class="atomicmenu-option f6 fw4 hover-black no-underline black-70 dib pv2 ph3" href="/" >How it Works</a>
                            <a class="atomicmenu-option f6 fw4 hover-black no-underline black-70 dib pv2 ph3" href="/" >Pricing</a>
                            <a class="atomicmenu-option f6 fw4 hover-black no-underline black-70 dib pv2 ph3" href="/" >About</a>
                            <a class="atomicmenu-option f6 fw4 hover-black no-underline black-70 dib pv2 ph3" href="/" >Careers</a>
                            <a class="atomicmenu-option f6 fw4 hover-black no-underline black-70 dib ml2 pv2 ph3 ba br2" href="/" >Sign Up</a>
                        </div>
                        <button class="atomicmenu-toggle v-mid tr pa3">Menu</button>
                    </div>
                </nav>
            </div>
        </header>
    </body>
    <script src="atomicmenu.js"></script>
</html>