Menu Sprite Actif

**thais781** · 26/12/2014, 10h07

Bonjour,

Je precise que je suis debutante en php ....

Je me suis fais un petit menu en sprite qui marche pas trop mal.
Mon soucis est que quand je suis sur la page 1, je voudrais que la partie "page 1" de mon menu soit activé, c'est à dire de la même couleur que le hover (soit le bottom dans mon css)
Et idem quand je clic sur la page 2 ....

Mon petit code ci-dessous :
Page 1.php & Page2.php - même code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head><meta content="text/html; charset=UTF-8" http-equiv="content-type"></head>
    <body>
    	<!-- Le menu -->
 		<?php include("menus.php"); ?>   
    </body>
</html>

menus.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  <link rel="stylesheet" href="SpritesMenu.css" type="text/css">
  <ul class="categorie">
    <li class="souscat"><a href="Page1.php">Page 1</a></li>
    <li class="souscat"><a href="Page2.php">Page 2</a></li>
  </ul>

SpritesMenu.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
ul {
  margin: 0;
  padding: 0;
}
 
.categorie {
  list-style-type : none;
  font-family: "Helvetica", "Helvetica Neue", "Arial", sans-serif;
  font-weight: bold;
}
 
.categorie li a, .categorie li a:link, .categorie li a:visited {
  height: 50px;
  width: 100px;
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 50px;
  text-align: center;
  background: url(ImgVideMenu.png) no-repeat 0 top;
  color: #6c3306;
  text-decoration:none;
  float: left; 
}
 
.categorie li.souscat a:hover {
  color: #f4ebda;
  background-position: 0 bottom;
}

Une idée?

Merci d'avance

Thais

**numew** · 26/12/2014, 10h54

Il faut un moyen de connaitre la page en cours dans le menu. Via une variable par exemple, dans ce cas on rajoute une classe sur le lien correspondant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<ul class="categorie">
    <li class="souscat"><a <?php if($page=='page1'){?> class="sel" <?php } ?> href="Page1.php">Page 1</a></li>
    <li class="souscat"><a <?php if($page=='page2'){?> class="sel" <?php } ?> href="Page2.php">Page 2</a></li>
</ul>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.categorie li.souscat a:hover, .categorie li.souscat a.sel {
  color: #f4ebda;
  background-position: 0 bottom;
}

**thais781** · 26/12/2014, 11h02

Trop fort ......

J'ai juste complété en rajoutant un $page = "Page1"; dans le fichier page1.php et c'est nickel .....

Merci beaucoup

Thais

Menu Sprite Actif

Langage PHP

Discussions similaires

Partager

Partager