Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@lucperkins

lucperkins/floatingMenu.css

Last active December 30, 2015 20:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lucperkins/7884411 to your computer and use it in GitHub Desktop.
Save lucperkins/7884411 to your computer and use it in GitHub Desktop.
Download ZIP
Here's a Gist for HTML/CSS/JS for a menu bar that is both draggable and resizable AND stores the height/width and position of the bar in local storage, so that the dimensions and position persist through refresh. There is a <p> element inside of the floating bar that is the only element that can be clicked on to drag the bar. This can be disable…
Raw
floatingMenu.css
#floatingMenu {
border: 1px solid black;
}
Raw
floatingMenu.js
$(document).ready(function() {
var LS = window.localStorage;
var floater = $('#floatingMenu');
var prepareLocalStorage = function() {
if (!LS['topOffset'] || !LS['leftOffset']) {
LS['topOffset'] = 0;
LS['leftOffset'] = 0;
}
if (!LS['floaterHeight'] || !LS['floaterWidth']) {
LS['floaterHeight'] = 500;
LS['floaterWidth'] = 250;
}
};
prepareLocalStorage();
var recordPosition = function() {
LS['topOffset'] = floater.offset().top;
LS['leftOffset'] = floater.offset().left;
}
var recordDimensions = function() {
LS['floaterHeight'] = floater.height();
LS['floaterWidth'] = floater.width();
}
floater
.draggable({
stop: recordPosition,
cursor: "move",
handle: "#dragMe"
})
.resizable({
minHeight: 500,
minWidth: 250,
aspectRatio: 1/2,
stop: recordDimensions
});
var topOffset = parseInt(LS['topOffset']);
var leftOffset = parseInt(LS['leftOffset']);
var floaterHeight = parseInt(LS['floaterHeight']);
var floaterWidth = parseInt(LS['floaterWidth']);
floater.offset({ top: topOffset, left: leftOffset });
floater.height(floaterHeight);
floater.width(floaterWidth);
$('input#close').click(function() { floater.hide(); $('input#open').show(); });
$('input#open').hide().click(function() { floater.show(); $(this).hide(); });
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="floatingMenu.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="application/javascript" src="floatingMenu.js"></script>
</head>
<body>
<div id="floatingMenu">
<input type="submit" id="close" value="CLOSE">
<p id="dragMe">Move me</p>
</div>
</body>
</html>
@thanj
Copy link

thanj commented Dec 10, 2013

Nice demo! I can see this being cool for games - like a rearrangable HUD?

In order to work in Firefox, the body and html elements need position:relative; height:100% - otherwise you can only drag vertically about 4px at a time, because the page isn't any taller than the floating menu.

@lucperkins
Copy link
Author

Sweet, thanks Than! I'm new to all this front end stuff you kids are doing nowadays, so cross-browser compatibility is a nut I haven't even begun to crack.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment