IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Menu simple en vertical en cliquant sur un input-button


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Inscrit en
    Février 2006
    Messages
    293
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 293
    Par défaut Menu simple en vertical en cliquant sur un input-button
    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

  2. #2
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Bonjour,

    merci de transmettre votre code et une page en ligne.

  3. #3
    Membre éclairé
    Inscrit en
    Février 2006
    Messages
    293
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 293
    Par défaut
    Bonjour rodolphebrd,

    Premier post corrigé.

  4. #4
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2013
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Distribution

    Informations forums :
    Inscription : Octobre 2013
    Messages : 24
    Par défaut
    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;?>);" />

  5. #5
    Membre éclairé
    Inscrit en
    Février 2006
    Messages
    293
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 293
    Par défaut
    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.

  6. #6
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Et en css avec la pseudo-classe :target comme cet exemple (voir la démo).

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 18/09/2012, 14h52
  2. [Débutant] Récupérer un message en cliquant sur un push button
    Par jeune informatique dans le forum Interfaces Graphiques
    Réponses: 1
    Dernier message: 07/06/2010, 08h26
  3. envoyer formulaire en cliquant sur un lien de menu
    Par sousan_24 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 15/09/2008, 11h52
  4. Rollover sur un Input Button
    Par whorian dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 27/01/2008, 11h02
  5. afficher un menu déroulant positionné en cliquant sur un lien
    Par gedeon555 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 21/09/2006, 11h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo