Rendu sélection d'item sur menu vertical

Version imprimable

09/02/2014, 13h23
yoshï

1 pièce(s) jointe(s)

Rendu sélection d'item sur menu vertical

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
09/02/2014, 17h10
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.

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:

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 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 setMenuActif(numéro); ?>

Numéro étant le lien actif évidemment.

Et dans body le menu:
Code:

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.

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:

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; }

10/02/2014, 08h30
rodolphebrd

Bonjour,

Citation:

Envoyé par yoshï

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.

Citation:

Envoyé par yoshï

faut il créer une image?

Non ce n'est pas obligatoire mais totalement compatible et nécessite malgré tout une requête.
11/02/2014, 12h18
yoshï

Bonjour rodolphebrd,

Citation:

Envoyé par 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.

Citation:

Envoyé par rodolphebrd

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.
11/02/2014, 13h44
rodolphebrd

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

Citation:

Envoyé par yoshii

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.
11/02/2014, 14h29
yoshï

Citation:

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

Citation:

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).

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

voici le code:

Code:

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 :)

11/02/2014, 18h26
rodolphebrd

Super :ccool:

Bonne continuation sur le forum.