Skip to content

Instantly share code, notes, and snippets.

@JustLikeIcarus

JustLikeIcarus/gist:375606

Created April 22, 2010 18:23
Show Gist options
  • Save JustLikeIcarus/375606 to your computer and use it in GitHub Desktop.
Save JustLikeIcarus/375606 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu1').menu({
mode: 'static',
type: 'drilldown',
//selectCategories: true,
choose: function(event, ui) {
console.log('Selected item ', ui.item);
},
browse: function(event, ui) {
//console.log('Browsing item ', ui.item);
}
});
});
</script>
<style>
/* Styles for jQuery menu widget
Author: Maggie Wachs, maggie@filamentgroup.com
Date: September 2008
*/
/* REQUIRED STYLES - the menus will only render correctly with these rules */
.ui-menu-container { position: absolute; top:0; left:-999px; }
.ui-menu, .ui-menu ul { list-style-type:none; visibility:hidden; overflow: hidden; padding: 0; margin:0; }
.ui-menu { position:relative; }
.ui-menu ul { position:absolute; top:0; left:0; }
.ui-menu li { clear:both; float:left; width:100% !important; }
.ui-menu li li { font-size:1em; } /* inner li font size must be reset so that they don't blow up */
.ui-menu.ui-menu-flyout, .ui-menu.ui-menu-flyout ul { overflow: visible; }
/* REQIRED LINK STYLES: links are "display:block" by default; if the menu options are split into
selectable node links and 'next' links, the script floats the node links left and floats the 'next' links to the right */
.ui-menu a:link,
.ui-menu a:visited,
.ui-menu a:hover,
.ui-menu a:active { display:block; padding:.3em .6em; line-height:1.2em; text-decoration:none; outline: 0 !important; }
.ui-menu a.ui-state-hover:link,
.ui-menu a.ui-state-hover:visited,
.ui-menu a.ui-state-hover:hover,
.ui-menu a.ui-state-hover:active { border:0; }
.ui-menu .ui-arrow-right-default,
.ui-menu .ui-arrow-right-default:hover, .ui-menu .ui-arrow-right-hover,
.ui-menu .ui-arrow-right-default:active, .ui-menu .ui-arrow-right-active { background-position: right 50%; }
.ui-menu-crumb .ui-arrow-right-default,
.ui-menu-crumb. ui-arrow-right-default:hover, .ui-menu-crumb .ui-arrow-right-hover,
.ui-menu-crumb. ui-arrow-right-default:active, .ui-menu-crumb .ui-arrow-right-active { background-position: right 50% !important; }
/* SUGGESTED STYLES - for use with jQuery UI Themeroller CSS */
.ui-menu .ui-state-default { border:0; }
.ui-menu li { margin:1px 0; }
.ui-menu li.ui-widget-content { background:#fff; border-left:0; border-right:0; margin:0; }
.ui-menu-dd { clear:both; }
.ui-menu-dd.ui-widget-content,
.ui-menu-dd ul.ui-widget-content { border:0; }
.ui-menu-dd-breadcrumb { float:left; width:100%; margin:0; padding:.5em 0; }
.ui-menu-dd-breadcrumb.ui-widget-content { border-left:0; border-right:0; }
.ui-menu-dd-breadcrumb.ui-widget-content.ui-menu-footer { border-bottom:0; }
.ui-menu-dd-breadcrumb.ui-widget-content.ui-menu-header { border-top:0; }
.ui-menu-dd-breadcrumb li { float: left; list-style: none; margin: 0; padding:.1em .5em; }
.ui-menu-dd-breadcrumb li.ui-menu-prev-list,
.ui-menu-dd-breadcrumb li.ui-menu-current-crumb { clear: left; float: none; }
.ui-menu-dd-breadcrumb li.ui-menu-current-crumb { padding-top:.5em; }
.ui-menu-dd-breadcrumb a,
.ui-menu-dd-breadcrumb span { white-space:nowrap; font-size: 1em; }
.ui-menu-dd-breadcrumb a:link,
.ui-menu-dd-breadcrumb a:visited,
.ui-menu-dd-breadcrumb a:hover,
.ui-menu-dd-breadcrumb a:active { }
.ui-menu-dd-breadcrumb .ui-menu-prev-list.ui-arrow-left-default { background-position: left 50%; padding-left:12px; margin-left:.5em; }
.ui-menu-dd-breadcrumb .ui-menu-prev-list a:link,
.ui-menu-dd-breadcrumb .ui-menu-prev-list a:visited,
.ui-menu-dd-breadcrumb .ui-menu-prev-list a:hover,
.ui-menu-dd-breadcrumb .ui-menu-prev-list a:active { background-image: none; text-decoration:none; }
.ui-menu-dd-breadcrumb .ui-menu-current-crumb a:link,
.ui-menu-dd-breadcrumb .ui-menu-current-crumb a:visited,
.ui-menu-dd-breadcrumb .ui-menu-current-crumb a:hover,
.ui-menu-dd-breadcrumb .ui-menu-current-crumb a:active { display:block; background-image:none; font-size:1.3em; text-decoration:none; }
.ui-menu-dd a.ui-state-hover:link,
.ui-menu-dd a.ui-state-hover:visited,
.ui-menu-dd a.ui-state-hover:hover,
.ui-menu-dd a.ui-state-hover:active { border:0; }
.ui-menu.ui-menu-dd a.ui-menu-split-btn:link,
.ui-menu.ui-menu-dd a.ui-menu-split-btn:visited,
.ui-menu.ui-menu-dd a.ui-menu-split-btn:hover,
.ui-menu.ui-menu-dd a.ui-menu-split-btn:active { float:left; width:88%; padding:0; }
.ui-menu.ui-menu-dd a.ui-menu-nextlevel:link,
.ui-menu.ui-menu-dd a.ui-menu-nextlevel:visited,
.ui-menu.ui-menu-dd a.ui-menu-nextlevel:hover,
.ui-menu.ui-menu-dd a.ui-menu-nextlevel:active { float:right; width:12%; padding:0; }
.ui-menu a span { display:block; }
.ui-menu.ui-menu-dd a.ui-menu-split-btn span { float:left; padding:.3em .6em; }
.ui-menu.ui-menu-dd a.ui-menu-nextlevel span { float:right; padding:.3em .6em; text-indent:-9999px; overflow:hidden; }
.ui-menu.ui-menu-dd a.ui-menu-nextlevel span.ui-arrow-right-default { background-position: left center !important; }
.ui-menu-indicator span { float:right;}
</style>
</head>
<body>
<div id="menu1">
<ul>
<li><a href="#">Celebrity news</a></li>
<li><a href="#">Gossip</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Music</a>
<ul>
<li><a href="#">Alternative</a></li>
<li><a href="#">Country</a></li>
<li><a href="#">Dance</a></li>
<li><a href="#">Electronica</a></li>
<li><a href="#">Metal</a></li>
<li><a href="#">Pop</a></li>
<li><a href="#">Rock</a>
<ul>
<li><a href="#">Bands</a>
<ul>
<li><a href="#">Dokken</a></li>
</ul>
</li>
<li><a href="#">Fan Clubs</a></li>
<li><a href="#">Songs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Slide shows</a></li>
<li><a href="#">Red carpet</a></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment