Menú que hace aparecer pagina dentro de un contenedor sin php


Por lo general, cuando hacemos un  menú, lo repetimos en todas las paginas que creamos o lo incluimos en un archivo llamado menu.php y en las paginas lo tomamos con un include, en este tutorial les enseñaré un método mas dinámico que de seguro les será de ayuda.

Lo que primero vamos a hacer es nuestra estructura html de la página que contendrá nuestro menú, en este caso use una tabla (actualmente uso plantillas de bootstrap pero eso seria mas complejo d explicar aquí )


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Prueba de menu</title>
</head>
<body>
   <table id="menu">
      <tr>
         <td><a href="" id="menu1">Tablas</a></td>
         <td><a href="" id="menu2">Parrafos</a></td>
      </tr>
    </table>
    <div id="contenedor">
    </div>
</body>
</html>

Luego colocaremos un atributo extraño a los enlaces y dentro clocaremos el nombre del archivo, quedando así:

<a href="" pag="tablas.html" id="menu1">Tablas</a>
<a href="" pag="parrafos.html" id="menu2">Parrafos</a>

Luego de eso anexaremos el enlace al jquery en el <head>

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>

Y luego escribimos la acción de jquery


jQuery(document).on('ready',function(){
//accion que al cargar la pagina, haga click automáticamente al primer item del menú 
       jQuery("#menu1").click();
    });
    jQuery(function () {

        $('#menu a').on('click', function (e) {
//acción para cuando le demos click a algún enlace del menú, tome el contenido del atributo "pag" y lo coloque dentro del div con "contenedor"
            e.preventDefault();
            var page = $(this).attr('pag');
            jQuery('#contenedor').load(page);
        });
    });

En las paginas "tablas.html" y "parrafos.html" colocamos el contenido html que queremos sin necesidad de la estructura completa del html, ejemplo, en la pagina "tablas.html":

<h1>Tablas</h1>
<table border="1px" cellpadding="20px">
    <tr> 
        <th>Nombre</th> 
        <th>Apellido</th>
    </tr>
    <tr> 
        <td>Pedro</td> 
        <td>Garcia</td>
    </tr>
</table>

Debe probarse en wamp o xamp, porque si no, les dará error

Comentarios