Discussion :

[yoshï]

Bonjour à tous,
J'ai quelques difficultés pour réaliser le menu vertical décrit en pièce jointe.
Il s'agit d'un bandeau avec une liste d'item. Quand on sélectionne un item, une sorte de flèche vient s'ajouter sur la droite de l'item actif ("Accueil" dans l'exemple en fichier joint).
J'ai déjà fait le bandeau avec les items, mon seul problème c'est de créer cette fameuse "pointe" qui indique la rubrique active.
Quel est selon vous la manière la plus "propre" d'obtenir cet effet? Peut on tout gérer en CSS ou faut il créer une image?

Merci d'avance

[JefReb]

Une simple idée comme ça:
Avec 2 background-image. Un sans la flèche et l'autre avec la flèche.
Puis en php cela doit être très facile de mettre le background-image sur le lien actif en générant le style.

[JefReb]

Je pense avoir la solution, mais je vais me faire taper dessus par les modérateurs car c'est une solution php que j'ai trouver.

Il faut créer dans un fichier extérieur exemple active.inc.php:

Code php :

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

1
2
3
4
5
6
7
 
<?php
  function setMenuActif($id) {
  echo '<style type="text/css">ul#vermenu li#m'.$id.' { background:url(/images/fondfleche.jpg) no-repeat;}';
  echo 'ul#vermenu li#m'.$id.':hover a { text-decoration: none; }</style>';
  }
?>

Puis en tête du fichier html/php

Code php :

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

<?php if(file_exists($_SERVER["DOCUMENT_ROOT"]."/ssi/active.inc.php")){include ($_SERVER["DOCUMENT_ROOT"]."/ssi/active.inc.php");}else{echo "ERREUR 1";} ?>

Avant body mettre:

Code php :

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

<?php setMenuActif(numéro); ?>

Numéro étant le lien actif évidemment.

Et dans body le menu:

Code html :

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

1
2
3
4
5
6
7
<div id="vernav">
    <ul id="vermenu">
        <li id="m1"><a href="index.php" title=""><span>Accueil</span></a></li>
        <li id="m2"><a href="page2.php" title="">Chantier</a></li>
        <li id="m3"><a href="page3.php" title="">Maison</a></li>
    </ul>
</div>

Le css pour le menu vertical est classique.

[yoshï]

Bonjour JefReb et merci pour ta réponse.

Je pense que tu te compliques la vie pour rien .
En fait ma question c'était :Est il possible d'éviter de créer des images et de tout faire en CSS (CSS 3 permet de faire des formes)?.

Dans le cas où je suis obligé d'utiliser des images, il n'est pas nécessaire d'utiliser PHP...
On applique l'image de fond uniquement sur l'item actif

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
 
#vertical-menu li{
	display:inline; 
}
 
#vertical-menu li a{
	display:block;
	color:#736b68;
	width:155px;
	height: 80px;
	width: 100%;
	padding-top: 30px; 
	padding-left: 28px; 
	border-bottom:1px solid #736b68; 
}
 
#vertical-menu  li a:hover,
#vertical-menu  li.active  a,
#vertical-menu  li.active  a:focus{
	color:white;
}
 
#vertical-menu  li.active  a{
       background: url(../img/active-menu.png) no-repeat right;
}

[rodolphebrd]

Bonjour,

Peut on tout gérer en CSS

Oui c'est ce que je fais aujourd'hui mais il faut bien tester sur plusieurs plateformes et OS pour éviter les surprises.

faut il créer une image?

Non ce n'est pas obligatoire mais totalement compatible et nécessite malgré tout une requête.

[yoshï]

Bonjour rodolphebrd,

Oui c'est ce que je fais aujourd'hui mais il faut bien tester sur plusieurs plateformes et OS pour éviter les surprises.

Peux tu me donner quelques pistes pour réaliser cette forme? Je ne sais pas trop comment m'y prendre.

Non ce n'est pas obligatoire mais totalement compatible et nécessite malgré tout une requête.

Je ne comprends pas à quoi sert la requête, j'ai testé juste avec du code CSS. Apparemment ça fonctionne bien.
On définit une couleur de fond pour le bandeau et on affiche l'image que pour l'item actif.
A chaque fois qu'on clique sur un item, la page est rechargée et le menu est mis à jour avec le CSS.

[rodolphebrd]

Pour le triangle en CSS il y a ce tutoriel disponible sur le forum : http://red-team-design.developpez.co...lant-css3/#LIV

Je ne comprends pas à quoi sert la requête, j'ai testé juste avec du code CSS. Apparemment ça fonctionne bien.
On définit une couleur de fond pour le bandeau et on affiche l'image que pour l'item actif.
A chaque fois qu'on clique sur un item, la page est rechargée et le menu est mis à jour avec le CSS.

Vous ne parlez donc plus d'image ?
Concernant la requête je réponds à votre question sur l'utilité d'une image.
Il s'agit là de se poser la question sur la nécessite d'une requête http pour le chargement de l'image, impactant (même de manière infime) les performances de chargement de la page.

[yoshï]

Pour le triangle en CSS il y a ce tutoriel disponible sur le forum : http://red-team-design.developpez.co...lant-css3/#LIV

Merci pour le tutoriel

Vous ne parlez donc plus d'image ?
Concernant la requête je réponds à votre question sur l'utilité d'une image.
Il s'agit là de se poser la question sur la nécessite d'une requête http pour le chargement de l'image, impactant (même de manière infime) les performances de chargement de la page.

On ne s'était pas bien compris. La seconde option consistait bien à utiliser une image mais uniquement avec du CSS et sans passer par du code PHP.
Je pensais que vous exprimiez le fait que j'étais obligé de passer par du code PHP avec l'option de l'image (comme décrit par JefReb dans les précédents posts).

[yoshï]

Je poste la solution obtenue à partir de l'exemple de rodolphebrd

voici le code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
/************vertical menu**************/
#vertical-menu{
	background-color: #28292d;
	border-radius: 3px 0 0 3px;
	padding: 0px;
	height: 100%;
}
 
#vertical-menu i{
	padding-right: 12px;
}
 
#vertical-menu li{
	display:inline; 
}
 
#vertical-menu li a{
	display:block;
	color:#736b68;
	width:155px;
 	height: 80px;
	width: 100%;
	 padding-top: 30px;
	padding-left: 28px; 
	 border-bottom:1px solid #736b68; 
	background-color: transparent !important;
}
 
#vertical-menu  li.active a,
#vertical-menu  li a:hover{
	color:white;
 
}
 
/***Dessin de la Pointe**/
#vertical-menu  li.active a:after{
    content: '';
    position: absolute;
    margin-top: -30px;
    left:100%;
    width: 0px;
    height: 0px;
    border-top: 40px solid transparent;
    border-left: 20px solid #28292d;
    border-bottom: 40px solid transparent;
}

Ce code fonctionne parfaitement sous Firefox 26, Chrome 32 et IE11.

Merci rodolphebrd