skeleton-css-menu/skeleton_side_menu.html at master · ErvinSabic/skeleton-css-menu · 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
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Skeleton Framework Test File</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <link rel="stylesheet" href="css/menu.css">
    </head>
    <body>
        <header>
            <div class="row">
                <div class="twelve columns">
                    <span class="buttonContainer">
                    <a class="menu-button" onClick="openNav()"><i class="fa fa-bars fa-3x" aria-hidden="true"></i></a>
                    <a class="logout-button" href="/logout"><i class="fa fa-power-off fa-3x" aria-hidden="true"></i></a>
                    </span>
                </div>
            </div>
                <nav class="menu" id="menu">
                    <ul>
                        <a href="#"><li><i class="fa fa-address-book fa-lg" aria-hidden="true"></i><br>Customers</li></a>
                        <a href="#"><li><i class="fa fa-usd fa-lg" aria-hidden="true"></i><br>Customers</li></a>
                        <a href="#"><li><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><br>Customers</li></a>
                        <a href="#"><li><i class="fa fa-shopping-basket fa-lg" aria-hidden="true"></i><br>Customers</li></a>
                        <a href="#"><li><i class="fa fa-line-chart fa-lg" aria-hidden="true"></i><br>Customers</li></a>
                    </ul>
                </nav>
            </header>
            <main>

            </main>
            <footer>
                <script type="text/javascript" src="js/menu.js"></script>
            </footer>
    </body>
</html>