Intr-un meniu cu foarte multe link-uri este folositor, chiar necesar, sa avem link-urile active ( link-ul paginii curente ) marcat pentru a usura navigarea in interiorul site-ului.
Acest lucru se realizeaza destul de usor cu PHP si CSS. Cu ajutorul codului php vom aplica o clasa sau un id CSS numai link-urilor care duc catre pagina curenta. Trebuie deci sa citim si sa bagam intr-o variabila numele paginii curente.
Quote
<?php $pagina = basename($_server['SCRIPT_NAME']); ?>
Voi da un exemplu. Presupunem ca aveti 4 pagini + pagina principala, toate continand meniul de navigare. Includem meniul folosind include():
Quote
<html>
<head>
<title> Pagina 1 </title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<?php include ('meniu.php') ?>
<p>continut pagina</p>
</body>
</html>
Toate paginile vor fi de forma celei de mai sus.
Acum sa scriem meniu.php :
Quote
/* citim numele paginii curente */
<?php $pagina = basename($_SERVER['SCRIPT_NAME']); ?>
<div id="meniu1">
<ul>
<li><a href="index.php" <?php if ($pagina == 'index.php') { ?>class="active"<?php } ?>>INDEX</a></li>
<li><a href="pag1.php" <?php if ($pagina == 'pag1.php') { ?>class="active"<?php } ?>>Pagina site 1</a></li>
<li><a href="pag2.php" <?php if ($pagina == 'pag2.php') { ?>class="active"<?php } ?>>Pagina site 2</a></li>
<li><a href="pag3.php" <?php if ($pagina == 'pag3.php') { ?>class="active"<?php } ?>>Pagina site 3</a></li>
<li><a href="pag4.php" <?php if ($pagina == 'pag4.php') { ?>class="active"<?php } ?>>Pagina site 4</a></li>
</ul>
</div>
Acolo unde numele paginii curente este identic cu adresa link-ului aplicam acelui link clasa "active". In css vom adauga elemente care sa diferentieze link-urile cu clasa "active" de cele normale, de exemplu un border sau o alta culoare a link-ului.
Iata si fisierul stil.css :
Quote
#meniu1{
padding: 0px;
width: 530px;
margin:0px auto;
position:relative;
}
#meniu1 ul {
float:none;
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#meniu1 li {
float:left;
list-style-type: none;
}
#meniu1 li a {
padding: 0px;
float: left;
margin:0px 13px 0px 0px;
text-decoration:none;
border-bottom:solid, #ff0000;
background-color:#999999;
color:#000000;
}
#meniu1 li a:hover {
border-bottom:solid 5px #cc00cc;
}
#meniu1 li a.active:link, #meniu1 li a.active:visited, #meniu1 li a.active:active, #meniu1 li a.active:hover {
text-decoration: none;
border-bottom:solid 5px #990000;
}
