[SOLUCIONADO] Lista desplegable en Blogger

HenryPintoC · #1 (**permalink**) 20/08/2016, 18:04

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]

Iballa · #2 (**permalink**) 21/08/2016, 03:56

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

HenryPintoC · #3 (**permalink**) 28/08/2016, 06:43

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

Ito79 · #4 (**permalink**) 07/09/2016, 11:02

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$(function() {
        $("#nombreselect").change( function() {
        var d = $(this).val();
        window.location.href = "http://www.tuurl.com?valorseleccionado="+d;
    });
});

Un saludo
Ito

HenryPintoC · #5 (**permalink**) 10/09/2016, 09:42

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.

Ito79 · #6 (**permalink**) 12/09/2016, 11:40

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