jQuery UI exemplo - menu (Menu)
Interagir com o mouse eo teclado pode ser usado para navegar na theming menu.
Para mais detalhes sobre os componentes de menu, consulte a documentação da API componentes do menu (o menu widget) .
A função padrão
Com uma configuração padrão, desativar o nested entradas do menu e menu. Ele consiste de uma lista de temas convertidas e adicionadas e suporta mouse e teclado interação. Tente usar as teclas do cursor para navegar pelo menu.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI menu (Menu) - A função padrão </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Script> $ (Function () { $ ( "#menu") .menu (); }); </ Script> <Style> .ui-menu {width: 150px;} </ Style> </ Head> <Body> <Ul id = "menu"> <Li class = "-ui-estado desativado"> <a href="#"> Aberdeen </a> </ li> <Li> <a href="#"> Ada </a> </ li> <Li> <a href="#"> Adamsville </a> </ li> <Li> <a href="#"> Addyston </a> </ li> <Li> <a href="#"> Delphi </a> <Ul> <Li class = "-ui-estado desativado"> <a href="#"> Ada </a> </ li> <Li> <a href="#"> Saarland </a> </ li> <Li> <a href="#"> Salzburg </a> </ li> </ Ul> </ Li> <Li> <a href="#"> Saarland </a> </ li> <Li> <a href="#"> Salzburg </a> <Ul> <Li> <a href="#"> Delphi </a> <Ul> <Li> <a href="#"> Ada </a> </ li> <Li> <a href="#"> Saarland </a> </ li> <Li> <a href="#"> Salzburg </a> </ li> </ Ul> </ Li> <Li> <a href="#"> Delphi </a> <Ul> <Li> <a href="#"> Ada </a> </ li> <Li> <a href="#"> Saarland </a> </ li> <Li> <a href="#"> Salzburg </a> </ li> </ Ul> </ Li> <Li> <a href="#"> Perch </a> </ li> </ Ul> </ Li> <Li class = "ui-estado desativado"> <a href="#"> Amesville </a> </ li> </ Ul> </ Body> </ Html>
ícone
Menu com uma configuração padrão que mostra como usar os menus com ícones.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> menu de jQuery UI (Menu) - ícone </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Script> $ (Function () { $ ( "#menu") .menu (); }); </ Script> <Style> .ui-menu {width: 150px;} </ Style> </ Head> <Body> <Ul id = "menu"> <Li> <a href="#"> <span class = "ui-ui-ícone ícone de disco"> </ span> salvar </a> </ li> <Li> <a href="#"> <span class = "ui ui-icon-icon-zoomin"> </ span> Alargar </a> </ li> <Li> <a href="#"> <span class = "ui ui-icon-icon-zoomout"> </ span> refinar </a> </ li> <Li class = "ui-estado desativado"> <a href="#"> <span class = "ui ui-icon-icon-print"> </ span> Imprimir ... </a> </ li > <Li> <a href="#"> jogar </a> <Ul> <Li> <a href="#"> <span class = "ui ui-icon-icon-procuram-start"> </ span> em uma </a> </ li> <Li> <a href="#"> <span class = "ui-ui-ícone ícone-stop"> </ span> Pare </a> </ li> <Li> <a href="#"> <span class = "ui-ui-ícone ícone-play"> </ span> Jogar </a> </ li> <Li> <a href="#"> <span class = "ui ui-icon-icon-procuram-end"> </ span> próxima </a> </ li> </ Ul> </ Li> </ Ul> </ Body> </ Html>