[Aporte] Resaltar Menu con CSS y PHP

devcodep · 19 Ene 2016

Buenas a todos! Un aporte sobre como resaltar el menu con CSS y PHP.

Para eso necesitamos crear 5 archivos que se dividen en:

Insertar CODE, HTML o PHP:

index.php
somos.php
productos.php
estilo.css
menu.php

Podrian hacerlo en cada pagina para evitar tener mas archivos, ya dependera de ustedes, pero lo mas efectivo es hacerlo en archivos separados ya que se organiza mejor.

Los archivos:

Insertar CODE, HTML o PHP:

index.php
somos.php
productos.php

Son los archivos de la pagina web, podrian ser mas, ya depende de ustedes.

El archivo:

Insertar CODE, HTML o PHP:

estilo.css

Es el archivo para darle formato al enlace o link o vinculo ya sea el color, el padding, el margin, etc, ya dependera de ustedes.

Y el archivo

Insertar CODE, HTML o PHP:

menu.php

Es el encargado de hacer el menu, me explico; Es el archivo que tiene el menu en si de la pagina web.

Ahora armamos la pagina web en los tres archivos:

Pagina o archivo index.php

PHP:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Resaltar Menu con CSS y PHP</title>
	<!-- Incluyendo el CSS -->
    <link rel="stylesheet" href="estilo.css" type="text/css"/>
</head>
<body>
<!-- Incrustando el Menu en todas las paginas en donde va a estar el menu -->
<?php
// Incluyendo el archivo en donde contiene el menu con CSS y PHP
include "menu.php";				
?>
<hr>
Contenido de Index
</body>
</html>

Pagina o archivo somos.php

PHP:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Resaltar Menu con CSS y PHP</title>
	<!-- Incluyendo el CSS -->
    <link rel="stylesheet" href="estilo.css" type="text/css"/>
</head>
<body>
<!-- Incrustando el Menu en todas las paginas en donde va a estar el menu -->
<?php
// Incluyendo el archivo en donde contiene el menu con CSS y PHP
include "menu.php";				
?>
<hr>
Contenido de Somos
</body>
</html>

Pagina o archivo productos.php

PHP:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Resaltar Menu con CSS y PHP</title>
	<!-- Incluyendo el CSS -->
    <link rel="stylesheet" href="estilo.css" type="text/css"/>
</head>
<body>
<!-- Incrustando el Menu en todas las paginas en donde va a estar el menu -->
<?php
// Incluyendo el archivo en donde contiene el menu con CSS y PHP
include "menu.php";				
?>
<hr>
Contenido de Productos
</body>
</html>

Ahora el archivo menu.php

PHP:

<ul>
<li><a href="index.php" id="<?php if(strstr($_SERVER['REQUEST_URI'], 'index.php')){ echo 'activo'; }?>">Inicio</a></li>
<li><a href="somos.php" id="<?php if(strstr($_SERVER['REQUEST_URI'], 'somos.php')){ echo 'activo'; }?>">Somos</a></li>
<li><a href="productos.php" id="<?php if(strstr($_SERVER['REQUEST_URI'], 'productos.php')){ echo 'activo'; }?>">Productos</a></li>
</ul>

Y por ultimo el archivo CSS:

HTML:

#activo {
color: #ffffff;
background-color:#003399;
padding: 5px;
margin-bottom: 50px;
}
li {
margin-top: 15px;
margin-bottom: 5px;
}

Cabe mencionar que el menu lo hice con un <li> y con el <ul> algo basico para que se den una idea, podran modificar a gusto.

Les explico como funciona:

Cuando el usuario da click en el enlace, vinculo o link, PHP detecta con la funcion $_SERVER['REQUEST_URI'] entonces hace un echo y pone como id= el "activo" del CSS.

$_SERVER['REQUEST_URI'] es La URI que se empleó para acceder a la pagina. Por ejemplo: '/index.php' en este caso, en otras palabras, URI es el que identifica a la pagina, la URI de la index.php es index.php.

Para los que quieren un demo: Resaltar Menu con CSS y PHP

Cualquier cosa a las ordenes.

DevCodep

[Aporte] Resaltar Menu con CSS y PHP

devcodep

Temas similares