HTML - Combinar 2 menús desplegables en la misma página

   
Vista:

Combinar 2 menús desplegables en la misma página

Publicado por LauraKas (1 intervención) el 04/07/2016 03:09:39
Hola a todos!

Mi consulta es la siguiente: estoy tratando de combinar un menú desplegable horizontal y uno vertical en la misma página. Pruebo cada menú por separado y están perfectos, pero al intentar combinarlos no se visualiza correctamente. Pego aquí el código que utilicé.

Si alguien podría indicarme dónde está el error lo agradeceré mucho, porque no veo dónde puede estar el error. Pueden ver cómo se visualiza en este enlace: http://campusaprendeconalas.com/segundo-b1/



<h4 style="text-align: center;">Segundo Grado - Bimestre 1</h4>
<p style="font-size: .8em; text-align: center;">Utiliza las pestañas de la izquierda para ver todas las semanas de trabajo.</p>

[tab_nav type="four-up"]
[tab_nav_item title="MATEMÁTICAS" active="true"]
[tab_nav_item title="ESPAÑOL" active=""]
[tab_nav_item title="CIENCIAS NATURALES" active=""]
[tab_nav_item title="FORMACIÓN CÍVICA" active=""]
[/tab_nav]

[tabs]

[tab active="true"]

[tab_nav type="eight-up" float="left"]
[tab_nav_item title="Semana 1" active="true"]
[tab_nav_item title="Semana 2" active=""]
[tab_nav_item title="Semana 3" active=""]
[tab_nav_item title="Semana 4" active=""]
[tab_nav_item title="Semana 5" active=""]
[tab_nav_item title="Semana 6" active=""]
[tab_nav_item title="Semana 7" active=""]
[tab_nav_item title="Semana 8" active=""]
[/tab_nav]

[tabs]

[tab active="true"]
<h4>Semana 1</h4>
[/tab]

[tab]
<h4>Semana 2</h4>

[/tab]

[tab]
<h4>Semana 3</h4>
[/tab]

[tab]
<h4>Semana 4</h4>
[/tab]

[tab]
<h4>Semana 5</h4>
[/tab]

[tab]
<h4>Semana 6</h4>
[/tab]

[tab]
<h4>Semana 7</h4>
[/tab]

[tab]
<h4>Semana 8</h4>
[/tab]
[/tabs]

[/tab]


[tab]
<h4>ESPAÑOL</h4>
[/tab]


[tab]
<h4>CIENCIAS NATURALES</h4>
[/tab]


[tab]
<h4>FORMACIÓN CÍVICA</h4>
[/tab]


[/tabs]



Aclaro que soy absolutamente autodidacta y estoy aprendiendo sobre la marcha. Gracias!
Laura.-
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Combinar 2 menús desplegables en la misma página

Publicado por Carolina Vazquez (7 intervenciones) el 04/07/2016 21:30:11
Hola no se mucho de este tema, asi que me puse a investigar para poder ayudarte y encontré algunas cosas que espero puedas experimentar y te puedan servir.

[b]Cómo realizarlo[/b]


Para realizar este truco necesitaremos crear la lista desplegable, colocando como parámetro VALUE la dirección de la página web e incluyendo un evento onChange (que se ejecuta cuando el usuario cambia la opción escogida en la lista) que llamará a una función que definiremos más adelante:

1
2
3
4
5
6
7
8
<FORM name="formulario">
  <SELECT NAME="menu" SIZE=1 onChange ="irA(this)">
    <OPTION VALUE="">Visitar
    <OPTION VALUE="http://www.ole.es">¡Olé!
    <OPTION VALUE="http://www.ozu.es">Ozú
    ...
  </SELECT>
</FORM>
La función irA recibe como parámetro this, que es una referencia al objeto actual, en este caso la lista. El código de dicha función será el siguente:

1
2
3
function irA(menu){
  window.location.href = menu.options[menu.selectedIndex].value;
}
Esta función cambia la dirección de la página actual por el valor de la opción (menu.options[...].value) que el usuario ha escogido (menu.selectedIndex).

es diferente a lo que tienes pero espero te sirva. Te dejo este link como segunda opción.

http://www.falconmasters.com/web-design/menu-desplegable-adaptable-dispositivos-moviles/

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar