Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 13
Tutorial para Criar Menus

Nesse tutorial vamos mostrar como criar alguns tipos de Menus:
Um menu com a configuração padrão, itens desativados e menus aninhados. Uma lista é transformada, adicionando temas, suporte de navegação por mouse e teclado. Tente tabular até o menu e use as teclas do cursor para navegar. Para selecionar um menu basta colocar o cursor sobre o item desejado.
Exemplo 1:
Nesse exemplo vamos criar um menu padrão vertical com alguns submenus:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Menu - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#menu" ).menu(); } ); </script> <style> .ui-menu { width: 150px; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <ul id="menu"> <li><div>Brinquedos</div></li> <li><div>Livros</div></li> <li><div>Vestuário</div></li> <li><div>Eletrônica</div> <ul> <li class="ui-state-disabled"><div>Automação</div></li> <li><div>Arduino</div></li> <li><div>Notebooks</div></li> </ul> </li> <li><div>Filmes</div> <ul> <li><div>Ação</div></li> <li><div>Policial</div></li> <li><div>Suspense</div></li> </ul> <li><div>Música</div> <ul> <li><div>Rock</div> <ul> <li><div>Anos 50</div></li> <li><div>Anos 60</div></li> <li><div>Anos 70</div></li> </ul> </li> <li><div>Jazz</div> <ul> <li><div>Anos 50</div></li> <li><div>Anos 60</div></li> <li><div>Anos 70</div></li> </ul> </li> <li><div>MPB</div></li> </ul> </li> </ul> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 2:
Esse exemplo é um pouco diferente do anterior. Ele mostra um menu dividido em categorias, e você poderá também criar sumenus.
Usando a opção de itens, você pode configurar quais elementos são convertidos em itens de menu selecionáveis. Aqui esta técnica é usada para criar cabeçalhos de categorias.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI - Menu por Categorias</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#menu" ).menu({ items: "> :not(.ui-widget-header)" }); } ); </script> <style> .ui-menu { width: 200px; } .ui-widget-header { padding: 0.2em; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <ul id="menu"> <li class="ui-widget-header"><div>Tutoriais</div></li> <li><div>Pyton</div></li> <li><div>HTML5</div></li> <li><div>jQuery</div></li> <li class="ui-widget-header"><div>Simulados</div></li> <li><div>Pyton</div></li> <li><div>HTML5</div></li> <li><div>jQuery</div></li> </ul> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

Exemplo 3:
Nesse exemplo vamos mostrar como criar um menu com ícones.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstração do Componente UI - Menu com Icones</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#menu" ).menu(); } ); </script> <style> .ui-menu { width: 150px; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <ul id="menu"> <li> <div><span class="ui-icon ui-icon-disk"></span>Save</div> </li> <li> <div><span class="ui-icon ui-icon-zoomin"></span>Zoom In</div> </li> <li> <div><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</div> </li> <li class="ui-state-disabled"> <div><span class="ui-icon ui-icon-print"></span>Print...</div> </li> <li> <div>Playback</div> <ul> <li> <div><span class="ui-icon ui-icon-seek-start"></span>Prev</div> </li> <li> <div><span class="ui-icon ui-icon-stop"></span>Stop</div> </li> <li> <div><span class="ui-icon ui-icon-play"></span>Play</div> </li> <li> <div><span class="ui-icon ui-icon-seek-end"></span>Next</div> </li> </ul> </li> <li> <div>Import</div> <div>Export</div> </li> </ul> </body> </html>
Resultado:
Veja na imagem o resultado desse código:

<< Tutorial para Criar Calendários
Tutorial para Criar Sliders >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino