Link activo

imagos3digital · #1 (**permalink**) 14/10/2011, 11:32

Buenas tardes:

Hice un include con php
<?php include("modulos/cabecera.php"); ?>
y funciona muy bien, pero quiero hacerle un adicional
que al ir de una seccion a otra
la seccion donde estoy quede resaltada

es decir que si paso de index a contacto el boton contacto quede en otro color..

se que debo crear una class "link activo"
pero no se como implementarla.

Gracias de antemano y espero ser claro.

memoadian · #2 (**permalink**) 14/10/2011, 12:17

podrias comprobar el link donde estas con php ya que es lo que usas

Código PHP:

Ver original<?php
if($_SERVER['REQUEST_URI'] == 'index.html') {
echo '<li class="activo">';
}else{
echo '<li class="pasivo">';
}
?>

tambien se puede usar javascript, pero esa es la idea.

emprear · #3 (**permalink**) 14/10/2011, 18:46

la de memoadian puede ser una solución, te muestro otra, un poco distinta, pensada para trabajar con una única plantilla php. Te pongo el esquema algo simplificado, despues podrias adaptarlo

Por un lado tenemos nuesto index (puse el css en el mismo para el ejemplo)

Código PHP:

Ver original<?php
$link = $_GET['link'];
?>
<!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>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
a{
background-color: cyan;
color: #000;
}
a:hover{
background-color:#000;
color: #fff;
}
a.activo{
background-color:#000;
color: #fff;
}
 
/*]]>*/
</style>
</head>
<body>
<div>
<?php   
include('menu.php');
?>
</div>
<div class="contenido">
<?php echo "incluir contenido de $link"; ?>
</div>
</body>
</html>

Como ves al inicio define a la variable $link como un valor recibido por get,
luego hace un include al menu.php
y finalmente muestra un contenido (que en realidad sería otro include)

El menú

Código PHP:

Ver original<?php
#menu
$archivo_menu = $_SERVER['DOCUMENT_ROOT'] . '/menu/menu.txt'; 
$fp = fopen( $archivo_menu, 'r' ); 
$archivo_contenido = fread( $fp, filesize( $archivo_menu ) ); 
fclose( $fp ); 
// linea a linea. 
$lineas = explode ( "\n", $archivo_contenido ); 
echo "<ul>";
foreach ( $lineas as $linea) { 
 
$linea = rtrim($linea);
list( $vin,$reftitle,$textomenu ) = explode( '|', $linea );
 
if($link==$vin){
echo "<li><a href='?link=$vin' class='activo' title='$reftitle'>$textomenu</a></li>\n";
}else{
echo "<li><a href='?link=$vin' title='$reftitle'>$textomenu</a></li>\n";
}
} ### fin foreach
echo "</ul>\n<!-- fin menu  -->\n";
?>

este menu, lo que hace es extraer datos de un archivo de texto, cada linea del archivo contiene 3 elementos, que a su vez son separados, el contenido del txt sería

inicio|Página principal|inicio
ubicacion|Mapa de referencia y vias de acceso|ubicación
caracteristicas|Características generales del complejo|características
servicios|Servicios ofrecidos|servicios
reservas|Solicite reservas completando un formulario|reservas
vertarifas|Cuadro tarifario|tarifas
fotos|Galería de imágenes|fotos
contactenos|Realice sus consultas|contáctenos

el primer valor es el que se pasa como parámetro por get
el segundo es el valor del atributo title que va en el link
y el tercero es el téxto que aparecerá en el menú, este tercer elemento es importante, ya que te dije que la idea no es mostrar una leyenda (eso lo hago para simplificar la explicación), y como nó podrías cargar archivos con nombres acentuados (características, contáctenos, etc) ó bien podria ser que el texto del menú se compusiese de dos palabras (características principales, por ejemplo).

entonces en el div contenido porias hacer un

<?php include("$link.html"); ?>
como ves es muy flexible. Como observarás tambien el menu contien una condición en la que si lo que se pasa por get ($link), es igual al primer valor de cada linea, escribe la clase activo, ya que obviamente hay coincidencia entre el elemento del menu y lo que se cargó, un poco como ya te habia señalado memoadian.
Por supuesto que hay otros detalles a tener en cuenta, pero eso te lo dejo investigar a vos...
create los tres archivos, index, menu.php y menu.txt y probalo.
Finalmente tendrias que condimentarlo con urls amigables, para eliminar el tema de la variable en la url

Me olvidé de un detalle importante, tu archivo de texto uqe termine con LF(fin de linea estilo unix) y no CR\LF, casi todos los editores de texto te dan esa opción
SAludos