Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Ven 14 Oct 2011 - 8:03
Grâce à cette astuce, vous pourrez créer un texte qui affichera en passant la souris
sur ce dernier un contenu avec un effet ressort ( texte, image, iframe etc etc).
Voir l'exemple en entête d'index" Règlement interne".

Pour ce fait:
il faut insérer un code javascript sur l'ensemble des pages de votre forum:
Modules/HTML & JAVASCRIPT/Gestions des codes javascript/Créer un nouveau javascript

Créez un nouveau javascript en le nommant par exemple ==>" menu_cliquable" sur toutes les pages du forum.

Code:

$(document).ready(function(){

    //When Mouse rolls over li
    $("li").mouseover(function(){
        $(this).stop().animate({height:'220px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When Mouse cursor removed from li
    $("li").mouseout(function(){
        $(this).stop().animate({height:'20px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

Pensez à valider votre nouveau javascript ;) .

Remarque, vous pourrez toujours modifier la hauteur de l'affichage de votre contenu en modifiant la valeur
220px dans la première partie et la hauteur de de 20px pour le texte qui fera défiler le contenu.

Afin d'obtenir le résultat escompté, il va nous falloir insérer deux scripts bien distincts dans la template
Overall_header juste avant la fermeture de
Code:
</head>
Affichage/Templates/Général/overall_header
Recherchez
Code:
</head>
et collez les deux scripts suivants juste avant:

Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="http://cssmilouze14.bbactif.com/19658.js" type="text/javascript"><!--mce:0--></script>

Passons ensuite à la compréhension du code HTML :
Code:
<div id="vnav">
<ul>
<li>Votre texte.<br>
<br>
<p>Votre contenu</p>
</li>
</ul>
</div>



La partie C.S.S:

Afin de mieux comprendre, je vous laisse la C.S.S de ce forum,
modifiez comme bon vous semble ;)

Code:
li {
background-image:url('http://milouze14.fr/contour1haut.gif');
background-repeat: repeat-x;
background-color: #000000;
border: 1px solid #ffffff;
  height:17px;
  width:700px;
  overflow:hidden;
    color:darkorange;
    text-decoration: none important!;
    line-height: 1;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 7px 10px 6px;
    margin-top:5px;
  margin-left:280px;
text-align:center;
border: 1px solid darkred;
-moz-border-radius-: 8px;
-webkit-border-radius: 8px;
border-radius:8px;
-ô-border-radius:8px;
-khtml-border-radius:8px;
 
}
li p {
  margin-top:15px;
  font-size:12px;
    color:white;
background-image:url('http://milouze14.fr/i_back_catg.jpg');
background-repeat: repeat-x;
border: 1px solid #ffffff;
text-align: left;
padding-left:5px;
padding:10px;
border: 1px solid darkred;
-moz-border-radius-: 8px;
-webkit-border-radius: 8px;
border-radius:8px;
-ô-border-radius:8px;
-khtml-border-radius:8px;
}





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

  
  • © PunBB | Signaler un abus