Crear un menú desplegable con múltiples links en una misma página

Angel Benites · 7 Sep 2013

Buenas Noches Forobeta.. hoy en dia quiero adquirir mas conocimiento tratando de hacer un menu de una web y la idea es esta..

Tener un menu1 con 3 links (inicio-set-contacto)
Y estos 3 url o botones mostraran y accionaran diferentes contenidos pero en un mismo div reemplazando.

El URL (set) - al accionarse mostrara 3 link (session-session1-session2)
Y estos 3 url o botones mostraran y accionaran diferentes contenidos pero en un mismo div.

El URL session1 - al accionarse mostra un nuevo contenido..

Este es el index.html principal

HTML:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Inicio</title>
    <script type="text/javascript">
      $(document).ready(function() {
        var url = 'contenido.html'; // Solo cambia lo que esta en rojo por tu url (cuando la tengas)
        
        $('#navegacion li a').click(function(e) {
          e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
          var href = url + " #" + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado
          console.log(href);
          $('#contenido').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
        });
        
      });    
    </script>

<script type="text/javascript">
      $(document).ready(function() {
        var url = 'download.html'; // Solo cambia lo que esta en rojo por tu url (cuando la tengas)
        
        $('#temas li a').click(function(e) {
          e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
          var href = url + " #" + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado
          console.log(href);
          $('#set').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
        });
        
      });    
    </script>
    
  </head>
  <body>
    <div id="cabecera">contenido...</div>
    <div id="navegacion"><!-- Puedes cambiar los nombres aquí, pero recuerda cambiarlos en el script (#navegacion) -->
      <ul>
        <li><a href='biografia'>Biogracia</a></li>
        <li><a href='temas'>Set</a></li>
        <li><a href='contacto'>Contacto</a></li>
      </ul>
    </div>
    <div id="contenido">
      </div>
    
<div id="set">     </div>
    <div id="footer">footer</div>
  </body>
</html>

Este es el documento.hml (donde estaran los contenidos del primer menu)

HTML:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Inicio</title>

<script type="text/javascript">
      $(document).ready(function() {
        var url = 'download.html'; // Solo cambia lo que esta en rojo por tu url (cuando la tengas)
        
        $('#temas li a').click(function(e) {
          e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
          var href = url + " #" + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado
          console.log(href);
          $('#set').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
        });
        
      });    
      </script>
      </head>
<div id="biografia">
<h1>BIOGRAFIA</h1>
	<p>Aqu&iacute; ir&iacute;an las noticias</p>

        </div>
 
<div id="temas">
	<ul>
	   <li><a href='Sesion'>Sesion</a></li>
	  <li><a href='Sesion1'>Sesion1</a></li>
	   <li><a href='Sesion2'>Sesion2</a></li>
       
</ul>
</div>

<div id="contacto">
	<h1>CONTACTO</h1>
	<p>TEXTO</p>
</div>

<div id="set">     </div>
</html>

Y este download.html (este mostrara el contenido del 2do menu link set)

HTML:

<div id="Sesion">
	<h1>SET1</h1>
	<p>Aqu&iacute; ir&iacute;a el inicio</p>
</div>

<div id="Sesion1">
	<h1>NOTICIAS</h1>
	<p>Aqu&iacute; ir&iacute;an las noticias</p>
</div>

<div id="Sesion2">
	<h1>ETC&Eacute;TERA</h1>
	<p>Aqu&iacute; ir&iacute;a etc&eacute;tera</p>
</div>

Los Url de prueba las tengo aqui ..
index.html
contenido.html Este si funciona.. abre el contenido pero no lo deseo asi..

Eh logrado hacer funcionar el script en el primer contenido.. pero cuando mando al segundo me redirecciona a una web que no existe cuando deberia mostrarme el contenido que deseo...
Si quieren mas infomacion sobre la idea que tengo de este menu en cade o asincrono como lo llamaria yo.

Crear un menú desplegable con múltiples links en una misma página

Angel Benites Seguir