[jQuery] Nuevas características de jQuery UI 1.9 – Parte III: Menú

Hola, siguiendo con los post sobre lo nuevo en jQuery UI 1.9 vamos a revisar el nuevo widget menú.

Lo primero para usar el menú es crear una lista, dicha lista se convertirá en el menú:

   1:  <div id="divMenu" style="width:180px;">
   2:      <ul>
   3:          <li><a href="#">Redes Sociales</a>
   4:              <ul>
   5:                  <li><a href="#">Facebook</a></li>
   6:                  <li><a href="#">Twitter</a></li>
   7:                  <li><a href="#">LinkedIn</a></li>
   8:              </ul>
   9:          </li>
  10:      </ul>
  11:  </div>

Luego las referencias a los archivos js necesarios:

   1:  <link rel="Stylesheet" href="css/jquery.ui.all.css" />
   2:  <script src="js/jquery-1.6.2.js"></script>
   3:  <script src="js/ui/jquery.ui.core.js"></script>
   4:  <script src="js/ui/jquery.ui.widget.js"></script>
   5:  <script src="js/ui/jquery.ui.menu.js"></script>

Y finalmente el código jQuery:

   1:  $(function(){
   2:      $("#divMenu ul").menu();
   3:  })

Lo único que se debe hacer es llamar el método menu. Finalmente lo que vamos a tener es algo como:

Imagen1

Como siempre les dejo el código con el ejemplo y nos vemos en el próximo post donde vamos a revisar el widget menubar.

Descarga el ejemplo!

You may also like...

4 Responses

  1. Pelusa says:

    Puede funcionar je mola que si se ve bien

  2. Hey this is kind of of off topic but I was wanting to know if blogs use WYSIWYG editors or
    if you have to manually code with HTML. I’m starting a blog soon but have no coding skills so I
    wanted to get guidance from someone with experience.

    Any help would be enormously appreciated!

  1. October 15, 2011

    […] [jQuery] Nuevas características de jQuery UI 1.9 – Parte III: Menú […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: