Pestañas en la web con CSS y un control switch
Una forma rápida y económica (en tiempo de carga) de poner pestañas de navegación en nuestra web consiste en emplear CSS y una estructura de control en PHP como puede ser la instrucción “switch”.
A continuación, mostramos un index.php donde tendremos una web con 3 pestañas que usaremos para navegar y acceder a contenidos diferentes. Siempre estamos en la misma página aunque el efecto de las pestañas hace pensar que cambiamos de capa. También se incluye el index.css que ordena y coloca los elementos [div], entre otros.
Para gestionar las pestañas, pasamos una variable por $_GET a la página principal y en función de su valor, la instrucción switch va presentando un contenido u otro.
El código de index.php:
<?php
This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
You cand find a copy of the GNU General Public License in the “license” directory.
You should have received a copy of the GNU General Public License along with SIESTTA; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Ramon Castro (http://ramoncastro.es)
Iconos: Proyecto Tango (http://tango.freedesktop.org/Tango_Desktop_Project)
*/
?>
<!– En el encabezado HTML incluimos la referencia a index.css donde manejaremos los
estilos de la página. Además, cargamos un primer elemento <div> identificado como “Encabezado”
–>
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Principal</title>
<link href=”index.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”encabezado”>Web de Prueba</div>
<?php
/*cargamos variable $pest que recoge el valor
de la pestaña que hayamos pulsado. Si no existe,
es que acabamos de llegar a la página*/
$pest = $_GET['pest'];
if($pest)
{
/*Si existe la variable, ésta puede tener
varios valores en función de la pestaña
pulsada. Controlamos esto con una instrucción
switch*/
switch ($pest)
{
/*En cada caso se nos presentará, dentro del <div> pestanyas, una
lista de 3 elementos cada uno de los cuales representará una
pestaña. En función de la pestaña pulsada, su enlace estará
identificado como “sel”.
Tras listar los elementos, cargamos en cada caso un <div> llamado
contenido que recogerá un mensaje. Obviamente, aquí podemos
incluir con require() un script php que ejecute las acciones
que deseemos*/
case ‘pri’:
echo ‘
<div id=”pestanyas”>
<ul>
<li><a id=”sel” href=”index.php?pest=pri”>Principal</a></li>
<li><a href=”index.php?pest=doc”>Documentación</a></li>
<li><a href=”index.php?pest=dow”>Descargas</a></li>
</ul>
</div>
‘;
echo ‘<div id=”contenido”>’;
echo ‘<img src=”imgs/pri.png” alt=”Principal”/>’;
echo ‘<br />’;
echo ‘Estás en la página Principal’;
echo ‘</div>’;
break;
case ‘doc’:
echo ‘
<div id=”pestanyas”>
<ul>
<li><a href=”index.php?pest=pri”>Principal</a></li>
<li><a id =”sel” href=”index.php?pest=doc”>Documentación</a></li>
<li><a href=”index.php?pest=dow”>Descargas</a></li>
</ul>
</div>
‘;
echo ‘<div id=”contenido”>’;
echo ‘<img src=”imgs/doc.png” alt=”Documentación”/>’;
echo ‘<br />’;
echo ‘Estás en la página de Documentación’;
echo ‘</div>’;
break;
case ‘dow’:
echo ‘
<div id=”pestanyas”>
<ul>
<li><a href=”index.php?pest=pri”>Principal</a></li>
<li><a href=”index.php?pest=doc”>Documentación</a></li>
<li><a id=”sel” href=”index.php?pest=dow”>Descargas</a></li>
</ul>
</div>
‘;
echo ‘<div id=”contenido”>’;
echo ‘<img src=”imgs/dow.png” alt=”Descargas”/>’;
echo ‘<br />’;
echo ‘Estás en la página de Descargas’;
echo ‘</div>’;
break;
}
}
/*Si no existe la variable $pest es que
acabamos de llegar a la página. Presentamos
en este caso la primera opción, inicializando
la variable pest al valor principal.*/
else
{
$pest = ‘pri’;
echo ‘
<div id=”pestanyas”>
<ul>
<li><a id=”sel” href=”index.php?pest=pri”>Principal</a></li>
<li><a href=”index.php?pest=doc”>Documentación</a></li>
<li><a href=”index.php?pest=dow”>Descargas</a></li>
</ul>
</div>
‘;
echo ‘<div id=”contenido”>’;
echo ‘<img src=”imgs/pri.png” alt=”Principal”/>’;
echo ‘<br />’;
echo ‘Estás en la página Principal’;
echo ‘</div>’;
}
?>
El código de index.css:
/*
This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
You should have received a copy of the GNU General Public License along with SIESTTA; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Ramon Castro (http://ramoncastro.es)
Iconos: Proyecto Tango (http://tango.freedesktop.org/Tango_Desktop_Project)
*/
*{
margin:0;
padding:0;
}
ul{list-style:none;}
li{font-size:11px;}
a {text-decoration:none;}
a:link, a:visited{color:#444;}
a:hover, a:active{color:#0021a5;}
body{
font-family: Andale Mono;
font-size:12px;
}
div#encabezado{
text-align:center;
font-size:44px;
height:70px;
border-bottom: 1px solid #444;
padding:30px;
background:transparent url(imgs/encab.png) no-repeat center bottom;
}
div#pestanyas{
position:absolute;
top:112px;
left:10px;
}
#pestanyas li{
display:block;
float:left;
}
#pestanyas a{
padding:5px;
font-size:10px;
border:1px solid #444;
background-color:#bfc6f5;
margin:1px;
}
#pestanyas a#sel{
padding:5px;
border-bottom:1px solid #FFF;
font-size:10px;
background-color:#FFF;
}
div#contenido{
position:absolute;
top:250px;
left: 400px;
width:200px;
text-align:center;
}
Saludos
[tag]pestañas, tabs, css, switch[/tag]
About this entry
You’re currently reading “Pestañas en la web con CSS y un control switch,” an entry on PeHachePe
- Published:
- Marzo 17, 2007 / 9:36 pm
- Category:
- PHP
- Tags:
5 Comments
Jump to comment form | comments rss [?] | trackback uri [?]