Skip to content

Instantly share code, notes, and snippets.

@jamesarosen

jamesarosen/ios-style.html

Created April 25, 2011 00:48
Show Gist options
  • Save jamesarosen/940018 to your computer and use it in GitHub Desktop.
Save jamesarosen/940018 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery-UI iOS-Style Menu - a work in progress, using jQuery-UI 1.8
Raw
ios-style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Menu - Contextmenu demo</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var demoUL = $("ul.demo")
demoUL.menu({
position: function(active) {
return {
my: 'left top',
at: 'right top',
of: active.closest('.ui-menu')
};
},
});
var menu = demoUL.data('menu.ui');
demoUL
// this depends on adding "this._trigger('show', null, submenu);" to the end of Menu#show()
.bind('menushow', function() {
demoUL.find('.ui-menu:visible').each(function(i, ul) {
$(ul).animate({ left: (ul.offsetLeft - 200) + 'px' }, 500);
});
})
// I don't like the use of the private "_startOpening()" here
.bind('menuselect', function(event, ui) {
var nested = $(">ul", ui.item);
if (nested.length) {
menu.active = ui.item;
menu._startOpening(nested);
}
});
});
</script>
<style>
.ui-menu {
height: 180px;
overflow: hidden;
position: relative;
width: 200px;
}
code { padding: 5px; }
</style>
</head>
<body>
<div>
<ul class='demo'>
<li>
<a href='#'>Europe</a>
<ul>
<li><a href="#">Amsterdam</a></li>
<li><a href="#">Cologne</a></li>
<li><a href="#">Frankfurt</a></li>
<li><a href="#">Magdeburg</a></li>
<li><a href="#">Munich</a></li>
<li><a href="#">Utrecht</a></li>
<li><a href="#">Zurich</a></li>
</ul>
</li>
<li>
<a href='#'>Americas</a>
<ul>
<li>
<a href='#'>North</a>
<ul>
<li><a href='#'>Boston</a></li>
<li><a href='#'>Calgary</a></li>
<li><a href='#'>Oaxaca</a></li>
<li><a href='#'>San Antonio</a></li>
</ul>
</li>
<li>
<a href='#'>South</a>
<ul>
<li><a href='#'>Bogota</a></li>
<li><a href='#'>Guatemala</a></li>
<li><a href='#'>Oranjestad</a></li>
<li><a href='#'>São Paolo</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="log"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>An iOS-style menu.</p>
<h2>Problems</h2>
<ul>
<li>requires a <code>"menushow"</code> event to be triggered at the end of <code>Menu#show()</code>
<li>relies on the private <code>Menu#_startOpening(ul)</code> method</li>
<li>position still isn't quite right on first submenu</li>
<li>no animation on deeper sub-menus</li>
</ul>
</div><!-- End demo-description -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment