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