jQuery - Menú de widgets

Descripción

los Widget MenuLa función se puede usar con widgets en JqueryUI. Un menú simple muestra una lista de elementos. Una lista se transforma, agregando compatibilidad con temas, mouse y navegación por teclado.

Sintaxis

Aquí está la sintaxis simple para usar el menú:

$( "#menu" ).menu();

Ejemplo

A continuación se muestra un ejemplo simple que muestra el uso del menú:

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Menu - Default functionality</title>
		
      <link rel = "stylesheet"
         href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
			
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
			
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>

      <script>
         $(function() {
            $( "#menu" ).menu();
         });
      </script>
		
      <style>
         .ui-menu { width: 150px; }
      </style>
   </head>
	
   <body>
      <ul id = "menu">
         <li class = "ui-state-disabled">Team</li>
         <li>Gopal K verma</li>
         <li>Omer</li>
         <li>Khaleel</li>
			
         <li>Prasanth
			
            <ul>
               <li class = "ui-state-disabled">Krishna</li>
               <li>Raju</li>
               <li>Sairamkrishna </li>
            </ul>
				
         </li>
			
         <li>Vineeth</li>
			
         <li>Rajeev
            <ul>
               <li>Lakshmi
                  <ul>
                     <li>Kiran</li>
                     <li>Sai</li>
                     <li>Javeed</li>
                  </ul>
               </li>
					
               <li>Raju
                  <ul>
                     <li>Arshad</li>
                     <li>Johar</li>
                     <li>Althamas</li>
                  </ul>
               </li>
					
               <li>Gopal</li>
            </ul>
         </li>
			
         <li class = "ui-state-disabled">Santosh</li>
      </ul>
   </body>
</html>

Esto producirá el siguiente resultado:

jquery-widgets.htm

↰ Previous page