Linkuri active cu PHP
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.
| <?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():
| <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> |
Acum sa scriem meniu.php :
| /* 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 :
| #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; } |
Importanta pentru noi este doar ultima parte din codul CSS.
Exemplu
Comentarii
mozzartut
scurt si la obiect. thx
scurt si la obiect. thx
04-Aug-2010 - 18:58
Voteaza acest articol!
Trimite un comentariu!
