Crear una navegación por pestañas con AJAX y CSS. Primera Parte
Comentarios: 0Tags: TABS, AJAX
Fecha: 06/11/2006
En esta primera parte se va a crear la arquitectura en CSS y HTML que permitirá cargar los distintos contenidos en una navegación por pestañas o tabs. Para crear una barra de navegación, se puede usar una lista a la que se quitan las viñetas y se cuyos elementos se disponen de modo horizontal gracias a "display:inline". Para dar el aspecto de botones se les asigna un borde y un fondo que cambian cuando se pasa el raton sobre ellos (:hover). También he dispuesto de un contenedor "ContTabul" que será donde se irán cargando los distintos contenidos.Creo que el CSS es bastante claro y, en el caso de que no lo sea, uno siempre puede recurrir a múltiples tutoriales en internet que se enseñan como crear estas pestañas con CSS.
Quizá la unica peculiaridad es la creación de dos clases ("inactivo" y "activo"), que utilizaré y permutaré entre ellas con Ajax para mostrar en cada momento cuál es la pestaña activa. Pero eso lo veremos en la segunda parte del tutorial.
El código para crear una simple navegación por pestañas serÃÂa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX TABS</title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #FFFFFF;
margin-left: 100px;
margin-right: 100px;
}
#ContTabul {
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding: 10px 5px 6px 5px;
}
ul#tabnav {
list-style-type: none;
margin: 0;
padding-left: 40px;
padding-bottom: 24px;
border-bottom: 1px solid #CCC;
font: 11px verdana, arial, sans-serif;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: #E4E4E4;
color: #666;
margin: 2px 10px 0 2px;
border: 1px solid #CCC;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
ul#tabnav a:hover {
background-color: #CCC;
color: #666;
}
#tabnav .activo {
border-bottom: 1px solid #fff;
color: #000000;
background-color: #FFFFFF;
}
#tabnav .inactivo {}
</style>
</head>
<body>
<ul id="tabnav">
<li class="activo"><a href="#">Apartado 1</a></li>
<li class="inactivo"><a href="#">Apartado 2</a></li>
<li class="inactivo"><a href="#">Apartado 3</a></li>
<li class="inactivo"><a href="#">Apartado 4</a></li>
</ul>
<div id="ContTabul">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam erat lectus, dapibus id, congue vel, cursus a, tellus. Sed turpis ante, condimentum at, accumsan eget, pulvinar vitae, nibh. </p>
</div>
</body>
</html>
Ver ejemplo en funcionamiento » »
Algunas entradas relacionadas:
Construyendo un verdadero triple click con jQuery
arturo Romo en 16 acciones de Photoshop para dar profesionalidad a tus imágenes
