Hola.
Tengo una clase en php para generar un menú con estilo solapas/pestañas. Lo comparto con vostros para ver si podriamos mejorarlo.
Ejemplo de uso:
Código PHP:
<?php
//ejemplo de uso
/*Crear la clase y pasarle los siguientes parametros:
- 0,1,2 => alineacion centro,izquierda,derecha.
- Color solapa al pasar encima y esta activa.
- Color solapa por defecto.
- Ancho de cada solapa en %.
*/
$m = new menuSolapas(0,"#E39620","#DDDBDC",5);
/* Añadir una solapa al menu. Parametros:
* Nombre que se visualiza en la página.
* Url donde apunta el enlace.
* 0,1 => 1 para la solapa que saldra activa por defecto.
*/
$m->setSolapa("menu1","./index.php?i=1");
$m->setSolapa("menu2","./index.php?i=2",1);
$m->setSolapa("menu3","./index.php?i=3");
/* Configurar el css
* color del borde
* color del fondo
* color de la fuente
* tamaño de la fuente
* tipo de fuente
*/
$m->setCssMenu("#E39620","#DDDBDC","#5D5D5D",12,"georgia");
echo $m->getMenu();
?>
Imagen de un menú generado
Clase:
Código PHP:
<?php
/* Menu con solapas */
class menuSolapas
{
//propiedades
private $iten;
private $colorActiva;
private $colorNoActiva;
private $alineacion;
private $numeroItem = 0;
private $css;
private $menu;
private $defecto;
public function __construct($alineacion=0,$colorActiva="#CCCCCC",$colorNoActiva="#999999",$tamanoSolapa=10)
{
$this->colorActiva = $colorActiva;
$this->colorNoActiva = $colorNoActiva;
$this->alineacion = $alineacion;
$this->tamanoSolapa = $tamanoSolapa;
}
public function setSolapa($nombre="class_menu",$href="#",$defecto=0)
{
//añadir parametro get para saber que solapa esta activa
if(eregi("\?",$href))
{
$href.="&class_menu=".$this->numeroItem;
}
else
{
$href.="?class_menu=".$this->numeroItem;
}
if($defecto == 0)
{
$this->iten[$this->numeroItem] = '<td id="enlace_'.$this->numeroItem.'" class="solapa" onMouseOver="pasaEncima(this.id);" onMouseOut="quitaEncima(this.id)">
<a href="'.$href.'" id="class_menu_solapas_enlace">'.$nombre.'</a></td><td id="espaciomenu"> </td>';
}
else
{
$this->iten[$this->numeroItem] = '<td id="enlace_'.$this->numeroItem.'" class="solapa" onMouseOver="pasaEncima(this.id);" onMouseOut="quitaEncima(this.id)">
<a href="'.$href.'" id="class_menu_solapas_enlace">'.$nombre.'</a></td><td id="espaciomenu"> </td>';
$this->defecto = $this->numeroItem;
}
$this->numeroItem++;
}
public function setCssMenu($colorBorde="#CCCCCC",$colorFondo="#FFFFFF",$colorFuente="#CCCCCC",$tamanoFuente=12,$tipoFuente="verdana")
{
if($this->alineacion == 0)
{
$totalLibre=intval(100-($this->numeroItem*$this->tamanoSolapa));
if($totalLibre<0)
{
$lineaIzq=5;
$lineaDere=5;
}
else
{
$totalLibre=intval($totalLibre/2);
$lineaIzq=$totalLibre;
$lineaDere=$totalLibre;
}
}
else
{
if($this->alineacion == 1) //izquierda
{
$lineaIzq=0;
$lineaDere=100;
}
else
{
//derecha
$lineaIzq=100;
$lineaDere=0;
}
}
$this->css='<style type="text/css">
#class_menu_solapas_enlace:hover,#class_menu_solapas_enlace:visited,#class_menu_solapas_enlace:link
{
text-decoration:none;
font-size:'.$tamanoFuente.'px;
color:'.$colorFuente.';
font-family:'.$tipoFuente.';
}
td.solapa
{
border-left:0px solid '.$colorBorde.';
border-top:0px solid '.$colorBorde.';
border-right:0px solid '.$colorBorde.';
border-bottom:5px solid '.$colorBorde.';
padding:5px;
width:'.$this->tamanoSolapa.'%;
text-align:center;
background-color:'.$this->colorNoActiva.';
}
#espaciomenu
{
border-bottom:5px solid '.$colorBorde.';
}
#todoelmenu
{
background-color:'.$colorFondo.';
}
#espaciomenuizq { border-bottom:5px solid '.$colorBorde.'; width:'.$lineaIzq.'% }
#espaciomenudere { border-bottom:5px solid '.$colorBorde.'; width:'.$lineaDere.'% }
'.$this->cssDinamico().'
</style>';
//Crear menu
$this->crearMenu();
}
private function cssDinamico()
{
if(isset($_GET['class_menu']))
{
$css='#enlace_'.strip_tags(trim(urldecode($_GET['class_menu']))).'{background-color:'.$this->colorActiva.'}';
}
else
{
$css='#enlace_'.$this->defecto.'{background-color:'.$this->colorActiva.'}';
$_GET['class_menu'] = $this->defecto;
}
return $css;
}
private function crearMenu()
{
$this->menu.=$this->addJavascript();
$this->menu.='<table border="0" cellpadding="0" cellspacing="0">
<tr id="todoelmenu"><td id="espaciomenuizq"> </td>';
for($i=0;$i<count($this->iten);$i++)
{
$this->menu.=$this->iten[$i];
}
$this->menu.='<td id="espaciomenudere"> </td>
</tr>
</table>';
}
private function addJavascript()
{
return '<script type="text/javascript" language="javascript">
function pasaEncima(id)
{
document.getElementById(id).style.backgroundColor="'.$this->colorActiva.'";
}
function quitaEncima(id)
{
document.getElementById(id).style.backgroundColor="'.$this->colorNoActiva.'";
document.getElementById("enlace_'.strip_tags(trim(urldecode($_GET['class_menu']))).'").style.backgroundColor="'.$this->colorActiva.'";
}
</script>';
}
public function getMenu()
{
return $this->css.$this->menu;
}
}
?>
espero vuestros comentarios.
Un saludo.