Ramon Torras

TECHNOLOGY ENTHUSIAST

Acordeón en el menú lateral (left Nav)

Si queremos modificar el menú de navegación actual (Left Nav) para convertirlo en un acordeón existen ya unas cuantas soluciones.

 

Se puede hacer sin necesidad de instalar ningún pluggin de SilverLight ni instalar AJAX Extensions en el servidor mediante JQUERY (En los tres casos).

Primero os cuento la que más me ha gustado debido a su simplicidad:

1ª Opción

Un codigo en Javascript en una webpart de editor de contenidos o directamente en la masterpage:

<script type= text/javascript src= http://www.google.com/jsapi ></script>

<script type= text/javascript >

  // Load jQuery

  google.load( jquery , 1.2.6 );

</script>

<script type= text/javascript >

$(function(){

//initialize menus

    var menuRows = $( [id$=’QuickLaunchMenu’] > tbody > tr );

    var menuHd = menuRows.filter( [id!=”]:has(+tr[id=”]) );

    //set img path for when submenu is hidden

    var closedImg = /_layouts/images/Menu1.gif ;

    //set img path for when submenu is visible

    var openedImg = /_layouts/images/ptclose.gif ;

    var cssInit = {

        background-image : url(‘ +closedImg+ ‘) ,

        background-repeat : no-repeat ,

         background-position : 100% 50%

    }

    var cssClosed = { background-image : url(‘ +closedImg+ ‘) }

    var cssOpen = { background-image : url(‘ +openedImg+ ‘) }

    //hide submenus

    menuRows.filter( [id=”] ).hide();

    //apply initial inline style to menu headers

    menuHd.find( td:last ).css(cssInit);

    menuHd.click(function () {

        var styleElm = $(this).find( td:last )

        var nextTR = $(this).next( tr[id=”] );

        if (nextTR.is(‘:visible’)) {

            nextTR.hide();

            styleElm.css(cssClosed);

        } else {

            nextTR.show();

            styleElm.css(cssOpen);

        }

    });

});

</script>

 

         

          Fuente:  http://www.endusersharepoint.com/?p=985

 

2ª Opción

No tener que tocar nada de código. Ya esta compilado en una solución para SharePoint.

Captura:

                Fuente:

Fuente: http://www.codeplex.com/quicklaunchextender

3ª Opción

Otro código pero esta vez esta en un fichero .js que se tiene que situar dentro de la carpeta del sitio raíz.

La única ventaja que tiene esta opción es que la apertura y el cierre del acordeón es progresivo.

Para que aplique, se tiene que añadir los links a los .js en el tag HEADER de la MasterPage.

<script src= /scripts/jquery-1.2.6.min.js type= text/javascript language= javascript ></script>
<script src= /scripts/accordion.js type= text/javascript language= javascript ></script>

 

Descargar zip Con los ficheros .js

 

Fuente: http://www.deviantpoint.com/post/2009/01/16/Creating-an-accordion-style-SharePoint-Quick-Launch-menu-with-jQuery.aspx

 

Saludos

Comments are currently closed.