18041 sujets

Questions générales et questions de débutants

[résolu] Menu CSS et pseudo-classe :active

Bonjour,

Je suis en train de construire un petit menu verticale en css avec l'aide des tuto et j'ai vu que la pseudo-classe :active est utilisé pour conserver les style après un click dans une case. Cette propriété n'est conservé que si le lien dirige vers la même page (href="#") mais y-t-il une possibilité de gardé le choix fait après le chrgement d'au autre page ?

Merci

PS: mon menu est une page indépendante que j'inclue dans chaque page.
Modifié par Alvaten (16 Aug 2007 - 09:08)
Salut Alvaten Smiley cligne ,

petite confusion : la pseudo-classe :active n'est utilisée que pour changer le style du lien au moment où tu cliques sur celui-ci.

si j'ai bien compris ce que tu voudrais faire (que ton lien vers la page en cours ait un style particulier), il faut déterminer (à l'aide de PHP puisque tu fais des include) la page sur laquelle tu es et appliquer une class (class="active" par exemple) au lien qui va bien. Smiley murf

Pour être plus clair :

page en cours : [b]news.php[/b]
lien : [b]<a href="news.php" class="active">News</a>[/b]
autre lien : <a href="articles.php">Articles</a>



Pour plus d'infos sur les pseudo-classes de liens, voir cette page de SELFHTML.

A+
Modifié par Heyoan (14 Aug 2007 - 16:27)
Mmmm, il faut donc que je teste en php la page cours pour chaque lien ?

Un peu comme ça ? :

<?php
if ($mapage == 'page1)
{
    <a href="page1.php" class="active">Page1</a>
}
else
{
    <a href="page1.php">Page1</a>
}
if ($mapage == 'page2)
{
    <a href="page2.php" class="active">Page2</a>
}
else
{
    <a href="page2.php">page2</a>
}
//...
?>
Oui... Mais tu peux peut-être optimiser un peu non ? Smiley lol

Puisque tu fais des include, je suppose que tu as une variable qui te dit quelle page est à afficher. Donc un exemple avec une variable page qui va de 0 à 4 :
<?php
$lien = array ("Accueil", "Tutos", "Liens", "Forum", "Lexique");
$page = (isset($_GET['page'])) ? $_GET['page'] : 0; // si aucune page indiquée --> Accueil
$page = (array_key_exists($page, $lien)) ? $page : 404;
if ($page == 404) { // si la page n'existe pas, on redirige vers 404.php
header('Location: 404.php');
die();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style type="text/css">
.active {
	color: red;
} 
</style>
</head>

<body>
<?php
// Affichage des liens
for ($i=0; $i < count($lien); $i++) {
$class = '';
if ($i == $page) $class = " class='active'";
echo ("<a $class href='?page=$i'>$lien[$i]</a><br />\n");
} 
?>
</body>
</html>

A+
Modifié par Heyoan (14 Aug 2007 - 19:12)
Merci, c'est vrai que ça allège beaucoup le code, j'ai du légèrement adapté ton code car mes pages ne sont pas numéroté et la gestion d'existante ou non des pages est déjà traité dans une page de sécurité.
Salut,

De mémoire, il me semble que la pseudo-classe :active n'est utilisée dans le tutoriel sur les menus en CSS que parce que IE 6 ne prend pas en compte :focus si :active n'est pas précisée.

Du coup, c'était gênant pour la navigation au clavier sous IE.
Sujet clos
Aller à