jquery-drop/index.html at master · jsweazy/jquery-drop · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    #nav ul { list-style: none;}
    #nav ul li { float: left; margin: 0 10px; }
    #nav ul li a { border: 1px solid transparent; text-transform: capitalize;}
    #nav ul li.active a { background: #ccc; color: #000; }
    #nav ul li.hover a { border: 1px solid #000; background: #fff; color: #000;}
    #nav ul li a { background: #000; color: #fff; display: block; padding: 10px; text-decoration: none; }
    #nav ul li ul { background: #ccc; display: none; position: absolute; padding: 10px 0;  }
    #nav ul li ul li { float: none; margin: 0; }
    #nav ul li ul li a { background: none; color: #000; padding: 5px 10px; }
    #nav ul li ul li.hover a { background: #ccc; border-color: transparent; color: #000; }
    #nav ul li ul li a:hover { color: #fff; }
    #nav-wrap { overflow: hidden; }
    .drop-icon { font-size: 8px; }
  </style>
</head>
<body>
  <div id="wrap">
    <h1>jQuery Drop</h1>
    <div id="nav-wrap">
      <div id="nav">
        <ul>
          <li>
            <a href="#">top level 1</a>
            <ul>
              <li><a href="#">secondary 1</a></li>
              <li><a href="#">secondary 2</a></li>
            </ul>
          </li>
          <li><a href="#">top level 2</a></li>
          <li>
            <a href="#">top level 3</a>
            <ul>
              <li><a href="#">secondary 1</a></li>
              <li><a href="#">secondary 2</a></li>
              <li><a href="#">secondary 3</a></li>
              <li><a href="#">secondary 4</a></li>
            </ul>
          </li>
          <li><a href="#">top level 4</a></li>
          <li><a href="#">top level 5</a></li>
          <li>
            <a href="#">top level 6</a>
            <ul>
              <li><a href="#">secondary 1</a></li>
              <li><a href="#">secondary 2</a></li>
              <li><a href="#">secondary 3</a></li>
              <li><a href="#">secondary 4</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div id="easing-effects">
      <p>To view effects in action goto <a target="_blank" href="http://gsgd.co.uk/sandbox/jquery/easing/">here</a>:</p>
      <h3>Easing Effects</h3>
      <ul>
        <li>jswing</li>
        <li>def</li>
        <li>easeInQuad</li>
        <li>easeOutQuad</li>
        <li>easeInOutQuad</li>
        <li>easeInCubic</li>
        <li>easeOutCubic</li>
        <li>easeInOutCubic</li>
        <li>easeInQuart</li>
        <li>easeOutQuart</li>
        <li>easeInOutQuart</li>
        <li>easeInQuint</li>
        <li>easeOutQuint</li>
        <li>easeInOutQuint</li>
        <li>easeInSine</li>
        <li>easeOutSine</li>
        <li>easeInOutSine</li>
        <li>easeInExpo</li>
        <li>easeOutExpo</li>
        <li>easeInOutExpo</li>
        <li>easeInCirc</li>
        <li>easeOutCirc</li>
        <li>easeInOutCirc</li>
        <li>easeInElastic</li>
        <li>easeOutElastic</li>
        <li>easeInOutElastic</li>
        <li>easeInBack</li>
        <li>easeOutBack</li>
        <li>easeInOutBack</li>
        <li>easeInBounce</li>
        <li>easeOutBounce</li>
        <li>easeInOutBounce</li>
      </ul>
    </div><!-- easing-effects -->

    <div id="options">
      <pre>
        <code>
          //all optional and overridable
          defaults = {
            hoverClass: "hover", // class name used for when an element is hovered and has no dropdown
            hasDropdownClass: "drop", // class name used for when an element that contains a dropdown
            activeClass: "active", // class name used for when an element is hovered and has a dropdown
            animated: false, // true to make dropdown anmiated
            easeIn: false, // easing for "in" transition
            easeOut: false, // easing for "out" transition
            duration: 0, // milliseconds for animation
            durationIn: false, // milliseconds for animation "in"
            durationOut: false // milliseconds for animation "out"
          }
        </code>
      </pre>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
  <script src="jquery.drop.js"></script>
  <script>
    jQuery(function($){
      $('#nav ul li').drop({
        animated: true,
        duration: 1000,
        easeOut: 'easeOutBounce',
      });
      //&#9660;
      $('#nav ul li.drop a:not("#nav ul li.drop ul li a")').each(function(){
        var $el = $(this);
        var nav_t = $el.html();
        $el.html(nav_t+' <span class="drop-icon">&#9660;</span>');
      });
    });
  </script>
</body>
</html>