Un formulaire d'inscription comme celui de CCM

Utilisateur anonyme -  
 Utilisateur anonyme -
bonjours
avant de me conecter a comment ça marche, je pointe la souris sur "conection" et un petit cadre aparait pour se conecter
si on clique sur "conection" le cadre reste alors que moi je ne connais que :hover pour css au survol de la souris
comment faire pour que le cadre reste et ne disparait pas ?
et aussi comment faire aparaitre un cadre
en effet avec hover je ne fait que modifier par example la couleur du texte, mais je ne sais pas comment faire aparaitre tout un cadre
merci :)

2 réponses

  1.
    mr_demonicon Messages postés 921 Statut Membre 126
     
    plutot du js
    0
    1. Utilisateur anonyme
       
      oui je pense aussi que c'est du js
      si vous avez un tuto ou autre je suis prenant
      sinon merci comme meme :)
      0
  2. NardinLePen
     
    Salam alekoum

    http://letrainde13h37.fr/44/menu-deroulant-accessible-css/

    ou

    https://www.google.fr/search?q=menu+deroulant+css
    0
    1. Utilisateur anonyme
       
      wa aleikom assalam
      oui je connais le menu deroulant en css
      mais la je pense que c'est different
      merci comme même mon frere ;)
      0
    2. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
       
      ce doit être du jquery

      le principe :
      le cadre est dans le html
      ex
      <div id="formulaire">le html du formulaire d'inscription<div>
      css le met en forme et le positionne mais avec un display:none; et un opacity:0.4;


      exemple de comment faire (avec petit effet d'animation apparition et transparence) 

      <script>
      $(document).ready(function(){$("#connect").click(function(){$("#formulaire").animate({opacity:.4},100).slideUp("300").delay("400");if(!$(this).next().is(":visible")){$(this).next().slideDown("500").animate({opacity:1},1e3)}if($(this).next().is(":hidden")){$(this).next().css("opacity","0.4")}})});
      </script>

      <p id="connect">connexion</p>
      <div id="formulaire">le html du formulaire d'inscription<div>

      ne pas oublier d'integrer la bibliothèque jquery (dans head) 
      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
      0
    3. Utilisateur anonyme
       
      mmmmm
      ça semble pas tres complex
      jvé essayer avec ta technique
      merci bcp animostab :)
      0