-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (98 loc) · 4.1 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/screen.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="assets/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="assets/jquery-min.js" type="text/javascript" charset="utf-8"></script>
<title>An Inviting Quick-Actions Panel</title>
<script type="text/javascript">
jQuery(function($) {
$(".menu_toggle").live("click", function() {
$(this).toggleClass("active");
var disclosure = $(this).siblings(".quickactions_menu").first();
disclosure.
toggle().
css({ top: "-9px", left: "-2px", paddingTop: $(this).outerHeight() + 2 + "px" });
//cancel event
return false;
});
// Here be code to make it close when you click outside the panel:
// .live("quickactions.close", function() {
// $(this).removeClass("active");
// var disclosure = $(this).siblings(".quickactions_menu").first();
// disclosure.hide();
// });
// $("body").bind("click", function() {
// // I'm sure there's a better jQuery way to specify a graph of nodes that should not trigger the close behavior, but
// // I took the easy way out:
// if($(this).is("body")) {
// $(".menu_toggle").trigger("quickactions.close");
// }
// });
});
</script>
</head>
<body>
<h2>
Here's the Beef:
<div class="quickactions">
<a href="#quickaction_menu" rel="quickaction_menu" class="menu_toggle">Quick Actions</a>
<div class="quickactions_menu" style="display:none;">
<hr />
<a href="#foo" class="menu_action">Leap Through CSS3 Hoops</a>
<a href="#bar" class="menu_action">Get Prizes</a>
<a href="#baz" class="menu_action">Redeem Tickets</a>
</div>
</div>
</h2>
<p>Now, the only question is: what would you like to do with it? <a href="http://github.com/hypomodern/jquery_css_quickaction_menu">The code is here</a>.</p>
<p>For my money, the great advantage of this UI pattern is that it allows the designer to expose "Power User" features in a minimally obtrusive manner. All of the actions listed in the dropdown should be available from other screens in your application: this would be a list of common next steps that an advanced user might want to directly launch right into after viewing this page.
</p>
<p>I also tend to prefer to keep control surfaces big, inviting, and kinda chunky, so when an interface gets complex this is a way to avoid clutter.</p>
<h5>Required Code</h5>
<p>There's really very little code required:</p>
<pre><code> jQuery(function($) {
$(".menu_toggle").live("click", function() {
$(this).toggleClass("active");
var disclosure = $(this).siblings(".quickactions_menu").first();
disclosure.
toggle().
css({ top: "-9px", left: "-2px", paddingTop: $(this).outerHeight() + 2 + "px" });
//cancel event
return false;
});
});</code>
</pre>
<p>If you want it to close when the user clicks anywhere else on the page, add:</p>
<pre><code> .live("quickactions.close", function() {
$(this).removeClass("active");
var disclosure = $(this).siblings(".quickactions_menu").first();
disclosure.hide();
});
$("body").bind("click", function() {
// I'm sure there's a better jQuery way to specify a graph of nodes that should not trigger the close behavior, but
// I took the easy way out:
if($(this).is("body")) {
$(".menu_toggle").trigger("quickactions.close");
}
});
</code></pre>
<p>The <em>required</em> css is quite minimal as well. To make it look good is another thing altogether. See the attached stylesheet.</p>
<pre><code> div.quickactions {
position: relative;
display: inline;
}
.quickactions .menu_toggle {
position: relative;
z-index: 15;
}
.quickactions .quickactions_menu {
position: absolute;
overflow: auto;
left: 0;
top: 1.5em;
width: 15em;
z-index: 10;
}</code></pre>
</body>
</html>