Scribd Logo
Importer

Bienvenue sur Scribd !

  • Creacion de Menús Desplegables en HTML, Utilizando Funciones en Javascript

    Transféré par

    Gustavo Agostini
    20 vues11 pages
    Documento que muestra la forma de crear menues desplazables mediante funciones de Java Script y HMTL

    Titre original

    CREACION DE MENÚS DESPLEGABLES EN HTML, UTILIZANDO FUNCIONES EN JAVASCRIPT

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Documento que muestra la forma de crear menues desplazables mediante funciones de Java Script y HMTL

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    20 vues11 pages

    Creacion de Menús Desplegables en HTML, Utilizando Funciones en Javascript

    Transféré par

    Gustavo Agostini
    Documento que muestra la forma de crear menues desplazables mediante funciones de Java Script y HMTL

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 11

    CREACION DE MENS DESPLEGABLES

    EN HTML, UTILIZANDO FUNCIONES EN JAVASCRIPT

    _________
    ENERO 2006

    Mens desplegables en HTML

    Para la realizacin de mens desplegables se utiliz tablas y capas del


    lenguaje HTML para la creacin de los botones y cdigo en javascript para la
    animacin del men.

    Men Vertical
    Se crea una tabla en el lugar donde uno quiera ubicar el men, con
    tantas filas como botones principales tiene el men. Dentro de cada celda se
    define una capa con el mismo tamao de la celda. Estas capas sern las que
    darn origen a los distintos botones. En cada capa, se establece el texto
    necesario de cada botn.
    Para crear los distintos submens, dentro de la capa principal
    correspondiente se crea otra capa, y dentro de esta una tabla y se repite el
    proceso inicial.

    HTML
    <!-- Men Desplegable desarrollado por Gustavo Agostini para SCANIA Argentina Tucumn.
    Men desplegable vertical -->
    <HTML>
    <HEAD>
    <title>Men Desplegable</title>
    <script language="javascript" src="animacion.js"> </script>
    <link rel="stylesheet" type="text/css" href="estilos.css">
    </HEAD>
    <!-- El archivo animacion.js contiene los comandos en JavaScript que dan lugar a las siguientes
    tres funciones:
    * MostrarOcultarCapa('Objeto','accion')
    Esta funcion tiene a su cargo mostrar y ocultar el menu desplegable. El argumento Objeto hace
    referencia al nombre de la Capa a ocultar o mostrar. El argumento accion puede tomar los
    siguientes dos valores:
    -mostrar
    -ocultar
    * Resaltar('Objeto','color')
    Esta funcion tiene a su cargo cambiar el color de background de un objeto, en general de una
    capa. Con esto se consigue el efecto de resalte de los botones cuando el mouse se posa sobre
    este.
    * MostrarTextoEstado('mensaje')
    Esta funcion muestra el mensaje en la barra de estado del navegador.

    Asimismo el archivo estilos.css contiene los estilos utilizados en toda la pagina, de donde se
    destaca la propiedad:

    Mens desplegables en HTML

    - Cursor: Esta propiedad se encuentra en el estilo de las capas y define que tipo de cursor
    poseeran los botones.
    -->
    <BODY>
    <!-- A continuacion se define la tabla con la etiqueta table de html -->
    <table>
    <!-- Luego se define la primera fila con la etiqueta tr de html -->
    <tr>
    <!-- Se define la primera columna con la etiqueta td de html y se establece la altura del boton
    principal con el atributo height. Este valor se establece en pixeles. -->
    <td height="15">
    <!-- Dentro de la celda establecida por la primera fila y la primera columna, se crea la primera
    capa que dara lugar al primer boton del men principal. Para ello se utiliza la etiqueta DIV de
    HTML con los siguientes atributos y eventos:
    Atributos
    align: Establece la alineacion del texto del boton.
    class: Establece el estilo que utilizara el boton, es decir tipo, tamao y color de la fuente, color
    de background, etc.
    id: Establece el nombre de la capa y da lugar a los estilos de capa definidos en la hoja de
    estilos.
    Eventos
    onMouseOver: Desencadena un evento cuando el mouse se posa sobre la capa. En este caso
    llama a una de las fuciones definidas en el archivo de javascript.
    onMouseOut: Desencadena un evento cuando el mouse se posa fuera de la capa.
    -->
    <div align="center" class="Boton" id="Capa1"
    onMouseOver="MostrarOcultarCapa('Despliegue1','mostrar');Resaltar('Capa1','#000000')"
    onMouseOut="MostrarOcultarCapa('Despliegue1','ocultar');Resaltar('Capa1','#0094BF')">
    <!-- Ahora se establece el texto del boton -->
    MEN&Uacute; 1
    <!-- Hasta aqui hemos definido el primer boton del men desplegable. Ahora definiremos los
    botones del men que se despliega. Como primera medida crearemos una capa que
    representa al menu que se despliega
    -->
    <div id="Despliegue1">
    <!-- Dentro de esta capa creamos una tabla que albergara los distintos botones del menu
    desplegado. Se define aqui el ancho de la table que debera ser coincidente con el ancho de los
    botones, el tipo de borde a utilizar y el espaciado entre celdas utilizado -->
    <table width="100" border="0" cellspacing="0">
    <!-- Se define la primera fila y la primera columna de la tabla. -->
    <tr>
    <td>
    <!-- Se especifica el hipervinculo del primer boton del menu desplegado. Se lo introduce aqui
    porque pretendemos que todo el boton, y no solo el texto sea un hipervinculo.

    Mens desplegables en HTML

    -->
    <a href="http://scania-la/stu/Default.asp">
    <!-- Aqui se especifica la capa que definira el primer boton, con los mismos atributos y eventos
    antes mencionados -->
    <div id="Subcapa1" align="center" class="Boton"
    onMouseOver="Resaltar('Subcapa1','#000000');MostrarTextoEstado('Submen&uacute;
    1');return true" onMouseOut="Resaltar('Subcapa1','#0094bf');MostrarTextoEstado('')">
    <!-- Aqui va el texto del boton -->
    SUBMEN&Uacute; 1 </div>
    </a> </td>
    </tr>
    <!-- Se define la segunda fila, en la primera columna dando lugar al segundo boton. Asimismo
    se define el hipervinculo y la capa con los atributos y eventos correspondientes. Como se ve el
    hipervinculo puede estar relacionado a una URL de alguna pagina web o a una direccion de
    alguna carpeta, local o de la red. -->
    <tr>
    <td>
    <a href="file://ssa573">
    <div id="Subcapa2" align="center" class="Boton"
    onMouseOver="Resaltar('Subcapa2','#000000');MostrarTextoEstado ('Submen&uacute;
    2');return true" onMouseOut="Resaltar('Subcapa2','#0094BF')"> SUBMEN&Uacute; 2
    </div></a> </td>
    </tr>
    </table>
    </div>
    </div></td>
    </tr>
    <!-- Con esto que acabamos de realizar termina el primer boton con su menu desplegable. A
    continuacion se crea otro boton principal sin submenu y con hipervinculo -->
    <tr>
    <td height="15">
    <a href="http://www.google.com.ar">
    <div class="Boton" align="center" id="Capa2"
    onMouseOver="Resaltar('Capa2','#000000'); MostrarTextoEstado('Men&uacute; 2'); return true"
    onMouseOut="Resaltar('Capa2','#0094bf');MostrarTextoEstado('')"> MEN&Uacute; 2 </div>
    </a>
    </td>
    </tr>
    </table>
    </BODY>
    </HTML>

    Mens desplegables en HTML

    HOJA DE ESTILOS
    El archivo estilo estilos.css contiene los siguientes estilos:
    <style type="text/css">
    <!-body {
    background-color: #E0E0E0;
    }

    .Boton {
    color: #FFFFFF;
    font-size: 10px;
    font-style: normal;
    text-decoration: none;
    }
    #Capa1 {
    position:absolute;
    width:96px;
    height:15px;
    z-index:2;
    background-color: #0094BF;
    cursor: default;
    }
    #Capa2 {
    position:absolute;
    width: 96px;
    height:15px;
    z-index:2;
    background-color: #0094BF;
    cursor:default;
    }
    #Despliegue1 {
    position:absolute;
    width:100px;
    height:104px;
    z-index:3;
    top: -1px;
    visibility: hidden;
    left: 96px;
    }
    #Subcapa1 {
    position:fixed;
    width:100px;
    height:15px;
    z-index:3;
    cursor: hand;
    background-color: #0094BF;
    }
    #Subcapa2 {
    position:fixed;
    width:100px;
    height:15px;

    Mens desplegables en HTML

    z-index:3;
    cursor: hand;
    background-color: #0094BF;
    }

    -->
    </style>

    JAVASCRIPT
    El archivo animacion.js contiene el siguiente cdigo:
    function Resaltar(NombreObjeto,Color){
    var Propiedad = "style.backgroundColor";
    eval(NombreObjeto + "." + Propiedad + "='" + Color + "'");
    }
    function MostrarTextoEstado(mensaje) {
    status=mensaje;
    }
    function MostrarOcultarCapa(objeto, accion) {
    if (accion=='mostrar') accion='visible'
    else if (accion=='ocultar') accion='hidden'
    eval(objeto+".style.visibility='"+accion+"'");
    }

    Mens desplegables en HTML

    Men Horizontal
    Se crea una tabla en el lugar donde uno quiera ubicar el men, con
    tantas columnas como botones principales tiene el men. Dentro de cada celda
    se define una capa con la misma altura de la celda y con un ancho un poco
    menor que esta ultima. Estas capas sern las que darn origen a los distintos
    botones. En cada capa, se establece el texto necesario de cada botn.
    Para crear los distintos submens, dentro de la capa principal
    correspondiente se crea otra capa, y dentro de esta una tabla y se repite el
    proceso inicial.
    La principal diferencia con el men vertical es la introduccin del atributo
    width en la definicin de las columnas y el ajuste de los atributos de la hoja de
    estilos
    top y left en la capa correspondiente al men desplegado
    (Despliegue1).

    HTML
    <!-- Men Desplegable desarrollado por Gustavo Agostini para SCANIA Argentina Tucumn.
    Men desplegable horizontal -->
    <HTML>
    <HEAD>
    <title>Men Desplegable</title>
    <script language="javascript" src="./animacion.js"> </script>
    <link rel="stylesheet" type="text/css" href="./estilos.css">
    </HEAD>
    <!-- El archivo animacion.js contiene los comandos en JavaScript que dan lugar a las siguientes
    tres funciones:
    * MostrarOcultarCapa('Objeto','accion')
    Esta funcion tiene a su cargo mostrar y ocultar el menu desplegable. El argumento Objeto hace
    referencia al nombre de la Capa a ocultar o mostrar. El argumento accion puede tomar los
    siguientes dos valores:
    -mostrar
    -ocultar
    * Resaltar('Objeto','color')
    Esta funcion tiene a su cargo cambiar el color de background de un objeto, en general de una
    capa. Con esto se consigue el efecto de resalte de los botones cuando el mouse se posa sobre
    este.
    * MostrarTextoEstado('mensaje')
    Esta funcion muestra el mensaje en la barra de estado del navegador.

    Asimismo el archivo estilos.css contiene los estilos utilizados en toda la pagina, de donde se
    destaca la propiedad:
    - Cursor: Esta propiedad se encuentra en el estilo de las capas y define que tipo de cursor
    poseeran los botones.

    Mens desplegables en HTML

    -->
    <BODY>
    <!-- A continuacion se define la tabla con el comando table de html -->
    <table>
    <!-- Luego se define la primera fila con el comando tr de html -->
    <tr>
    <!-- Se define la primera columna con el comando td de html y se establece la altura del boton
    principal con el atributo height. Tambien se establece el ancho del boton (en combinacion con
    el ancho de la capa en la hoja de estilos). Estos valores se establecen en pixeles. -->
    <td height="15" width="97">
    <!-- Dentro de la celda establecida por la primera fila y la primera columna, se crea la primera
    capa que dara lugar al primer boton del men principal. Para ello se utiliza la etiqueta DIV de
    HTML con los siguientes atributos y eventos:
    Atributos
    align: Establece la alineacion del texto del boton.
    class: Establece el estilo que utilizara el boton, es decir tipo, tamao y color de la fuente, color
    de background, etc.
    id: Establece el nombre de la capa y da lugar a los estilos de capa definidos en la hoja de
    estilos.
    Eventos
    onMouseOver: Desencadena un evento cuando el mouse se posa sobre la capa. En este caso
    llama a una de las fuciones definidas en el archivo de javascript.
    onMouseOut: Desencadena un evento cuando el mouse se posa fuera de la capa.
    -->
    <div align="center" class="Boton" id="Capa1"
    onMouseOver="MostrarOcultarCapa('Despliegue1','mostrar');Resaltar('Capa1','#000000')"
    onMouseOut="MostrarOcultarCapa('Despliegue1','ocultar');Resaltar('Capa1','#0094BF')">
    <!-- Ahora se establece el texto del boton -->
    MEN&Uacute; 1
    <!-- Hasta aqui hemos definido el primer boton del men desplegable. Ahora definiremos los
    botones del men que se despliega. Como primera medida crearemos una capa que
    representa al menu que se despliega
    -->
    <div id="Despliegue1">
    <!-- Dentro de esta capa creamos una tabla que albergara los distintos botones del menu
    desplegado. Primero se define una tabla cuya finalidad es la de dar la separacin entre el menu
    principal y el submenu. La propiedad height regula esta distancia. Esta propiedad debe ser
    mayor que el alto de la capa de despliegue. Luego se define la tabla que albergara los botones
    del submenu. Se define el ancho de la tabla que debera ser coincidente con el ancho de los
    botones, el tipo de borde a utilizar y el espaciado entre celdas utilizado -->
    <table border="0" cellspacing="0">
    <tr>
    <td height="34" valign="bottom">
    <table width="100" border="0" cellspacing="0">
    <!-- Se define la primera fila y la primera columna de la tabla. -->

    Mens desplegables en HTML

    <tr>
    <td>
    <!-- Se especifica el hipervinculo del primer boton del menu desplegado. Se lo introduce aqui
    porque pretendemos que todo el boton, y no solo el texto sea un hipervinculo.
    -->
    <a href="http://scania-la/stu/Default.asp">
    <!-- Aqui se especifica la capa que definira el primer boton, con los mismos atributos y eventos
    antes mencionados -->
    <div id="Subcapa1" align="center" class="Boton"
    onMouseOver="Resaltar('Subcapa1','#000000');MostrarTextoEstado('Submen&uacute;
    1');return true" onMouseOut="Resaltar('Subcapa1','#0094bf');MostrarTextoEstado('')">
    <!-- Aqui va el texto del boton -->
    SUBMEN&Uacute; 1 </div>
    </a> </td>
    </tr>
    <!-- Se define la segunda fila, en la primera columna dando lugar al segundo boton. Asimismo
    se define el hipervinculo y la capa con los atributos y eventos correspondientes. Como se ve el
    hipervinculo puede estar relacionado a una URL de alguna pagina web o a una direccion de
    alguna carpeta, local o de la red. -->
    <tr>
    <td>
    <a href="file://ssa573">
    <div id="Subcapa2" align="center" class="Boton"
    onMouseOver="Resaltar('Subcapa2','#000000');MostrarTextoEstado ('Submen&uacute;
    2');return true" onMouseOut="Resaltar('Subcapa2','#0094BF')"> SUBMEN&Uacute; 2
    </div></a> </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    </div></td>
    <!-- Hasta aqui la realizacin del primer boton con su submenu. Ahora crearemos otro boton
    pero sin submen, con hipervinculo -->
    <td height="15" width="20">
    <a href="http://www.google.com.ar">
    <div class="Boton" align="center" id="Capa2"
    onMouseOver="Resaltar('Capa2','#000000'); MostrarTextoEstado('Men&uacute; 2'); return true"
    onMouseOut="Resaltar('Capa2','#0094bf');MostrarTextoEstado('')"> MEN&Uacute; 2 </div>
    </a>
    </td>
    </tr>
    </table>
    </BODY>
    </HTML>

    Mens desplegables en HTML

    HOJA DE ESTILOS
    <style type="text/css">
    <!-body {
    background-color: #E0E0E0;
    }

    .Boton {
    color: #FFFFFF;
    font-size: 10px;
    font-style: normal;
    text-decoration: none;
    }
    #Capa1 {
    position:absolute;
    width:96px;
    height:15px;
    z-index:2;
    background-color: #0094BF;
    cursor: default;
    }
    #Capa2
    {
    position:absolute;
    width: 96px;
    height:15px;
    z-index:2;
    background-color: #0094BF;
    cursor:hand;
    }
    #Despliegue1 {
    position:absolute;
    width:100px;
    height:30px;
    z-index:3;
    top: 15.5px;
    left: -1px;
    visibility: hidden;
    }
    #Subcapa1 {
    position:fixed;
    width:100px;
    height:15px;
    z-index:3;
    cursor: hand;
    background-color: #0094BF;
    }
    #Subcapa2 {
    position:fixed;
    width:100px;
    height:15px;
    z-index:3;
    cursor: hand;

    10

    Mens desplegables en HTML

    background-color: #0094BF;
    }

    -->
    </style>

    JAVASCRIPT
    function Resaltar(NombreObjeto,Color){
    var Propiedad = "style.backgroundColor";
    eval(NombreObjeto + "." + Propiedad + "='" + Color + "'");
    }
    function MostrarTextoEstado(mensaje) {
    status=mensaje;
    }
    function MostrarOcultarCapa(objeto, accion) {
    if (accion=='mostrar') accion='visible'
    else if (accion=='ocultar') accion='hidden'
    eval(objeto+".style.visibility='"+accion+"'");
    }

    11

    Vous aimerez peut-être aussi