Sliding Columns Menu jQuery plugin

Demo

  • Item a1
  • Item a2
  • Item a3
    • Item b1
    • Item b2
    • Item b3
      • Item c1
      • Item c2
      • Item c3
    • Item b4
  • Item a4

Installation

Vous devez d’abord inclure le plugin et jQuery lui même.

<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/jquery.sliding-columns-menu-0.1.min.js'></script>


la mise en style avec CSS

/**
 * Conteneur du menu
 * Requis
 */
#scm-wrapper {
	position: relative;
	overflow: hidden;
	background-color: fuchsia;
}
/**
 * Layer contenant une liste de 1 niveau qui va glisser
 * Requis
 */
.scm-slide{
	position: absolute;
	top: 0;
	left: 0;
}
/**
 * Les styles qui suivent sont la pour la déco
 */
#scm-wrapper li{
	margin: 0;
	padding: 0;
	list-style: none;
}
.scm-back, /** Bouton retour **/
.scm-has-child
{
	color: aqua;
	cursor: pointer;
}


Les données de votre mosaique doivent être présentées par une liste d’item classique.

<ul id="scm-container">
	<li>Item a1</li>
	<li>Item a2</li>
	<li>Item a3
		<ul>
			<li>Item b1</li>
  			<li>Item b2</li>
  			<li><a href="#" onclick="alert(''); void(0);return false;">Item b3</a>
				<ul>
					<li>Item c1</li>
					<li>Item c2</li>
					<li>Item c3</li>
				</ul>
			</li>
			<li>Item b4</li>
 		</ul>
	  </li>
  <li>Item a4</li>
</ul>


Initialisation

$(document).ready(function()
{
	var m = $("#scm-container").scMenu();
});


 

Options d'initialisation

Paramètre Valeur par défaut Commentaire
width 150 Largeur du menu
backBtnLabel Back Libellé du bouton retour

Versions