panneau déroulant jquery - Source d'essai

Canalblog

Editer l'article Suivre ce blog

Administration + Créer mon blog

Publicité

1 janvier 2010

panneau déroulant jquery

Grâce à la bibliothèque jquery, vous pouvez créer un panneau déroulant sur votre page très facilement ...

Les images:

Créez une image de fond de 800x600.

Copiez l'image suivante (changez les couleurs pour l'associer à votre fond)

Intégrez ces deux images au script, n'oubliez pas de changer couleurs, taille, etc)

Les fichiers à héberger et à insérer dans le head:

jquery-1.2.3.pack.js

jquery.ifixpng.js

Mettre ce script entre les balises <head> et </head>:

<br /><br /><br /><br /><br /> <script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script><br /><br /><br /><br /><br /> <script type="text/javascript" src="js/jquery.ifixpng.js"></script></p><br /><br /><br /><br /> <p><script type="text/javascript"><br /><br /><br /><br /><br /> $(document).ready(function(){</p><br /><br /><br /><br /> <p> $(".bouton-slide").click(function(){<br /><br /><br /><br /><br /> $("#panel").slideToggle("slow");<br /><br /><br /><br /><br /> $(this).toggleClass("active"); return false;<br /><br /><br /><br /><br /> });<br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /> });<br /><br /><br /><br /><br /> </script><br /><br /><br /><br /><br /> <script></p><br /><br /><br /><br /> <p> // Put all your code in your document ready area<br /><br /><br /><br /><br /> jQuery(document).ready(function($){<br /><br /><br /><br /><br /> // Do jQuery stuff using $<br /><br /><br /><br /><br /> $('img[@src$=.png], .slide').ifixpng();<br /><br /><br /><br /><br /> });<br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /> </script><br /><br /><br /><br /><br /> <style type="text/css"><br /><br /><br /><br /><br /> body {<br /><br /><br /><br /><br /> margin: 0 auto;<br /><br /><br /><br /><br /> background: black url(image/fond.gif) no-repeat center top;<br /><br /><br /><br /><br /> padding: 0;<br /><br /><br /><br /><br /> width: 570px;<br /><br /><br /><br /><br /> font: 75%/120% Arial, Helvetica, sans-serif;<br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /> a:focus {<br /><br /><br /><br /><br /> outline: none;<br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /> #panel {<br /><br /><br /><br /><br /> background: #ffb26e;<br /><br /><br /><br /><br /> height: 200px;<br /><br /><br /><br /><br /> display: none;<br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /> .slide {<br /><br /><br /><br /><br /> margin: 0;<br /><br /><br /><br /><br /> padding: 0;<br /><br /><br /><br /><br /> border-top: solid 4px #ff9c44;<br /><br /><br /><br /><br /> background: url(image/bouton_slide.gif) no-repeat center top;<br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /> .bouton-slide {<br /><br /><br /><br /><br /> text-align: center;<br /><br /><br /><br /><br /> width: 144px;<br /><br /><br /><br /><br /> height: 31px;<br /><br /><br /><br /><br /> padding: 10px 10px 0 0;<br /><br /><br /><br /><br /> margin: 0 auto;<br /><br /><br /><br /><br /> display: block;<br /><br /><br /><br /><br /> font: bold 120%/100% Arial, Helvetica, sans-serif;<br /><br /><br /><br /><br /> color: #fff;<br /><br /><br /><br /><br /> text-decoration: none;<br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /> .active {<br /><br /><br /><br /><br /> background-position: right 12px;<br /><br /><br /><br /><br /> }</p><br /><br /><br /><br /> <p></style></p><br /><br /><br /><br /> <p><br /><br /><br /><br />

Mettre ce script entre les balises <body> et </body>:

Voir démo:

Posté par arian à 00:00 - Commentaires […] - Permalien [#]

Tags: jquery, panneau déroulant

Partager cet article

Vous aimez ?

0 vote

Publicité

Publicité

Commentaires

Archives

2010
- Janvier (1)
2009
- Décembre (2)
- Octobre (1)
- Septembre (1)
- Avril (2)
- Mars (7)
- Février (7)
- Janvier (1)
2008
- Novembre (2)
- Octobre (3)
- Septembre (2)
- Juin (1)
- Mai (2)
- Avril (7)
- Mars (4)
- Février (35)

Publicité

Publicité