« Atrás

Barra de navegación siempre visible en Liferay 6.1 con Alloy

En este artículo pasamos a comentar cuáles son los pasos que debe seguir un desarrollador de temas en Liferay Portal para conseguir que la barra de navegación siempre esté visible, aún cuando el usuario hace scroll.

Introducción

Diseñar una web haciendo que su barra de navegación principal se encuentre siempre accesible es una práctica muy habitual. Existen infinidad de ejemplos, mostramos a continuación uno para que no haya confusión alguna.

Cuando el usuario hace scroll, DEBE seguir teniendo acceso a la barra de navegación:

Solución

Jorge Ferrer habla sobre una funcionalidad muy parecida en su artículo Feedback for Liferay 6: Global unified breadcrumb. En resumen, el tema Classic de Liferay Portal implementa unas Migas de Pan siempre visibles mediante la siguiente funcionalidad javascript:

AUI().ready('liferay-hudcrumbs', function(A) {
        
        var siteBreadcrumbs = A.one('.site-breadcrumbs');

        if (siteBreadcrumbs) {
            siteBreadcrumbs.plug(A.Hudcrumbs);
        }
    }
);


Entendiendo este concepto y como bien se indica en el artículo Easy Sticky-nav using alloy, podemos adaptarlo al problema que queremos resolver. El desarrollador debe modificar el tema (liferay theme) responsable del Look & Feel del portal añadiendo las siguientes líneas de el fichero main.js:

AUI().ready('liferay-hudcrumbs', function(A) {

        // Se recupera el elemento id="navigation"
        var navigation = A.one('#navigation');

        if (navigation) {
            navigation.plug(A.Hudcrumbs);
        }
    }
);

Como podéis ver, hemos adaptado el código JS para que el elemento HTML visible sea la barra de navegación:

<nav class="$nav_css_class" id="navigation">

    …

</nav>

Al añadir este código JavaScript, nuestro portal cambia su comportamiento, automáticamente, cuando el usuario hace scroll al final de la página HTML aparece una clonación de la barra, algo tal que así:

...
<nav  class="sort-pages modify-pages lfr-hudcrumbs" ...>
  <ul>
    <li class="selected"> ... </li>
    <li> ... </li>
    <li> ... </li>
    <li>… <li>
   </ul>
</nav>

Siguiendo el ejemplo que se estamos utilizando, el resultado sería algo tal que así:

Evidentemente, esto tal que así, no nos sirve para mucho. A partir de aquí, debemos utilizar CSS para aplicar estilos sobre la nueva barra de navegación. El portal inserta la barra de navegación clonada con un SELECTOR CSS de tipo class llamado lfr-hudcrumbs. Este será el selector que nos permita controlar dónde queremos que aparezca y con qué apariencia. Por ejemplo, si añadimos el siguiente código al fichero custom.css del tema con el que trabaja el desarrollador obtendremos cambios significativos en la barra clonada:

nav.lfr-hudcrumbs{
    
    position: fixed;
    z-index: 440;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    
    width: 530px !important;
    left: 52.2% !important;
     
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
    border-bottom-color: #0061A1;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-top-color: #0061A1;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: 0 0 4px #0061A1;
    
}

nav.lfr-hudcrumbs ul{
    list-style-type: none;
    margin: 0px !important;    
    
}

nav.lfr-hudcrumbs ul li{
    float: left;
    padding-bottom: 29px;
    padding-top: 29px;
    padding-left: 0px;
    padding-right: 0px;
}

nav.lfr-hudcrumbs ul li:selected{
    
    border-bottom-color: #0061A1;
    border-bottom-style: solid;
    border-bottom-width: 3px;
}

nav.lfr-hudcrumbs ul li:hover {
    border-bottom-color: #dc002e;
    border-bottom-style: solid;
    border-bottom-width: 3px;
}

nav.lfr-hudcrumbs ul li:hover a{
    color:     #dc002e;
}

nav.lfr-hudcrumbs ul li a{
    color: #0061A1;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    text-transform: lowercase;
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
}

La siguiente figura ilustra los cambios:

Una vez entendido el procedimiento, la aplicación sobre cualquiera de nuestros temas de Liferay es prácticamente inmediato y muy útil. Esperamos que el artículo sea de vuestro agrado.

 

Comentarios
comments powered by Disqus