none
Como hacer que los submenus de un menu con orientacion vertical se desplacen hacia abajo

    Question

  • Hola, tengo un control asp menu con la propiedad orientation en vertical. Cuando selecciono una opcion del menu los submenus me aparecen al lado derecho. Quisiera saber si hay alguna forma de que en vez que aparezca a la derecha, cuando señale una opcion del menu los submenus aparezcan hacia abajo de manera dinamica. Agradecere sus respuestas.

    Saludos


    Juan Collazos

    Wednesday, July 11, 2012 9:39 PM

All replies

  • Creo que esa opción no esta disponible para ese control, te sugiero utilizar la librería AjaxControlToolkit e implementar el control AccordionPane que te genera el efecto que buscas...
    Wednesday, July 11, 2012 9:54 PM
  • Hola mdeveloper21

    Si bien esta opcion no esta disponible (como te comenta Eduardo) si se puede jugando un poco con css y javascript (me voy a ayudar con jquery)
    Asi que te dejo los pasos para comenzar o por lo menos dar el efecto simple (y luego lo mejoras)

    Aclaracion importante: Si estas con ASP.NET 2.0/3.5 puedes utilizar CssFriendlyAdapter y realizar esto mismo (busca en post anteriores en el foro). POrque en estas versiones el control renderia como tabla HTML

    Bueno, como sabras antes (2.0/3.5) el webcontrol Menu renderizaba a una tabla HTML (algo que en desarrollo web para un menu era algo que no podiamos aceptar) ya que los menu son mas manejables semanticamente incluso como listas html (UL/LI por ejemplo) y hay muchos ejemplos buscando por internet que veras utilizar esto y estilizarlo con css/javascript

    Entones... hagamos que el renderizado de este control en ASP.NET 4.0 nos pueda ayudar (en esta semana voy a mirar tambien como seria en 4.5) 
    BUeno como hacemos para que tenga un lindo codigo y limpio UL/LI

    Paso 1:
    Obligamos la renderizacion como lista (opcion por default): RenderingMode="List" 

    Paso 2: 
    Damosun estilo CSS personalizado para luego asignar colores: CssClass="menuAcordeon"
    (tambien para ubicarlo con jquery)

    PAso 3:
    Algo nuevo en ASP.NET 4.0 es la propiedad IncludeStyleBlock="true" 
    Que lo que hace es renderizar el estilo que necesita ASP.NET para adornar el menu directamente como atributo style dentro de los elementos del control o como estilos externos. Al colocar en true renderiza en al principio de la pagina los estilos necesarios (los cuales no vamos a utilizar) pero lo quita del control.
    (NOTA: Juega con la propiedad para ver como funciona)

    Paso 4:
    Quitar con javascript (en este caso jquery) todos los estilos de los controles internos que estan en el atributo style
    Ademas oculto el nivel 2 del menu (porque cuando quito los atributos styles se visualizan) para mostrarlos como "acordeon"

    Paso 5: 
    Agrego mis propios estilos al menu que ahora es un simple listado ul/li (bueno no tanto lo pedes ver luego tu mismo)


    Un ejemplo que lo puedes probar (y por supuesto extender)

    Si tenemos un menu:

    <asp:Menu ID="Menu1Accordion" runat="server" 
                    ClientIDMode="Static"  
                    Orientation="Vertical" 
                    IncludeStyleBlock="true" 
                    RenderingMode="List" 
                    CssClass="menuAcordeon">
                <Items>
                    <asp:MenuItem Text="Item 1" NavigateUrl="#">
                        <asp:MenuItem Text="Item 1.1" NavigateUrl="#"></asp:MenuItem>
                        <asp:MenuItem Text="Item 1.2" NavigateUrl="#"></asp:MenuItem>
                        <asp:MenuItem Text="Item 1.3" NavigateUrl="#"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Item 2" NavigateUrl="#">
                        <asp:MenuItem Text="Item 2.1" NavigateUrl="#"></asp:MenuItem>
                        <asp:MenuItem Text="Item 2.2" NavigateUrl="#"></asp:MenuItem>
                        <asp:MenuItem Text="Item 2.3" NavigateUrl="#"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Item 3" NavigateUrl="#">
                        <asp:MenuItem Text="Item 3.1" NavigateUrl="#"></asp:MenuItem>
                        <asp:MenuItem Text="Item 3.2" NavigateUrl="#"></asp:MenuItem>
                        <asp:MenuItem Text="Item 3.3" NavigateUrl="#"></asp:MenuItem>
                    </asp:MenuItem>
                </Items>
            </asp:Menu>

    Para el paso 4 tengo el siguiente script

    <script type="text/javascript">
            $(function () {
                $('.menuAcordeon').find('a,li,ul').removeAttr('style');
                $('.menuAcordeon ul li ul').hide();
            });       
        </script>

    y el paso 5.. los estilos simples (y coloridos)

    <style type="text/css"> 
        .menuAcordeon{}
        
        .menuAcordeon ul
        {
            background-color:Fuchsia;
        }
        
        .menuAcordeon ul li ul
        {
            background-color:Lime;
        }
        </style>

    y nos queda algo asi (lindo colores no?)


    IMPORTANTE: No tenia mucho tiempo pero esto amerita un post mas largo
    TE dejo investigar un poco mas para darle un efecto "slow" (mas despacio para visualizar los hijos de cada menu)
    Pero espero que se entienda la idea

    NOTA: interesante para entender el funcionamiento de control menu asi que se viene un post luego

    Enlaces que te pueden ayudar


    Espero que te sirva de ayuda o guia


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja

    Thursday, July 12, 2012 3:10 AM
  • Gracias x el aporte, la verdad me ha servido mucho, pero ahora se me ha presentado otro problema. Cuando le doy clic a una opcion del menu que contiene submenus o a un submenu directamente, me sale el error "Error en tiempo de ejecución de Microsoft JScript: '$' no está definido"; despues de eso ya no aparecen los submenus. Luego de que esto ocurre, al hacer clic en otros items del menu ya no se cargan con sus respectivos submenus.

    ¿Podrian ayudarme con esto? Se los agradecere bastante.

    Saludos


    Juan Collazos

    Friday, September 07, 2012 5:02 PM
  • Hola mdeveloper21

    Bueno ni me acordaba de estro luego de 2 meses, que te paso? no lo pudiste probar antes? je... igual justo el problema es un script cuando te comento " (me voy a ayudar con jquery)" es porque voy a utilizar esta libreria que es un framework javascript que nos ayuda en muchas tareas "cotidianas"

    El problema de la "$" es que no tienes jquery linkeado en tu pagina, y si ves el script que te pase utiliza jquery
      $('.menuAcordeon').find('a,li,ul').removeAttr('style');

    Fijate como agregarlo desde la pagina oficial
    http://jquery.com/

    O descargate el script y enlazalo a tu pagina

    Avisame si tienes algun problema


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja

    Friday, September 07, 2012 6:10 PM
  • lo que pasa es que ese error me salia cuando ya habia agregado el jquery a la pagina

    este es el codigo que uso:

    <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () { -----> aqui se dispara el mensaje de error (en el caracter $)
            $('.menuAcordeon').find('a,li,ul').removeAttr('style');
            $('.menuAcordeon ul li ul').hide();
        });


    </script>

    Como decia ya estoy llamando a la libreria pero aun asi ese error me sigue saliendo. Ahora bien,  testeando la pagina recien me he dado cuenta que dando clic tres veces vuelve a cargarse el menu con los submenus. La verdad no se porque sigue fallando. Agradecere de antemano su ayuda.

    Saludos


    Juan Collazos


    Friday, September 07, 2012 8:12 PM
  • Si colocas esto
        <script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>

    Tu pagina que estas accediendo debe tener en la misma carpeta la carpeta script, porque en el source que colocas src="Scripts/jquery-1.8.0.min.js" esta relativo a la pagina

    Como es al URL de la pagina donde accedes?
    Tienes directorio virtual en tu app? Algo asi: http://localhost:1234/directorioVirtual/pagina1.aspx
    Si es asi deberias para que siempre funcione la ubicacion del .js colocar en ASP.NET Webforms asi ayudandonos con el metodo ResolveClientUrl

    <script language="javascript" src="<%= ResolveClientUrl("~/Scripts/jquery-1.8.0.min.js")%>" type="text/javascript"/>

    Espero que te sirva de ayuda o guia


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja

    Friday, September 07, 2012 9:06 PM
  • cuando le puse el script de la forma que me dices salia un error, lo que hice fue ponerlo de esta forma :

    <script language="javascript" src="~/Scripts/jquery-1.8.0.min.js" type="text/javascript"/>

    pero ahora los submenus ya no aparecen de forma vertical...ahora si por mas que testeo y pruebo ya no se a que se debe. Antes de que apareciera el primer error que comente, solo cuando refrescaba la pagina recien salian los submenus en forma vertical.



    • Edited by mdeveloper21 Friday, September 07, 2012 10:46 PM
    Friday, September 07, 2012 10:10 PM
  • el tema en cuestion lo voy a pasar a otra pregunta donde pasare a explicarlo con mas detalles :

    http://social.msdn.microsoft.com/Forums/es-ES/netfxwebes/thread/ab4b8db7-5a81-4e11-98ed-1ee3927b5eb3


    Juan Collazos

    Saturday, September 08, 2012 3:15 PM