Permalink
Browse files

Pin the page menu to the top left corner when scrolling

Quick, unobtrusive access to actions and other pages without scrolling
all the way back to the top.  Aileron only.

Thanks to Tom Wardrop for the suggestion and prototype in [rt3 #20811].
  • Loading branch information...
1 parent 80bca53 commit 45704434391dbb9ee85bcc3c23e05a126b453ebe @tsibley tsibley committed Sep 11, 2012
@@ -7,6 +7,13 @@ var initMenus = function() {
jQuery("#app-nav.toplevel").addClass('sf-menu sf-js-enabled sf-shadow').supersubs().superfish({ speed: 'fast' });
jQuery("#page-menu.toplevel").addClass('sf-menu sf-js-enabled').supersubs().superfish({ dropShadows: false, speed: 'fast' }).supposition();
+
+ var originalOffset = jQuery("#page-menu").offset().top;
+ var floatMenu = function () {
+ jQuery("#page-menu").toggleClass("pinned", jQuery(document).scrollTop() > originalOffset);
+ };
+ floatMenu();
+ jQuery(window).scroll(floatMenu);
};
// If everything is loaded, init NOW. Otherwise, defer to DOM ready.
@@ -162,3 +162,55 @@
#topactions #simple-search .field:focus {
color: #000;
}
+
+/* The bookmark star is too tall without adjusting the padding and height */
+
+.sf-menu .toggle-bookmark a {
+ padding: 0 1em;
+ height: 2.5em;
@alexmv
alexmv Sep 12, 2012 Contributor

Is a height in em really the right thing for an image? Or is this to match some other set height?

@tsibley
tsibley Sep 12, 2012 Contributor

This is to match the height of the other menu links which are 1em (font-size) + 0.75em * 2 (margins). 2.5em is a magic number used elsewhere as well. Note the element is a not img here.

+}
+
+.sf-menu .toggle-bookmark a img {
+ padding-top: 0.6em;
+}
+
+/* Pin page menu to top left corner once you scroll past it */
+
+#page-menu.pinned {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: auto;
+ width: auto;
+
+ background: white;
+ border-left: 1px #aaa solid;
+ border-bottom: 1px #aaa solid;
+ border-radius: 0 0 0 5px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.4);
+
+ /* stupid vendor prefixes */
+ -moz-border-radius: 0 0 0 5px;
+ -webkit-border-radius: 0 0 0 5px;
+ -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
+ -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
+}
+
+#page-menu.pinned li:hover ul,
+#page-menu.pinned li.sfHover ul {
+ border-left: 1px #aaa solid;
+ border-right: 1px #aaa solid;
+ z-index: -1 !important; /* relative to current stacking context */
+ box-shadow: 0 0 10px rgba(0,0,0,0.4);
+
+ -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
+ -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
+}
+
+/* round off the corner of the first menu item so it matches the container */
+#page-menu.pinned > li:first-of-type,
+#page-menu.pinned > li:first-of-type > a {
+ border-radius: 0 0 0 5px;
+ -moz-border-radius: 0 0 0 5px;
+ -webkit-border-radius: 0 0 0 5px;
+}
@@ -61,7 +61,7 @@ else {
$id
$Toggle => 0
</%ARGS>
-<span class="toggle-bookmark-<% $id %>">
+<span class="toggle-bookmark toggle-bookmark-<% $id %>">
% my $url = RT->Config->Get('WebPath') ."/Helpers/Toggle/TicketBookmark?id=". $id;
<a align="right" href="<% $url %>" onclick="jQuery.get(<% $url |n,j %>, function(data){ jQuery('.toggle-bookmark-'+<% $id |n,j%>).replaceWith(data) }); return false;" >
% if ( $is_bookmarked ) {

0 comments on commit 4570443

Please sign in to comment.