2010-04-16 15:29:05 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< title > Menu Static Test : Default< / title >
< link rel = "stylesheet" href = "../static.css" type = "text/css" / >
< link rel = "stylesheet" href = "../../../themes/base/jquery.ui.base.css" type = "text/css" / >
< link rel = "stylesheet" href = "../../../themes/base/jquery.ui.theme.css" type = "text/css" title = "ui-theme" / >
2011-11-22 13:54:02 +00:00
< script type = "text/javascript" src = "../../../jquery-1.7.1.js" > < / script >
2010-04-16 15:29:05 +00:00
< script type = "text/javascript" src = "../static.js" > < / script >
< script src = "http://jqueryui.com/themeroller/themeswitchertool/" type = "text/javascript" > < / script >
< script >
$(document).ready(function(){
$('#switcher').themeswitcher();
});
< / script >
< style type = "text/css" >
/* styles for this page only */
.ui-menu { width: 200px; }
#flyout .ui-menu { position: relative; }
#flyout .ui-menu.ui-menu-icons { position: absolute; }
.ui-menu.ui-menu-icons { position: relative; }
.ui-menu.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; }
/* left-aligned icon */
.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }
/* right-aligned icon */
.ui-menu .ui-icon.ui-menu-icon { position: static; float: right; }
< / style >
< / head >
< body >
< div id = "switcher" style = "position: absolute; top: 20px; right: 20px;" > < / div >
<!-- NOTES:
* Added "ui-menu-icons" class to set a left indent value for all menu items in a single menu
-->
< h2 > Default< / h2 >
< ul role = "menu" aria-activedescendant = "ui-active-menuitem" class = "ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-bottom" >
< li class = "ui-menu-item" role = "menuitem" > < a href = "#" tabindex = "-1" class = "ui-corner-all" > < span class = "ui-icon ui-icon-print" > < / span > Aberdeen< / a > < / li >
< li class = "ui-menu-item" role = "menuitem" id = "ui-active-menuitem" > < a href = "#" tabindex = "-1" class = "ui-state-hover ui-corner-all" > Ada< / a > < / li >
< li class = "ui-menu-item" role = "menuitem" > < a href = "#" tabindex = "-1" class = "ui-corner-all" > Adamsville< / a > < / li >
< li class = "ui-menu-item" role = "menuitem" > < a href = "#" tabindex = "-1" class = "ui-corner-all" > < span class = "ui-icon ui-icon-scissors" > < / span > Addyston really long menu option to show wrap< / a > < / li >
< li class = "ui-menu-item" role = "menuitem" > < a href = "#" tabindex = "-1" class = "ui-corner-all" > < span class = "ui-icon ui-icon-wrench" > < / span > Adelphi< / a > < / li >
< li class = "ui-menu-item" role = "menuitem" > < a href = "#" tabindex = "-1" class = "ui-corner-all" > < span class = "ui-icon ui-icon-star" > < / span > Adena< / a > < / li >
< li class = "ui-menu-item" role = "menuitem" > < a href = "#" tabindex = "-1" class = "ui-corner-all" > Adrian< / a > < / li >
< li class = "ui-menu-item" role = "menuitem" > < a href = "#" tabindex = "-1" class = "ui-corner-all" > Akron< / a > < / li >
< li class = "ui-menu-item" role = "menuitem" > < a href = "#" tabindex = "-1" class = "ui-corner-all" > Albany< / a > < / li >
< / ul >
< br / > < br / >
< div id = "drilldown" >
< h2 > Drilldown< / h2 >
< ul role = "listbox" aria-activedescendant = "ui-active-menuitem" class = "ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" >
< li role = "menuitem" class = "ui-menu-item" >
< a href = "#" tabindex = "-1" class = "ui-state-hover ui-corner-all" > < span class = "ui-icon ui-icon-print" > < / span > < span class = "ui-icon ui-menu-icon ui-icon-carat-1-e" > < / span > Amsterdam< / a >
< ul aria-activedescendant = "ui-active-menuitem" role = "listbox" class = "ui-menu ui-widget ui-widget-content ui-corner-all" style = "display: none;" >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Aberdeen< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Ada< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" >
< a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-menu-icon ui-icon-carat-1-e" > < / span > Adamsville< / a >
< ul aria-activedescendant = "ui-active-menuitem" role = "listbox" class = "ui-menu ui-widget ui-widget-content ui-corner-all" style = "display: none;" >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Anaheim< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" >
< a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-menu-icon ui-icon-carat-1-e" > < / span > Cologne< / a >
< ul aria-activedescendant = "ui-active-menuitem" role = "listbox" class = "ui-menu ui-widget ui-widget-content ui-corner-all" style = "display: none;" >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mberdeen< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mda< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mdamsville< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mddyston< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mmesville< / a > < / li >
< / ul >
< / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Frankfurt< / a > < / li >
< / ul >
< / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Addyston< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Amesville< / a > < / li >
< / ul >
< / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-star" > < / span > Anaheim< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-heart" > < / span > Cologne< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-key" > < / span > Frankfurt< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" >
< a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-menu-icon ui-icon-carat-1-e" > < / span > Magdeburg< / a >
< ul aria-activedescendant = "ui-active-menuitem" role = "listbox" class = "ui-menu ui-widget ui-widget-content ui-corner-all" style = "display: none;" >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mberdeen< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mda< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mdamsville< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mddyston< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mmesville< / a > < / li >
< / ul >
< / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Munich< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Utrecht< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Zurich< / a > < / li >
< / ul >
< / div >
< br / > < br / >
< div id = "flyout" >
< h2 > Flyout / nested< / h2 >
< ul aria-activedescendant = "ui-active-menuitem" role = "listbox" class = "ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" id = "menu" >
< li role = "menuitem" class = "ui-menu-item" >
< a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-scissors" > < / span > Amsterdam< / a >
< ul style = "display: block; top: 88.5px; left: 205px;" aria-activedescendant = "ui-active-menuitem" role = "listbox" class = "ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Aberdeen< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Ada< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" >
< a tabindex = "-1" class = "ui-state-active ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-print" > < / span > < span class = "ui-icon ui-menu-icon ui-icon-carat-1-e" > < / span > Adamsville< / a >
< ul style = "display: block; top: 73px; left: -11px; z-index: 9999;" aria-activedescendant = "ui-active-menuitem" role = "listbox" class = "ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Anaheim< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" >
< a tabindex = "-1" class = "ui-corner-all" href = "#" > Cologne< / a >
< ul style = "display: none;" aria-activedescendant = "ui-active-menuitem" role = "listbox" class = "ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mberdeen< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mda< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mdamsville< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mddyston< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mmesville< / a > < / li >
< / ul >
< / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-state-hover ui-corner-all" href = "#" > Frankfurt< / a > < / li >
< / ul >
< / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Addyston< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Amesville< / a > < / li >
< / ul >
< / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Anaheim< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-pencil" > < / span > Cologne< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-clock" > < / span > Frankfurt< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" >
< a tabindex = "-1" class = "ui-state-active ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-print" > < / span > < span class = "ui-icon ui-menu-icon ui-icon-carat-1-e" > < / span > Magdeburg< / a >
< ul style = "display: none;" aria-activedescendant = "ui-active-menuitem" role = "listbox" class = "ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mberdeen< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mda< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mdamsville< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mddyston< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Mmesville< / a > < / li >
< / ul >
< / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-lightbulb" > < / span > Munich< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > < span class = "ui-icon ui-icon-clipboard" > < / span > Utrecht< / a > < / li >
< li role = "menuitem" class = "ui-menu-item" > < a tabindex = "-1" class = "ui-corner-all" href = "#" > Zurich< / a > < / li >
< / ul >
< / div >
< / body >
< / html >
