6

Quisiera hacer que mi menú desplegable se pueda actualizar desde un único archivo.
Me explico: En mi web tengo un menú general, este menú esta en un archivo que se llama nav.html cada vez que yo añado una nueva sección a mi web, tan solo me tengo que dirigir a este archivo nav.html y ahí pongo mi nueva sección. Esto me evita de ir a cada pestaña de la web y poner una por una la nueva sección. Quiero hacer lo mismo pero con un menú desplegable que tengo. Si alguien pudiera decirme como hacer que esta sección desplegable se pueda actualizar desde una único archivo sería genial. Sería un único archivo donde yo pondría cada nueva sección.

Pongo lo que uso ahora:

<SCRIPT LANGUAGE="JavaScript">
    function salta(Sel)
    {
        if (Sel.ad.selectedIndex != 0)
        {
            document.location=Sel.ad.options[Sel.ad.selectedIndex].value
        }
    }
</SCRIPT>
<div>
    <form>
        <select name="ad" onchange="salta(this.form)">
            <option selected>Artículos:
            <option value=“articulo1.html”>ejemplo 1
            <option value="articulo2.html”>Ejemplo 2
        </select>
    </form>
</div>

Lo que yo quiero es tener en algún lugar un archivo que me sea fácilmente actualizable. Si voy añadiendo artículos a mi desplegable, y ahora ya tengo 8 artículos, cada vez que pongo un archivo nuevo, me veo obligado a abrir los 8 artículos que son 8 archivos html diferentes. Cuando tenga 25 va a ser una lata ir abriendo todos uno por uno. Creo que lo mejor tiene que ser un archivo html o javascript donde esté mi menú editable.

2 respuestas 2

3

Yo en vez de hacer un documento HTML te propongo que hagas un script que cree el desplegable y te lo inserte donde quieres. Algo tal como esto:

// deplegable.js
class miDesplegable {
  constructor({
    target = 'body', 
    opciones = [], 
    listener = new Function(), 
    nombre = ''} = {}) {

      this.target = $(target);
      this.form = $('<form/>');
      this.element = $('<select/>');
      this.element.attr('name', nombre);
      this.opcion_no_seleccionable = $('<option disabled selected>Otros artículos</option>');
      this.element.append(this.opcion_no_seleccionable);
      this.form.append(this.element);
    
      opciones.map(e=>{
        var opcion = $(`<option value="${e.value}">${e.titulo}</option>`);
        this.element.append(opcion);
      });

      this.listener = typeof listener === 'function' ? listener : new Function();
        
      this.element.on('change', this.listener.bind(null, this.element.get(0)));
    
      this.target.append(this.form);
  }
}
/*
----------------------------------------------------
Esto lo puedes poner dentro de un archivo "main.js" 
y llamarlo en los documentos HTML que necesites el 
desplegable.
----------------------------------------------------
*/
var listener = function(e){
  console.log(e.options[e.selectedIndex].value);
  // Aquí es donde abres la página, hay varias formas.

 //window.location.replace(e.options[e.selectedIndex].value);
 // window.location = e.options[e.selectedIndex].value;
 // window.open(e.options[e.selectedIndex].value); // Este abre en una pestaña nueva.
}

var desp = new miDesplegable({
  target : '#miDiv',
  opciones : [{
    titulo : 'UNO',
    value : '1'
  },{
    titulo : 'DOS',
    value : '2'
  },{
    titulo : 'TRES',
    value : '3'
  }],
  listener : listener
});

$('.animales').each((i, el)=>
  new miDesplegable({
    target : el,
    opciones : [{
      titulo : 'Perro',
      value : '1'
    },{
      titulo : 'Gato',
      value : '2'
    },{
      titulo : 'Loro',
      value : '3'
    }],
    listener : listener
  })
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- página_1.html -->
<p>Página 1</p>
<div id="miDiv"></div>

<!-- página_2.html -->
<p>Página 2</p>
<div class="animales"></div>
<div class="animales"></div>
<div class="animales"></div>

Como algunas de estas cosas no funcionan en algunos navegadores, puedes convertir este código a ES5 desde aquí Babeljs.io

8
  • Tendrás que de estructurar tus scripts de cada desplegable individualmente o en un archivo (como prefieras) y añadir divs donde quieres el desplegable. He editado la respuesta. el 3 jul. 2016 a las 23:39
  • 1
    Ahí lo tienes! Pues si no estás acostumbrado a JavaScript, deberías ir familiarizándote, aunque sea poco a poco, pues en mi respuesta hay código que no es fácil de interpretar al principio y se emplean algunas funcionalidades de las nuevas especificaciones, cosa que deberías aprender teniendo una base. Espero que mi código te anime a intentar darle una oportunidad! =) el 4 jul. 2016 a las 23:04
  • Me vendría bien saber como hacer que se vea de forma predeterminada en el desplegable el título: "Otros artículos:". el 5 jul. 2016 a las 7:39
  • Con el tag optgroup el 5 jul. 2016 a las 10:21
  • 1
    Ahora si @JoseHermosillaRodrigo gracias!!! el 6 jul. 2016 a las 5:45
3

Te dejo un par de alternativas basadas en lo que dices en los comentarios de abajo. Las dos son parecidas, consisten en tener el HTML en el archivo desplegable.html y entonces cargar su contenido usando JavaScript (para simplificar uso jQuery y el método load() pero podría hacerse con JavaScript puro y una llamada AJAX).

Común a las dos alternativas

En donde quieres que vaya la lista desplegable, pon un div vacio con id "desplegable" (por poner un ejemplo) de este modo:

<div id="desplegable"></div>

Entonces, después de que se haya cargado jQuery puedes cargar desplegable.html con el método load de la siguiente manera:

<script>
$("#desplegable").load("desplegable.html");
</script>

Y eso cargará el contenido de desplegable.html en el elemento con id "desplegable".

Alternativa 1: HTML + JavaScript

Si tienes un fichero con código JavaScript, añade una función que sea para redireccionar la página:

function salta(enlace) {
    if (enlace != "")
        document.location = enlace;
}

Y tu archivo desplegable.html sería algo como esto:

<select onchange="salta(this.value)">
    <option value="">Elige un artículo</option>
    <option value="articulo1.html">Artículo 1</option>
    <option value="articulo2.html">Artículo 2</option>
    <option value="articulo3.html">Artículo 3</option>
    <option value="articulo4.html">Artículo 4</option>
</select>

Alternativa 2: HTML + CSS

En esta alternativa no necesitas tener la función JavaScript en tu código (excepto cargar la página con AJAX) porque todo se hará con HTML y CSS. El contenido de desplegable.html podría ser algo como esto (lo hago ejecutable para que veas que simula una lista desplegable):

<ul id="desplegable">
	<li>Elige un artículo</li>
	<li><a href="articulo1.html">Artículo 1</a></li>
	<li><a href="articulo2.html">Artículo 2</a></li>
	<li><a href="articulo3.html">Artículo 3</a></li>
	<li><a href="articulo4.html">Artículo 4</a></li>
</ul>
<style type="text/css">
ul#desplegable {
	list-style:none;
	margin:0;
	padding:0;
	width:200px;
	height:25px;
	overflow:visible;
}
ul#desplegable li {
	display:none;
	height:25px;
	line-height:25px;
	position:relative;
	z-index:9;
	background:white;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}
ul#desplegable li:nth-child(1) {
	display:block;
	border:1px solid #ccc;
}
ul#desplegable li:nth-child(1):after {
	content:"+";
	float:right;
	margin-right:7px;
}
ul#desplegable:hover li {
	display:block;
}
ul#desplegable li:last-child {
	border-bottom:1px solid #ccc;
}
ul#desplegable li a {
	display:block;
}
ul#desplegable li a:hover {
	background:#f0f0f0;
}
</style>

Y como son enlaces ya no necesitarías ningún código JavaScript extra. De hecho, podrías añadir el CSS a tu propio fichero CSS y harías que el menú desplegable se cargase más rápido. Sólo tendrías que personalizarlo.

8
  • El menú en mi web me funciona perfectamente lo habré copiado mal aquí y por eso no ves que funcione bien. Pero yo no pregunto nada sobre el funcionamiento del desplegable. La pregunta se refiere a construir otro tipo de navegación por la que poder actualizar el menú cada vez que hay un nuevo archivo desde un único lugar sin tener que copiar el desplegable en cada sección/pestaña web. el 3 jul. 2016 a las 7:00
  • @MarcLemien Ok, comprendo. Un par de preguntas: ¿Cómo quieres que se vea el resultado final? ¿quieres que el menú se genere a partir de la lista desplegable o puedes cambiar directamente el HTML de dentro? (sería más cómodo hacer un ul y añadir CSS sin necesidad de JS, además te permitiría anidar niveles si fuese necesario)
    – Alvaro Montoro
    el 3 jul. 2016 a las 12:40
  • Lo que yo quiero es tener en algún lugar un archivo que me sea fácilmente actualizable. Si voy añadiendo artículos a mi desplegable, y ahora ya tengo 8 artículos cada vez que pongo un archivo nuevo, me veo obligado a abrir los 8 artículos que son 8 archivos html diferentes. Cuando tenga 25 va a ser 1 lata. Creo que lo mejor tiene que ser tener un archivo html donde esté mi menu que yo en ese archivo puede ponerle cada vez el nuevo artículo. Y que esto quede reflejado en cada pestaña donde hay artículos. Si hay 25 archivos html en esos 25 archivos deberían aparecer cada vez el nuevo artículo. el 3 jul. 2016 a las 16:36
  • ¿Por qué tienes los artículos en 8 archivos html diferentes? Me parece que el problema es más cómo tienes estructurado el sitio web que cómo hacer un menú. Tal y como lo explicas, no entiendo por qué no tienes una base de datos que contenga los artículos y generar todos los .html con un único fichero en el servidor (e igual para los menús y desplegables)
    – Alvaro Montoro
    el 3 jul. 2016 a las 16:54
  • Yo he hecho la web así. Problema no hay ninguno, me va bien así la web, tengo rutas que favorecen el seo. Lo que yo quiero hacer se que se puede hacer y lo único que busco es el como. No quiero bases de datos no me gustan para nada, ni el php. No voy a cambiar toda la web por una cosita. el 3 jul. 2016 a las 17:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.