drawer/index.html at master · DesignPlug/drawer · 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
    <head>
        <title>Design Plug - Jquery Drawer Nav</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!-- font awesome -->
        <link type="text/css" rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" />

        <!-- drawer default styles -->
        <link type="text/css" rel="stylesheet" href="css/jquery.drawer.css" />

        <style>
            body {
                background: #ccc;
            }
        </style>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>
    <body>
        <nav class="plg-drawer-menu">

            <!-- toggle menu trigger -->

            <a href="#" class="plg-drawer-toggle-trigger"><i class="fa fa-bars fa-2x"></i></a>

            <!-- main menu -->

            <ul class="plg-menu">
                <li>
                    <a href="#"><i class="plg-drawer-icon fa fa-home fa-2x"></i> <span class="plg-item-name">Home</span></a>
                </li>
                <li>
                    <a href="#">
                        <i class="plg-drawer-icon fa fa-globe fa-2x"></i>
                        <span class="plg-item-name">About</span>
                        <span class="plg-collapse-toggle">
                            <i class="plg-toggle-open fa fa-chevron-down"></i>
                            <i class="plg-toggle-closed fa fa-chevron-left"></i>
                        </span>
                    </a>


                    <ul>
                        <li><a href="#">The Team</a></li>
                        <li><a href="#">Our Services
                            <span class="plg-collapse-toggle">
                                <i class="plg-toggle-open fa fa-chevron-down"></i>
                                <i class="plg-toggle-closed fa fa-chevron-left"></i>
                            </span>
                            </a>
                            <ul>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#"><i class="plg-drawer-icon fa fa-file-o fa-2x"></i> <span class="plg-item-name">Blog</span> </a></li>
                <li><a href="#"><i class="plg-drawer-icon fa fa-envelope-o fa-2x"></i> <span class="plg-item-name">Contact</span> </a></li>
            </ul>

            <!-- bottom aligned menu -->

            <ul class="plg-menu plg-menu-align-bottom">
                <li><a href="#"><i class="plg-drawer-icon fa fa-gear fa-2x"></i> <span class="plg-item-name">Settings</span> </a></li>
            </ul>

        </nav>
        <ul>
            <li>
                <a href="#" onclick="$('.plg-drawer-menu').PlugDrawerMenu('options', {pushBody: true});">Switch to push body mode</a>
            </li>
            <li>
                <a href="#" onclick="$('.plg-drawer-menu').PlugDrawerMenu('options', {pushBody: false});">Switch to switch body push off</a>
            </li>
            <li>
                <a href="#" onclick="$('.plg-drawer-menu').PlugDrawerMenu('toggle');">Just Toggle Me</a>
            </li>
            <li>
                <a href="#" onclick="$('.plg-drawer-menu').PlugDrawerMenu('options', {inline: true});">Make me Inline</a>
            </li>
            <li>
                <a href="#" onclick="$('.plg-drawer-menu').PlugDrawerMenu('options', {inline: false});">Make me draw again</a>
            </li>
        </ul>
    </body>


    <!-- include jquery -->

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!--  -->

    <!-- swipe -->

    <script src="assets/touchswipe/jquery.touchSwipe.min.js"></script>

    <!-- drawer -->

    <script src="js/jquery.drawer.min.js"></script>

        <script>
            $(document).ready(function(){
                $('.plg-drawer-menu').PlugDrawerMenu({inline: false,
                                                      open: function(){
                                                                console.log("you opened the nav");
                                                            },
                                                      close: function(){
                                                                console.log("you just closed the nav");
                                                            }
                                                      });
            });
        </script>
</html>