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>

Comentarios
Publicar un comentario