Discussion :

[mecmec]

Bonjour,

Depuis des mois, je cherche comment il faudrait faire pour créer un menu vertical en css (une sorte de onglet) mais le faire le plus simple possible.

J'y suis arrivé a faire des menu en vertical avec par exemple "Boostrap" et aussi en mettant par exemple un "span" caché dans un "<a href", je trouve aussi que Bootstrap est trés compliqué..

Voici un petit montage photoshop pour mieux comprendre mon souhait: (le bouton "Amis" c'est un <input>)


Savez-vous comment il faudrait faire pour obtenir ce menu le plus simple possible et compatible sur tous les navigateurs ?

Mon code html actuellement c'est:

Code html :

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

1
2
3
4
5
6
<div id="m_friends" style="margin-top:5px;">
<form action="" enctype="application/x-www-form-urlencoded" method="post" <?=$onsubmit;?>>
<input class="addfriend" id="addfriend" name="addfriend" type="button" value="&radic; Amis" disabled="disabled" />
<input id="add_friend" name="add_friend" type="hidden" value="<?=$id_ami;?>" />
</form>
</div>

Merci d'avance, salutations

[rodolphebrd]

Bonjour,

merci de transmettre votre code et une page en ligne.

[mecmec]

Bonjour rodolphebrd,

Premier post corrigé.

[sk8matt]

Bonjour mecmec,

Tu n'a pas d'autre choix que d'utilisé du JavaScript pour réalisé ceci. La propriété disabled est obligatoire pour ton input ? Car pour utiliser l’événement onclick tu n'aura pas d'autre choix.

Et exécuter une fonction Javascript qui créera dynamiquement ton menu sous ton input.

Code html :

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

<input class="addfriend" id="addfriend" name="addfriend" type="button" value="&radic; Amis"  onclick="afficheMenu(<?php echo $id_ami;?>);" />

[mecmec]

Ok merci, j'fais des test et sa marche plutot bien sur IE,Firefox,Safari,Chrome mais je ne sais pas si c'est logique:

http://www.baalou.com/atelier/menu_v...simple_css_js/

J'ai remarqué qu'il y avait un problème, pour tester le problème il faut faire les manipulations suivantes:

1) on clic sur "Amis"
2) on fait une survole pour le plaisir sur "supprimer" et "test"
3) on clic sur le contenu (exemple: au centre de l'écran) et le menu ne se ferme pas, une idée pour qu'il se ferme ?)

Merci, salut.

[rodolphebrd]

Et en css avec la pseudo-classe :target comme cet exemple (voir la démo).

[sk8matt]

C'est normal que ton menu ne se dé affiche pas. Pour cela il te faut une méthode pour le faire.

C'est ce qui se passe lorsque tu clic un deuxième fois sur le bouton. Une méthode s’exécute et supprime ton menu.

Une solution serait d'utiliser l’événement onmouseout sur l’élément html conteneur de ton menu. Alors lorsque le pointeur de la souris ne sera plus sur ton menu ce dernier disparaîtra.

Tu as le code de ta fonction js d'affichage ?

[mecmec]

Bonjour,

J'ai mis:

Code javascript :

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
<script>
$(document).ready(function(){
 
// ici on cache les sous menu à l'ouverture de la page. Si vous souhaitez que ceux ci soient visibles , supprimez ou commentez ces 3 lignes  
 
$("#friend").click(function(){
// on demande de détecter au clique de la souris sur le a (lien)
 
$(this).next().slideToggle("slow");
// Modifie la visibilité des élements sélectionnés en ajustant leur hauteur
 
$(this).parent().siblings().find("ul").slideUp();
// Cache tous les élements sélectionnés selon un effet spécifique de "glissement"
 
return false;
});
 
 
$("div#menu").mouseleave(function(){
document.getElementById('page0').style.display='none';
//return false;
});
 
$('#del_friend').click(function(){
gestionfriend('<?=$membre[id];?>','<?=$mon_id_compte;?>','del');
document.getElementById('page0').style.display='none';
return false;
});
 
 
 
 
});
</script>

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="menu">
 
<ul id="menu">
<li>
<input class="addfriend" id="friend" name="friend" type="button" value="&radic; Amis" />
<ul id="page0" style="display:none;">
<li><a href="#" id="del_friend">Retirer de la liste d\'amis</a></li>
</ul>
</li>
</ul>
 
</div>

sa marche plutot bien, mais ça pourrait être mieux.

[Bovino]

Un id doit être unique dans la page !

[mecmec]

ok merci, c'est corrigé.

Voir le rendu du menu: http://www.baalou.com/atelier/menu_v...simple_css_js/