Buena opción para crear paneles y menús para un sitio web

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este ejemplo gratuito realizado con la pupular librería jQuery, permite a cualquier webmaster o diseñador de páginas, implementar un menú que se visualiza en forma contraida, y sólo se despliega y visualiza completamente cuando el usuario del sitio haga clic, muy útil para páginas con poco espacio.

También se puede utilizar para una barra lateral o sidebar, ya sea para colocarlo a la izquierda, a la derecha o inclusive en la parte inferior de la página web.

Cada sección de panel, puede ser utilizado para insertar una estructura de enlaces de nuestro sitio, o para insertar cualquier otro contenido web, por ejemplo: un clip de video, un formulario de contacto, texto, información, gráficos, noticias, novedades, etc ..

Este ejemplo como se mencionó es completamente gratis y de libre uso ( es software libre distribuido bajo licencia MIT y GPL).

Mas información sobre el programa.

Indice del contenido

  1. Menú superior
  2. Menú lateral.
  3. Mostrar un video dentro del panel.
  4. Instalación y configuración .
  5. Notas adicionales

1 - Menú superior.

Como se mencionó anteriormente, el menú se muestra como una ficha o tab en la parte superior de la página.

Vista previa del menú en estado normal.

Al pasar el mouse encima o al hacer clic se desplegará con las diferentes secciones, como se puede ver a continuación.

Este, además de poder utilizarce como cualquier menú de enlaces de una página web, también es posible utilizarlo para colocar dentro de sus submenú, otros elementos de página, como es el caso de: texto, formularios webs, imágenes, etc ..

A continuación puedes ver la captura de pantalla que se incluye junto al archivo de demostración.

Esta es la captura de pantalla de la otra sección que sólo contiene enlaces.

2 - Menú lateral

Para el Sidebar o menú lateral, es similar al utilizado en la parte superior de la página. El ejemplo o demo, muestra dos fichas o tabs.

Al hacer clic se mostrará el mismo con un simple efecto de slide. El primer menú ( el que tiene el tab de color negro ) contiene varias categorías. Cada una se puede desplegar mediante un botón que contiene a la vez, los enlaces web para cada sección.

El otro, al contrario de contener enlaces web, muestra contenido HTML, en este caso una imagen y texto, muy útil para presentar y desplegar información al visitante.

3 - Mostrar un video dentro del panel.

En la carpeta de descarga, también incluye otro ejemplo, que muestra como, a diferencia de los anteriores, poder visualizar un video.

Este funciona igual que el menú ubicado en la parte superior, pero no contiene enlaces, sino que al hacer clic para desplegarlo, se abrirá un panel donde se encuentra incrustado el video.

Nota: Este ejemplo se encuentra en el interior de la carpeta extruder_video, archivo demo_video.html.

4 - Instalación y configuración .

En esta direccion, puedes acceder a una wiki del proyecto oficial, con toda la documentación. Es una simple página que explica:

  • Los archivos dependientes que hay que incluir en la página ( sección head) para poder implementar el menú.
  • Las llamadas a las funciones Javascript para cada menú. Estas llamadas permiten configurar las opciones del mismo, por ejemplo la altura, ancho, la posición, transparencia, opciones de comportamiento, etc ..
  • Como definir el HTML para cada menú, es decir el bloque de código.
  • Por último describe 4 métodos para manipular las acciones de los paneles ( Habilitar, deshabilitar, mostrar, ocultar)

5 - Notas adicionales

Los archivos dependientes que necesitarás incluir en la sección HEAD de la página, son 4 archivos javascript ( sin incluir la librería jQuery).

  • jquery.hoverIntent.js
  • jquery.metaData.js
  • jquery.mb.flipText.js
  • mbExtruder.js.

El contenido para cada panel, se encuentran en otras páginas HTML externas, es decir que no se define en la misma página.

En el archivo de descarga podrás ver que el fichero de entrada del ejemplo (es el archivo demo.html), y en la carpeta parts, hay varios otros archivos HTML, cada uno de ellos para cada sección que conforman los paneles.

  • extruderTop.html, extr.components.html, extr.creativity.html. Son los archivos para el contenido del panel superior.
  • extr.network.html, extr.tw.html y extr.mti.html para el panel izquierdo superior.
  • extruderLeft1.html. Para el otro panel izquierdo ( el que no incluye enlaces web, es decir que el muestra imágenes y texto)

Requerimientos de instalación y uso.

Requiere : librería jQuery


Videos tutoriales.

No hay mas vistas previas y capturas..

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
Licencia:
Gratis - Software libre
Versión:
2.1
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: