Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Lista desplegable en Blogger

Estas en el tema de Lista desplegable en Blogger en el foro de HTML en Foros del Web. Hola a todos, ignoro bastante del tema de HTML, pero quisiera que me ayuden a colocar en una (o varias) página del blog una lista ...
  #1 (permalink)  
Antiguo 20/08/2016, 18:04
Avatar de HenryPintoC  
Fecha de Ingreso: abril-2016
Ubicación: Venezuela
Mensajes: 4
Antigüedad: 7 años, 11 meses
Puntos: 0
Busqueda Lista desplegable en Blogger

Hola a todos, ignoro bastante del tema de HTML, pero quisiera que me ayuden a colocar en una (o varias) página del blog una lista desplegable que me permita elegir o ir al contenido que quiero ver, pues claro al darle click en la selección quisiera se redirigiera a la otra pagina.

NOTA: aclaro que no es menú despegable.

Les muestro el codigo:
Código:
<div class="box" id="box_links" style="width: 999px;">
<div style="display: inline-block;">
<img alt="Filter" src="https://3.bp.blogspot.com/-NVDuRpZdPGM/V7h83WiXrSI/AAAAAAAAATM/zn65dGB3b8QkAYbNLvVfGC2T62Qlx9L7QCK4B/s1600/filter.gif" />
    <select id="mazmorra" name="mazmorra" style="margin: 5px 0 0 0;">
     <option value="0">Todas las Mazmorras: Mundo de Luz</option>
        <option value="1">1 - Catacumba profanada</option>
<option value="2">2 - Las minas de Gloria</option>
<option value="3">3 - Las ruinas de Gnark</option>
<option value="4">4 - La gruta del Cortacuellos</option>
<option value="5">5 - El altar de escama esmeralda</option>
<option value="6">6 - El árbol tóxico</option>
<option value="7">7 - El río de magma</option>
<option value="8">8 - El templo de la sangre helada</option>
<option value="9">9 - Las pirámides de la locura</option>
<option value="10">10 - La fortaleza de Cráneo oscuro</option>
<option value="11">11 - El circo del horror</option>
<option value="12">12 - El infierno</option>
<option value="13">13 - La 13.ª planta</option>
<option value="14">14 - Esteros</option> </select>
<br />
<br />
Lista de Mazmorras:<br />
<a href="https://shakesandfidgethispano.blogspot.com/p/mazmorra.html" style="display: block;">Todas las Mazmorras: Mundo de Luz</a>
<a href="https://shakesandfidgethispano.blogspot.com/p/mazmorra-1.html;schatten=" style="display: block;"><b>1 - Catacumba profanada</b>: ”Estos muertos están muy vivos.”</a>
<a href="https://shakesandfidgethispano.blogspot.com/p/mazmorra-2;schatten=" style="display: block;"><b>2 - Las minas de Gloria</b>: ”¡Ayho!, ¡Ayho! Al bosque a trabajar...”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=3&amp;schatten=" style="display: block;"><b>3 - Las ruinas de Gnark</b>: ”Frecuentadas por unos elementos...”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=4&amp;schatten=" style="display: block;"><b>4 - La gruta del Cortacuellos</b>: ”La lucha contra la piratería acaba de comenzar.”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=5&amp;schatten=" style="display: block;"><b>5 - El altar de escama esmeralda</b>: ”La vida está llena de muchos sacrificios.”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=6&amp;schatten=" style="display: block;"><b>6 - El árbol tóxico</b>: ”Sus raíces llegan a lo más profundo del infierno.”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=7&amp;schatten=" style="display: block;"><b>7 - El río de magma</b>: ”¡Qué calor que hace aquí!”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=8&amp;schatten=" style="display: block;"><b>8 - El templo de la sangre helada</b>: ”Se te helará la sangre sólo con verlo."</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=9&amp;schatten=" style="display: block;"><b>9 - Las pirámides de la locura</b>: ”No pierdas el juicio (o la vida).”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=10&amp;schatten=" style="display: block;"><b>10 - La fortaleza de Cráneo oscuro</b>: ”La fuerza del mal tiene hasta una tienda de souvenirs.”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=11&amp;schatten=" style="display: block;"><b>11 - El circo del horror</b>: "¡Humanos, animales, monstruos!".</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=12&amp;schatten=" style="display: block;"><b>12 - El infierno</b>: "No puede ser TAN malo...".</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=13&amp;schatten=" style="display: block;"><b>13 - La 13.ª planta</b>: "¡Entra si te atreves!".</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=14&amp;schatten=" style="display: block;"><b>14 - Esteros</b>: «Detrás del muro una tierra te llama...»</a>
</div>
</div>
Listo evidentemente, no se como funciona esto, ni se que es lo que hago! pero si me pueden ayudar se los agradezco:
les dejo en enlace para que que vean: [URL="https://shakesandfidgethispano.blogspot.com/p/prueba.html"]S&F Hispano - Prueba[/URL]
  #2 (permalink)  
Antiguo 21/08/2016, 03:56
Avatar de Iballa  
Fecha de Ingreso: marzo-2013
Mensajes: 107
Antigüedad: 11 años
Puntos: 6
Respuesta: Lista desplegable en Blogger

Hola HenryPintoC,
no entiendo bien cual es tu objetivo.

Arriba tienes una lista desplegable, y abajo tienes otra lista, que te lleva al contenido cuando pinchas una de las opciones de la lista.

¿Tu intención es que la segunda lista no salga, sino que cuando la primera se desplege, si clickas una opción te lleve al contenido (como pasa abajo)? No llego a entender cual sería tu resultado final deseado.
Salu2
  #3 (permalink)  
Antiguo 28/08/2016, 06:43
Avatar de HenryPintoC  
Fecha de Ingreso: abril-2016
Ubicación: Venezuela
Mensajes: 4
Antigüedad: 7 años, 11 meses
Puntos: 0
Información Respuesta: Lista desplegable en Blogger

Hola, bueno lo que busco es lo siguiente:



como se ve es una lista, actualmente doy click en una opcion y no se redirecciona... como dije no conozco del tema, por ello pense que la primera parte del codigo:

Código:
<div class="box" id="box_links" style="width: 999px;">
<div style="display: inline-block;">
<img alt="Filter" src="https://3.bp.blogspot.com/-NVDuRpZdPGM/V7h83WiXrSI/AAAAAAAAATM/zn65dGB3b8QkAYbNLvVfGC2T62Qlx9L7QCK4B/s1600/filter.gif" />
    <select id="mazmorra" name="mazmorra" style="margin: 5px 0 0 0;">
     <option value="0">Todas las Mazmorras: Mundo de Luz</option>
        <option value="1">1 - Catacumba profanada</option>
<option value="2">2 - Las minas de Gloria</option>
<option value="3">3 - Las ruinas de Gnark</option>
<option value="4">4 - La gruta del Cortacuellos</option>
<option value="5">5 - El altar de escama esmeralda</option>
<option value="6">6 - El árbol tóxico</option>
<option value="7">7 - El río de magma</option>
<option value="8">8 - El templo de la sangre helada</option>
<option value="9">9 - Las pirámides de la locura</option>
<option value="10">10 - La fortaleza de Cráneo oscuro</option>
<option value="11">11 - El circo del horror</option>
<option value="12">12 - El infierno</option>
<option value="13">13 - La 13.ª planta</option>
<option value="14">14 - Esteros</option> </select>
estaba enlazada con la 2da lista, que quedaría debajo del contenido:
Código:
<br />
<br />
Lista de Mazmorras:<br />
<a href="https://shakesandfidgethispano.blogspot.com/p/mazmorra.html" style="display: block;">Todas las Mazmorras: Mundo de Luz</a>
<a href="https://shakesandfidgethispano.blogspot.com/p/mazmorra-1.html;schatten=" style="display: block;"><b>1 - Catacumba profanada</b>: ”Estos muertos están muy vivos.”</a>
<a href="https://shakesandfidgethispano.blogspot.com/p/mazmorra-2;schatten=" style="display: block;"><b>2 - Las minas de Gloria</b>: ”¡Ayho!, ¡Ayho! Al bosque a trabajar...”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=3&amp;schatten=" style="display: block;"><b>3 - Las ruinas de Gnark</b>: ”Frecuentadas por unos elementos...”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=4&amp;schatten=" style="display: block;"><b>4 - La gruta del Cortacuellos</b>: ”La lucha contra la piratería acaba de comenzar.”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=5&amp;schatten=" style="display: block;"><b>5 - El altar de escama esmeralda</b>: ”La vida está llena de muchos sacrificios.”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=6&amp;schatten=" style="display: block;"><b>6 - El árbol tóxico</b>: ”Sus raíces llegan a lo más profundo del infierno.”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=7&amp;schatten=" style="display: block;"><b>7 - El río de magma</b>: ”¡Qué calor que hace aquí!”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=8&amp;schatten=" style="display: block;"><b>8 - El templo de la sangre helada</b>: ”Se te helará la sangre sólo con verlo."</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=9&amp;schatten=" style="display: block;"><b>9 - Las pirámides de la locura</b>: ”No pierdas el juicio (o la vida).”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=10&amp;schatten=" style="display: block;"><b>10 - La fortaleza de Cráneo oscuro</b>: ”La fuerza del mal tiene hasta una tienda de souvenirs.”</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=11&amp;schatten=" style="display: block;"><b>11 - El circo del horror</b>: "¡Humanos, animales, monstruos!".</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=12&amp;schatten=" style="display: block;"><b>12 - El infierno</b>: "No puede ser TAN malo...".</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=13&amp;schatten=" style="display: block;"><b>13 - La 13.ª planta</b>: "¡Entra si te atreves!".</a>
<a href="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=14&amp;schatten=" style="display: block;"><b>14 - Esteros</b>: «Detrás del muro una tierra te llama...»</a>
</div>
</div>
No es mentira que lo "tome" de una pagina: les dejo el link para que vean como funciona:
[URL="http://es.4m7.de/sammelalbum/dungeons.php?dungeon=1&schatten="]aqui tomé el codigo[/URL]

por como se ve, pensé que ambos codigos están enlazados... por como en el 1er codigo se ve:
select id="mazmorra" name="mazmorra" (el original tiene dungeon por mazmorra)

pero igual ayudenme o exploquenme
  #4 (permalink)  
Antiguo 07/09/2016, 11:02
Avatar de Ito79  
Fecha de Ingreso: diciembre-2013
Mensajes: 71
Antigüedad: 10 años, 3 meses
Puntos: 18
Respuesta: Lista desplegable en Blogger

Hola,

Para solucionarlo, puedes usar la libreria jQuery, y con ella controlas qué hacer cuando se cambie el valor de la Select. Lo más lógico sería redirigirlo a una URL con el valor seleccionado en la misma, el código sería algo como lo siguiente:

Código Javascript:
Ver original
  1. $(function() {
  2.         $("#nombreselect").change( function() {
  3.         var d = $(this).val();
  4.         window.location.href = "http://www.tuurl.com?valorseleccionado="+d;
  5.     });
  6. });

Un saludo
Ito
  #5 (permalink)  
Antiguo 10/09/2016, 09:42
Avatar de HenryPintoC  
Fecha de Ingreso: abril-2016
Ubicación: Venezuela
Mensajes: 4
Antigüedad: 7 años, 11 meses
Puntos: 0
De acuerdo Respuesta: Lista desplegable en Blogger

Bueno... como habia escrito no conozco del tema... tal vez por ello no di con la explicacion correcta... Busqué y encontré 2 formas de lograr de que la lista desplegable funcione, es decir, al seleccionar cualquier opción se redireccione a la opción (pagina web) que yo quisiera. Les muestro los códigos que encontré:

1era forma: PHP


Código PHP:
<script>
function 
irA(url){
location.href url;
}
</script>
<select onchange="irA(this.value)">
<option selected>Menu
<option value="index.htm">Indice
<option value="download.htm">Download
<option value="links.htm">Links
<option value="contacto.htm">Contacto
</select> 
Fuente: http://www.frihost.com/forums/vt-30449.html


2DA Forma: HTML/Javascript

Código HTML:
<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="desplegable" name="menu" size="1">
<option selected/>Seleccionar...
<option value=""/>- - - - - - - - - -
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
</select> 
Fuente: http://www.ciudadblogger.com/2009/08/menu-desplegable.html

Sólo sustituí la frase/indicación que esta entre comillas ("") por la url que deseaba y coloqué el título/nombre que quería.}
ambas formas me funcionaron, muy faciles de usar y editar para colocarle tantas opciones necesitaba. Disculpen lo engorroso y mal explicado pero gracias por responder.

Postdata: Gracias por una alternativa: : JQuery, pero no se como usarlo. sólo soy un simple aficionado.

Última edición por HenryPintoC; 10/09/2016 a las 09:48 Razón: mejorar visualizacion
  #6 (permalink)  
Antiguo 12/09/2016, 11:40
Avatar de Ito79  
Fecha de Ingreso: diciembre-2013
Mensajes: 71
Antigüedad: 10 años, 3 meses
Puntos: 18
Respuesta: Lista desplegable en Blogger

Hola,
Me alegro que hayas encontrado otras soluciones por tu cuenta. Realmente son muy parecidas, las tres usan javascript combinado con el HTML.

Si te interesa hacer desarrollos más complejos, echa un ojo a jQuery ya que te vendrá muy bien, si no, pues adelante (de las dos formas que has puesto, es más elegante la primera).

Un saludo
Ito

Etiquetas: blogger, desplegable, lista
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:03.