Sample Menu inside Dialog
a sex-ification of the jquery ui menu
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css">
<div id="dialog" title="Please select a website">
<ul id="list">
<li><a href="#1">a.h1x.com</a></li>
<li><a href="#2">carroll.edu</a></li>
<li><a href="#3">nathan.isasecret.com</a></li>
<li><a href="#4">nathanjkwoods.com</a></li>
<li><a href="#5">nathanjwoods.com</a></li>
<li> moi <ul id="list">
<li><a href="#1">a.h1x.com</a></li>
<li><a href="#2">carroll.edu</a></li>
<li><a href="#3">nathan.isasecret.com</a></li>
<li><a href="#4">nathanjkwoods.com</a></li>
<li><a href="#5">nathanjwoods.com</a></li>
</ul>
</li>
</ul>
</div>
CSS
.ui-widget {font-size:62.5%}
JavaScript
dialog = $('#dialog').hide().dialog({
autoOpen: false,
resizable: false,
draggable: false,
closeOnEscape: false,
create: function(event, ui) {
$(this).parent().find(".ui-dialog-titlebar-close").hide();
}
});
menu = dialog.find('ul').css({'width':'200px', 'margin':'20px auto'});
// build menu here
menu.append($('<li><a href="#6">brand.new</a></li>'));
menu.append('<li><a href="#7">brand.new.two</a></li>');
menu.menu().find('a').click(function() {
alert($(this).attr('href').substr(1));
}).addClass('ui-state-default').css('padding', '3px 10px').not(':last').css('margin-bottom', '.3em');
dialog .dialog('open');