Menu simple en vertical en cliquant sur un input-button

Version imprimable

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>)
http://www.baalou.com/menu_css_simple.jpg

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:

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="√ Amis" disabled="disabled" /> <input id="add_friend" name="add_friend" type="hidden" value="<?=$id_ami;?>" /> </form> </div>
Merci d'avance, salutations

23/10/2013, 16h21
rodolphebrd

Bonjour,

merci de transmettre votre code et une page en ligne.
23/10/2013, 16h31
mecmec

Bonjour rodolphebrd,

Premier post corrigé.
23/10/2013, 16h59
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:

<input class="addfriend" id="addfriend" name="addfriend" type="button" value="√ Amis" onclick="afficheMenu(<?php echo $id_ami;?>);" />
23/10/2013, 18h01
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.
23/10/2013, 18h14
rodolphebrd

Et en css avec la pseudo-classe :target comme cet exemple (voir la démo).
24/10/2013, 14h44
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 ?

Bonjour,

J'ai mis:

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

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.

24/10/2013, 16h46
Bovino

Un id doit être unique dans la page !
24/10/2013, 17h07
mecmec

ok merci, c'est corrigé.

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