Partage
  • Partager sur Facebook
  • Partager sur Twitter

ouverture au clic et pas au survol

Sujet résolu
    17 avril 2019 à 16:03:52

    Bonjour à tou(te)s et merci de votre aide par avance.
    Je cherche à faire un slider horizontal, et j'ai trouvé un code qui me convient presque :

    http://beta.rdsign.net/exemple/accordeon_horizontal/

    la seule chose que je ne sais pas comment modifier pour l'adapter à mon projet est que le slide s'ouvre au clic et non au survol.En mettant :active au lieu de :hover, ça commence à s'ouvrir quand je tiens cliqué, mais dès que je relâche il se referme...

    ça m'énerve ;o)

    .accordion  {
        font-family: Arial, Helvetica, sans-serif;
        border-right:1px solid #CCCCCC;
    }
    
    .accordion>ul>li>a {
        -moz-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
        -webkit-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
        box-shadow:inset 1px 0px 0px 0px #C4E1B0;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3b75f, endColorstr=#74892d);
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a3b75f), color-stop(1, #74892d) );
        background: -moz-linear-gradient( center top, #a3b75f 5%, #74892d 100%);
        background-color:#a3b75f;
        border-style:solid;
        border-color:#56661f;
        color:#FFFFFF;
        font-size:15px;
        font-weight:bold;
        text-decoration:none;
        text-shadow:-1px -1px 0px #000000;
    }
    
    .accordion>ul>li>a:hover{
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#899a4c', endColorstr='#56661f');
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #899a4c), color-stop(1, #56661f) );
        background:-moz-linear-gradient( center top, #899a4c 5%, #56661f 100% );
        color:#fff;
    }
    
    .accordion>ul>li>div {
        background-color:#fff;
        border-style:solid;
        border-color:#ccc;
    }
    
    .accordion>ul>li>div {
        border-width:1px 0;
        height:300px;
        padding:10px;
        width:430px;
    }
    
    .accordion>ul>li>a {
        border-width:0 1px 0 0;
        width:40px;
    }
    
    .accordion  {    
        width:614px;
    }
    
    .accordion, .accordion>ul>li>a  {    
        height:322px;
    }
    
    .accordion>ul>li {
        margin-right:-450px; 
        width:491px;
        transition: margin-right 0.5s ease-in-out 0.1s;
        -moz-transition: margin-right 0.5s ease-in-out 0.1s;
        -webkit-transition: margin-right 0.5s ease-in-out 0.1s;
        -o-transition: margin-right 0.5s ease-in-out 0.1s;
    }
    
    .accordion {overflow:hidden;}
    .accordion>ul {margin:0;padding:0;list-style:none;width:9999em;}
    .accordion>ul>li {float:left;overflow:hidden;}
    .accordion>ul>li>a {float:left;margin:0;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
    .accordion>ul>li>a>span{ 
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -ms-writing-mode:lr-bt;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
    }
    ul.accordion-ie>li>a>span {cursor:pointer;width:auto;}
    .accordion>ul>li>div {float:left;}
    .accordion>ul>li:hover {margin-right:0px;}
    

    MERCI !!!

    • Partager sur Facebook
    • Partager sur Twitter
      18 avril 2019 à 13:23:59

      Hello !

      Si tu souhaites effectué une action au clic, il te faut utiliser Javascript. En ajoutant l'attribut onclick="taFonctionEnJS()", à chaque clic sur l'élément avec cette attribut, la fonction sera exécutée

      • Partager sur Facebook
      • Partager sur Twitter

      Un passioné de Web et Mobile.  vernaisc.fr

        18 avril 2019 à 14:34:25

        Salut !

        Il faut aussi que tu enlèves le 

         .accordion>ul>li>a:hover{

        c'est ça qui fait qu'au survol ça s'ouvre :)

        • Partager sur Facebook
        • Partager sur Twitter
          25 avril 2019 à 11:28:01

          Merci à tous,

          j'ai finalement opté pour l'accordéon Jquery, et ça fonctionne bien.

          Bonne journée

          • Partager sur Facebook
          • Partager sur Twitter

          ouverture au clic et pas au survol

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown