Menu accordion CSS3 JavaScript

 

Ce menu accordion, je l'utilise sur mon propre site, qui est accessible dans chacune des catégories.
Ce menu est configurable à souhait au niveau des couleur (linear-gradient), dont vous pouvez trouver sur le net des générateur de couleur gradient afin de l'adapter à votre site.

Ci-dessous le code Html tel qu'il doit être codé, il vous suffira de remplacer les liens par les vôtres ou le texte.

<div class="accordion">
	<h4>Sommaire</h4>
		<section id="a1">
			<h3><a href="#a1">Tutoriaux PHP</a></h3>
				<div>
					<ul>
                        <li><a href="#">Fonctions utiles en PHP</a></li>
                        <li><a href="#">Expressions (4)</a></li>
                        <li><a href="#">Les dates en PHP</a></li>
                        <li><a href="#">Notion PHP</a></li>
                        <li><a href="#">Les boucles en PHP</a></li>
                        <li><a href="#">Variables Globales</a></li>
                        <li><a href="#">Les sessions</a></li>
                        <li><a href="#">Merise</a></li>
					</ul>
				</div>
		</section>
		<section id="a2">
			<h3><a href="#a2">Scripts PHP</a></h3>
				<div>
					<ul>
                        <li><a href="#">Update multi-table</a></li>
                        <li><a href="#">Update multiple SQL</a></li>
                        <li><a href="#">Compteur de clic</a></li>
                        <li><a href="#">Pagination en PHP</a></li>
                        <li><a href="#">Importer un fichier CSV</a></li>
                        <li><a href="#">Modifier une image</a></li>
                        <li><a href="#">Explorateur fichier + zip</a></li>
					</ul>
				</div>
		</section>
		<section id="a3">
			<h3><a href="#a3">Bloc de texte</a></h3>
				<div>
					<p>
					Nous pouvons aussi afficher comme ici un bloc de texte, le mettre en forme via css.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</p>
				</div>
		</section>
		<section id="a4">
			<h3><a href="#a4">Highslide JavaScript</a></h3>
				<div>
					<ul>
                        <li><a href="#">Highslide</a></li>
                        <li><a href="#">Update SQL Highslide</a></li>
                    </ul>
				</div>
		</section>
		<section id="a5">
			<h3><a href="#a5">Editeur - CKEDITOR</a></h3>
				<div>
					<ul>
                        <li><a href="#">CKEDITOR</a></li>
                        <li><a href="#">Plugin CKEDITOR</a></li>
					</ul>
				</div>
		</section>
</div>                      
              

Ci-dessous le code CSS, avec dans la classe (accordion) le css3 utilisant (linear-gradient) avec leur préfixe pour les navigateurs les plus récents supportant ce type d'attribut.

                    section{display:block;} 
                    .accordion{background-color:#eee;border: 1px solid #ccc;width:300px;padding:5px;margin:5px auto;	
                        -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
                        -moz-box-shadow:0 1px 0 #999;-webkit-box-shadow:0 1px 0 #999;box-shadow:0 1px 0 #999;}
                    .accordion section{border-bottom:1px solid #ccc;margin:5px;
                        background-color:#fff;background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image: -webkit-linear-gradient(top, #fff, #eee);
                        background-image: -moz-linear-gradient(top, #fff, #eee);background-image: -ms-linear-gradient(top, #fff, #eee);background-image: -o-linear-gradient(top, #fff, #eee);
                        background-image:linear-gradient(top, #fff, #eee);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
                    .accordion h3{margin:0;font-size:11px;font-weight:bold;}
                    .accordion p{margin:0;padding:10px;}
                    .accordion span{font-size:11px;}
                    .accordion div{height:101%;display:none; padding-bottom:10px;}
                    .accordion h3 a{display:block;position:relative;font: 12px/1 'Trebuchet MS', 'Lucida Sans', Arial, Helvetica;padding:10px;color:#333;outline:0;text-decoration:none;-moz-border-radius:5px;
                        -webkit-border-radius:5px;border-radius:5px;font-weight:bold;}
                    .accordion h3 a:hover{background:#fff;}
                    .accordion h3.active a:after{content: '';position:absolute;right:10px;top:50%;margin-top:-3px;border-top:5px solid #333;border-left:5px solid transparent;border-right:5px solid transparent;}
                    .accordion ul{margin-left:15px;margin-top:0;padding-left:0;list-style:none;}
                    .accordion li{font-size:10px;line-height:15px;}
                    .accordion li a:link{background:url(../images/tabarrow.png) left no-repeat;color:#333;text-decoration:none;font-weight:bold;font-size:10px;}
                    .accordion li a:visited{background:url(../images/tabarrowred.png) left no-repeat;color:#F63;text-decoration:none;font-weight:bold;font-size:10px;}
                    .accordion li a:hover{background:url(../images/tabarrowblue.png) left no-repeat;color:#b0b0b0;text-decoration:none;font-weight:bold;}
                    .accordion li a{padding-left:1em;}
               

Ci-dessous la fonction JavaScript qui permet de faire fonctionner le menu. Si vous utilisez déjà la librairie JQuery, il suffira juste d'inclure cette fonction entre les balises scripts.

                    $(document).ready(function(){
                        $(".accordion h3").click(function(){
                            if($(this).next().is(":hidden")){
                                $(".accordion h3").removeClass("active").next().slideUp();
                                $(this).addClass("active").next().slideDown()
                                }
                                return false
                                })
                        });
                  

La démo utilise les mêmes codes que ceux cités dans les onglets de code.



Ci-dessous le lien vers la démo. Démo