Forum Alsacréations : CSS et Standards Web

// Votre code

// Commentez le dans la mesure de votre temps   

Array.prototype.inArray = function(val) {

	for(var a2 = 0; a2 < this.length; ++a2) {

		if(this[ a2] == val){

		return true;

		}

	}

	return false;

};

document.getElementsByClassName = function(className) {

	var elts = document.getElementsByTagName('*');

	var classArray = new Array();

	for (var j = 0; j < elts.length; ++j) {

		if (elts[j].getAttribute('class') && elts[j].getAttribute('class').split(' ').inArray(className)) {

// méthode inArray faite à la main > Explication et code

			classArray.push(elts[j]);

		}

	}

	return classArray;

};

function zebraTable(type, selector) {

	var myTable;

	var rows;

	var parity;

	

	evenOdd = function(rowsArray) {

		for (var r = 0; r < rowsArray.length; ++r) {

			parity = (r % 2) ? ' even' : ' odd';

			rowsArray[r].setAttribute('class', rowsArray[r].getAttribute('class') + parity);

		}

	};

	

	if (type == 'id' && selector) {

		if (document.getElementById(selector)) {

			myTable = document.getElementById(selector);

			rows = myTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

			evenOdd(rows);

		}

	} else {

		if (type == 'class' && selector) {

			myTable = document.getElementsByClassName(selector);

// méthode getElementsByTagName faite à la main > Explication et code

		} else {

			myTable = document.getElementsByTagName('table');

		}

		for (var t = 0; t < myTable.length; ++t) {

			rows = myTable[t].getElementsByTagName('tbody')[0].getElementsByTagName('tr');

			evenOdd(rows);

		}

	}

}

// Avec l'ensemble des tableaux de la page

zebraTable();

// Avec une class

zebraTable('class', 'nomDeLaClass');

// Avec un id

zebraTable('id', 'nomDeLId');

/** INFOBULLE
* ----------
* Jeremie Patonnier <jep@ibilab.net>
* Version : 1.0
* ----------
* Objet JavaScript qui permet de créer des infobulles hautement personnalisées
* ----------
* Propriétés de l'objet :
*
* 1 - infoBulle::decY : integer : Defaut : 20
* Décalage de l'infobulle par rapport au pointeur de la souris
* sur l'axe des Y.
*
* 2 - infoBulle::decX : integer : Defaut : 0
* Décalage de l'infobulle par rapport au pointeur de la souris
* sur l'axe des X.
*
* 3 - infoBulle::width : integer : Defaut : 210
* Largeur de l'infobulle (en pixel). il est conseillé que cette
* valeur soit egale à la valeur du style CSS width de l'infobulle.
*
* 4 - infoBulle::enableAlt : Boolean : Defaut : false
* Indique si l'objet doit se baser sur le contenu de l'attribut
* alt pour générer le contenue de l'infobulle (true) ou bien
* uniquement sur la contenue de l'attribut title (false).
*
* 5 - infoBulle::enableDrag : Boolean : Defaut : true
* Indique si l'infobulle doit suivre la souris (true) ou rester
* à un emplacement fixe sur la page (false);
*
* ----------
* Méthodes de l'objet :
*
* 1 - infoBulle::setTo(OBJ, TEXTE):
* Méthode qui permet d'assigner l'infobulle à l'objet OBJ et de
* rajouter le texte TEXTE à la suite du texte de l'infobulle
* pour cet objet.
*
* 2 - infoBulle::registerPointer(URLIMG):
* Méthode permetant de rajouter un pointeur suivant la souris
* à l'infobulle. Ce pointeur est une image dont l'URL est URLIMG.
*
* 3 - infoBulle::registerFormat(REGEXP,FORMAT):
* Méthode permettant de spécifié des règles de formatage du texte.
*
* La portion de texte à formater est identifié grace à un objet
* REGEXP, la règle de formatage est la chaine de caratère FORMAT.
*
* ----------
* Styliser l'infobulle :
* Le texte de l'infobulle est à l'interieur d'une balise DIV identifié par #insideBulle
* qui est elle même contenue dans une balise DIV identifié par #infoBulle
* ----------
* Exemple d'utilisation :
*
* <img src="test.jpg" id="test" alt="Photo test : Voici une infobulle personnalisé" />
*
* <script type="text/javascript">
* bulle = new infoBulle();
* bulle.enableAlt = true;
* bulle.setTo(document.getElementById("test"));
* bulle.registerFormat(/^(.*:)/,"<strong>$1</strong>");
* </script>
*
* <style type="text/css">
* #infoBulle{
* background:#FCC;
* border:1px solid #999;
* }
* #insideBulle{
* margin:10px;
* font:0.8em Arial,Helvetica,sans-serif;
* }
* </style>
*/

/** NEWINDOW

 * ---------

 * Jeremie Patonnier <jep@ibilab.net>

 * Version : 2.0

 * ---------

 * Fonction JavaScript qui permet d'ouvrir une Pop-up ou une nouvelle fenètre 

 * avec l'accord de l'utilisateur en option.

 * ---------

 * Paramètres de fonction :

 *

 * 1 - URL          : L'objet représentant le lien contenant l'url à ouvrir dans la nouvelle fenètre

 *                  : ou le lien à ouvrir dans un pop-up

 *

 * 2 - CONFIRMATION : (optionel) un booleen qui spécifie si l'utisateur 

 *                    doit confirmer l'ouverture dans un pop-up ou une fenètre.

 *                    Par defaut, aucune confirmation n'est demandé (false).

 *

 * 3 - MESSAGE      : (optionel) le message à afficher lors de la demande de confirmation.

 *

 * 4 - NOM          : (optionel) Le nom de la pop-up ou fenètre à ouvrir.

 *

 * 5 - FEATURE      : (optionel) Les options de configuration des pop-up

 * ---------

 * Exemple d'utilisation :

 *

 * Simulation de l'attribut target="_blank" en XHTML 1.0 stric   

 * <a href="http://www.ibilab.net/" onclick="return neWindow(this)">

 *

 */



function neWindow(url,confirmation,message,nom,feature){



	if(message == undefined || message == '') message = 'Voulez vous ouvrir ce lien dans une nouvelle fenètre ?';



	if(confirmation == true && !window.confirm(message)) return true;



	if(typeof(url)!="string"){

		url.target = "_blank";

		return true;



	}else{

		if(nom == undefined) nom = 'w'+new Date().getTime();

		if(feature == undefined) feature = 'toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes';

		window.open(url,nom,feature);

		return false;

	}

}

// Javascript Document : Méthode Array.compare()

// Script original par Lisaraël.

Array.prototype.compare = function(arr)

{

	if(!(arr instanceof Array)) {

		return false;

	}



	if(this.length != arr.length) {

		return false;

	}



	for(var a = 0; a < this.length; ++a) {

		if((this[a] instanceof Array) && (arr[a] instanceof Array)) {

			if(!(this[a].compare(arr[a]))) {

				return false;

			}

		}

		if(this[a] !== arr[a]) {

			return false;

		}

	}

	return true;

};

	

	function getElementsByClassNameforAllElements(className){

		var AllElements = document.getElementsByTagName('*');		//On récupère tous les éléments de la page web

		for (var ii = 0; ii < AllElements.length; ++ii) { //On les scanne tous un par un

			AllElements  .getElementsByClassName = function(className) { //Pour chaque élément on rajoute la fonction getElementsByClassName

				var MyClassArray = getElementsByClassName(className, this);

				return MyClassArray;

			}

		}

		

		//Tous les éléments on été traités sauf l'objet document, donc on lui rajoute aussi la méthode

		document.getElementsByClassName = function(className){

			var MyClassArray = getElementsByClassName(className, this);

			return MyClassArray;

		}

	}

	

	function getElementsByClassName (className, theElement){

		var elts = theElement.getElementsByTagName('*');

		var classArray = new Array();

		for (var j = 0; j < elts.length; ++j) {

		if (elts[j].className.indexOf(className) != -1) {

				classArray.push(elts[j]);

			}

		}

		return classArray;

	}

	function Prout(element){

		if (element != document) var monmenu = document.getElementById(element);

	   	else monmenu=document;

		var mesprout = monmenu.getElementsByClassName('prout');

		for (var j = 0; j < mesprout.length; ++j) { 

			alert(mesprout[j].id);

		}

	}

<ul id="menu">

	<li><a href="#" id="lien1" class="prout">lien1</a></li>

	<li><a href="#" id="lien2" class="pouet">lien2</a></li>

	<li id="lispecial" class="prout"><a href="#" id="lien3" class="prout">lien3</a></li>

</ul>



<br>

<a href="#" id="lien4" class="prout">lien 4 en dehors de #menu</a><br>



<input type="button" onclick="Prout('menu')" value="que les prout du menu"><br>

<input type="button" onclick="Prout(document)" value="tous les prouts de la page">

function DynamMenu(IdMenu){

		if(!document.getElementsByTagName) //On teste si on a le droit de faire mumuse avec le DOM sur les TAGNAME

			return; 

		var Menu = document.getElementById(IdMenu); //On récupère le menu

		var li = Menu.getElementsByTagName('LI'); //On récupère tous les LI du menu

   	  for(var ii=0; ii<li.length-1; ++ii) { //On scanne tous les LI

				var sousUL = li  .getElementsByTagName('UL'); //Pour chaque LI on recupère le UL dessous

				if (sousUL[0]) { //On vérifié qu'il y a un UL dans le LI

					sousUL[0].id = IdMenu + ii; //On met un ID à ce UL

					sousUL[0].style.display = "none";

					li  .getElementsByTagName('A')[0].href= "javascript:ShowHideMenu('" + IdMenu + ii + "')";

				}  

			}

	}

	window.onload = init;

	

	function ShowHideMenu(MenuId){

		var SousMenu = document.getElementById(MenuId);

		if (SousMenu.style.display=='block' || SousMenu.style.display == null) {

			SousMenu.style.display = 'none'; //ON cache le sous menu

		}

		else{ 

			SousMenu.style.display = 'block'; //On affiche le sous menu

		}

	}

	

	function init(){

		DynamMenu("menu");

	}

<ul id="menu">

	<li><a href="#">lien</a></li>

	<li><a href="#">lien</a></li>

	<li><a href="#">lien</a></li>

	<li><a href="#">Truc a cliquer pour etendre</a>

		<ul id="test">

			<li><a href="#">lien</a></li>

			<li><a href="#">infos 12</a>

				<ul>

					<li><a href="#">lien</a></li>

					<li><a href="#">encore un sous menu</a>

						<ul>

							<li><a href="#">lien</a></li>

							<li><a href="#">lien</a></li>

							<li><a href="#">encore un sous menu</a>

								<ul>

									<li><a href="#">lien</a></li>

									<li><a href="#">lien</a></li>

									<li><a href="#">encore un sous menu</a>

										<ul>

											<li><a href="#">lien</a></li>

											<li><a href="#">lien</a></li>

											<li><a href="#">lien</a></li>

										</ul>

									</li>

								</ul>

							</li>

						</ul>

					</li>

					<li><a href="#">lien</a></li>

				</ul>

			</li>

			<li><a href="#">lien</a></li>

		</ul>



	</li>

	<li><a href="#">lien</a></li>

	<li><a href="#">clic là aussi</a>

		<ul>

			<li><a href="#">lien</a></li>

			<li><a href="#">lien</a></li>

			<li><a href="#">lien</a></li>

		</ul>

	</li>

</ul>

<!--

window.onload=function(){dynMenu("menu",1000)} // temporisé 1 seconde



dynMenu = function(idMenu,delai) {planq=0;

Menu=document.getElementById(idMenu);

dls = Menu.getElementsByTagName("dl");

dds = Menu.getElementsByTagName("dd");



if(dds){

  for(var i=0;i<dls.length;i++) {

    dls[i ].onmouseover=function(){

			clearTimeout(planq);

      smenu=this.getElementsByTagName("dd")[0]

      if(smenu){cachetout();smenu.style.display="block"}

    	}

   dls[i ].onmouseout=function(){

    if(delai)planq=setTimeout('cachetout()',delai);

  	}

   }

cachetout()

  }

document.onclick=cachetout;

}

function cachetout(){for(var j=0;j<dds.length;j++)dds[j].style.display="none";}

//-->

// Cette fonction insert un éspace tout les 3 chiffre, le soucis?

// => la réutilisation du chiffre en question après le formatage

// a utiliser avec une certaine vigilence et de préférence en dernier

// pour la simple mise en forme

function millier (chaine) {

	var seconde = "";

	var x=0;

	var y=x+3;

	var z=0;



	var modulo = (chaine.length)%3;

	if (modulo>=0){

		seconde = seconde + ((chaine.slice(x,modulo))+" ");

		x=x+modulo;

		y=y+modulo;

	}

	z=(chaine.length-modulo)/3;

	while (z>0){

		seconde =seconde + ((chaine.slice(x,y))+" ");

		x=x+3;

		y=x+3;

		z=z-1;

	}

	

	return seconde;

}

/*

document.getElementsByAttribute permet d'obtenir un tableau d'éléments DHTML, en fonction de leurs attributs.



@param String attribute Nom de l'attribut à rechercher

@param String value Facultatif : Valeur de l'attribut



Si la valeur de l'attribut n'est pas spécifiée, tous les éléments DHTML possédant l'attribut seront retournés.

Si la valeur est spécifiée, tous les éléments DHTML dont l'attribut demandé contient la valeur indiquée seront retournés.



@return ARray Un tableau contenant tous les objets DHTML trouvés est retourné.



@Note

Le navigateur doit supporter la fonction document.getElementsByTagName.



Fonction écrite par QuentinC.

*/

document.getElementsByAttribute = function (attribute, value) {

var objs = new Array();

objs = document.getElementsByTagName("*");

var tab = new Array();



for (var ii in objs) {

if (objs  ) {



if (objs    ) {

if (!value) tab[tab.length] = objs  ;

else if (objs    .toLowerCase() == value.toLowerCase()) tab[tab.length] = objs  ;

}



}

}



return tab;

}

/**

 * Classe de gestion graphique

 * 

 * @author : Marc Plessis

 * @version : 0.1

 * @date : 18/08/2005

 *

 */

function Graph() {

	this.constructor.apply(this,arguments);

}



//============================== Constantes ==================================



//============================== Variables ===================================

var opa=0;										//Pour gérer l'opacité de l'objet

var oOpacite=0;									//Pour avoir l'opacité à atteindre

var oPas=0;										//Pas pour atteindre l'opacité

var oObjet=false;								//Objet à modifier



Graph.prototype._oObj=false;					//Pour gérer l'objet à faire jouer

var tTimer=false;								//Permet de gérer le timer de relance



/**

 * Constructeur de la classe

 */

Graph.prototype.constructor=function(pObj,opacity) {



	//On initialise l'objet à faire jouer en variable

	if(pObj!=undefined) {

	

		this._oObj=document.getElementById(pObj)



		if (navigator.appName.indexOf("Explorer") > -1) {

			

			//Il s'agit de IE

			this._oObj.style.filter="Alpha(opacity="+(opacity*100)+")";

		}else{

			

			//Tentative de modification de la propriété opacity

			this._oObj.style.opacity=parseFloat(opacity);

		}

			

		//On indique le niveau d'opacité

		opa=opacity;

	}	

};



//=================================== Méthodes privées ======================================



//=================================== Méthodes publiques ======================================



/**

 * Méthode permettant de modifier l'opacité

 * @param int Opacity : opacité à atteindre

 * @param int Vitesse : Vitesse pour atteindre cette opacité en millisecondes

 * @param int nPas : Pas de modification de l'opacité

 * @param string oObj : Objet à modifier

 */

Graph.prototype.setOpacity=function(opacity,vitesse,nPas,oObj) {

	

	//On initialise les variables publique pour la fonction privée

	oOpacite=opacity;

	oPas=nPas;

	oObjet=oObj;

	

	//On appel la fonction suivant l'intervalle de temps demandée

	tTimer=setInterval(this._modOpacity,vitesse);

};



/**

 * Méthode permettant de modifier l'opacité (appel depuis la méthode publique)

 */

Graph.prototype._modOpacity=function() {

		

	//On met le pas d'avance à zéro

	var nPas_mod=0;

	

	//On va modifier l'opacité de l'objet

	if (opa>oOpacite) {

		nPas_mod = parseFloat(oPas) * -1;

	}else {

		nPas_mod=parseFloat(oPas);

	}



	if (navigator.appName.indexOf("Explorer") > -1) {

		

		//Il s'agit d'IE

		document.getElementById(oObjet).style.filter="Alpha(opacity="+((parseFloat(opa) + nPas_mod)*100)+")";

	}else{

		

		//Tentative de modification du niveau d'opacité

		document.getElementById(oObjet).style.opacity=parseFloat(opa) + nPas_mod;

	}

			

	//On indique l'opacité en cours

	opa=parseFloat(opa) + nPas_mod;

	

	if (nPas_mod<0) {

		if (opa<=oOpacite) {

		

			//On détruit l'objet car c'est la fin de la fonction

			clearInterval(tTimer);

		}

	}else {

		if (opa>=oOpacite) {

		

			//On détruit l'objet car c'est la fin de la fonction

			clearInterval(tTimer);

		}

	}

};

/**

 * Module permettant de gérer les événements sur les pages HTML

 * 

 * @author : Marc Plessis

 * @version : 0.1

 * @date : 10/08/2005

 *

 */



//============================== Constantes ===============================

GRAPH_PASOPACITY=0.05;				//Pas d'ouverture de l'accueil

GRAPH_VITOPACITY=75;				//Vitesse d'ouverture de l'accueil

OBJ_ACCUEIL="c_centre_ind"			//Objet à ouvrir



//============================== Variables ===================================



/**

 * Méthode lancée au chargement de la page

 */

onLoad = function()

{

	

	//On initialise la classe d'opacite

	var oObjOpa = new Graph(OBJ_ACCUEIL,0);

	

    //On demande une opacite plus élevée

 oObjOpa.setOpacity(0.95,GRAPH_VITOPACITY,GRAPH_PASOPACITY,OBJ_ACCUEIL);

}

 

//On éxecute la fonction onLoad au lancement de la page

window.onload = onLoad;

String.prototype.trim = function() {

	var reg = new RegExp("^\\s*");

	var reg2 = new RegExp("\\s*$");

	return this.replace(reg, "").replace(reg2, "");

};

function getDOMName(DOMObject) //DOMObject(type : objet DOM)

{

   var tmp = new String();

   for (var i in DOMObject.parentNode.childNodes)

   {

     if(DOMObject.parentNode.childNodes[ i ] == DOMObject)

       tmp = i;

   }

   return tmp

}

function getDOMPath(DOMObject) //DOMObject(type : objet DOM)

{

  var tmp = new String();

  var tmpObj = DOMObject;

  while(tmpObj.parentNode != null)

  {

    tmp = '.childNodes[' + getDOMName(tmpObj) + ']' + tmp;

    tmpObj = tmpObj.parentNode;

  }

  return 'document' + tmp

}

function transform(xml, xsl, id)

{

  try {

    // navigateur basé sur Gecko

    if (window.XSLTProcessor)

    {

      var fragment;

      var xsltProcessor = new XSLTProcessor();

    	

      xsltProcessor.importStylesheet(xsl);

      fragment = xsltProcessor.transformToFragment(xml, document);

      var target = document.getElementById(id);

      target.appendChild(fragment);

      document.appendChild(target);

      // ActiveX pour Internet Explorer

    } else if (window.ActiveXObject) {

      var target = document.getElementById(id);

      target.innerHTML = xml.transformNode(xsl);

    }

  } catch (e) {

    return e;

  }

}

function loadXML(url)

{

  var xmlDoc;



  /* chargement du fichier XML */

  try {

    // navigateur basé sur Gecko

    if (document.implementation && document.implementation.createDocument)

    {

      xmlDoc = document.implementation.createDocument('', '', null);

      xmlDoc.load(url);

    // ActiveX pour Internet Explorer

    } else if (window.ActiveXObject) {

      try {

        xmlDoc = new ActiveXObject('Msxml2.XMLDOM');

      } catch (e) {

        xmlDoc = new ActiveXObject('Microsoft.XMLDOM');

      }

      xmlDoc.async = false;

      xmlDoc.load(url);

    // à l'aide de lobjet XMLHTTPRequest

    } else if (window.XMLHttpRequest) {

      xmlDoc = new XMLHttpRequest();

      xmlDoc.overrideMimeType('text/xml'); 

      xmlDoc.open('GET', url, false);

      xmlDoc.send(null);

      if (this.xmlDoc.readyState == 4) xmlDoc = xmlDoc.responseXML;

    }

  } catch (e) {

    return e;

  }

  return xmlDoc;

}

<body>



<p>

<a href="?yes">Je veux activer javascript.</a>

</p>



<script type="text/javascript"> 



if(location.search){

	var censure=document.createElement("script");

	censure.setAttribute("src","fonctions.js");// contient les instructions javascript;

	document.links[0].search="";

	document.links[0].firstChild.replaceData(3,12,"conchie");

	document.getElementsByTagName("body")[0].appendChild(censure);

}



</script>

<PUBLIC:COMPONENT>  

  <script type="text/javascript">

    /*

    HTMLElements Prototyping

    Thank to Jason Davis,  http://www.browserland.org/scripts/htmlelement/

    and  http://www.webmasterworld.com/forum91/4886.htm

    

    Here copying all methods & fields prototyped by script

    */

    

    // inherite all methods & fields of HTMLElement

    for(var j in HTMLElement.prototype)

      element[j] = HTMLElement.prototype[j];

    

    //if nodeName field exist & if is not document (HTMLElement methods & fields inherited)

    if(typeof element.nodeName != 'undefined' && element.nodeName != '#document')

    {

      var constructorName = 'HTML'+ constructors[element.nodeName] +'Element';

      // inherite all methods & fields of self HTMLElement constructor

      for(var j in eval(constructorName).prototype)

        element[j]= eval(constructorName).prototype[j];

    }

  </script>

</PUBLIC:COMPONENT>

var constructors = {

	HTML: 'Html', HEAD: 'Head', LINK: 'Link', TITLE: 'Title', META: 'Meta',

	BASE: 'Base', ISINDEX: 'IsIndex', STYLE: 'Style', BODY: 'Body',

	FORM: 'Form', SELECT: 'Select', OPTGROUP: 'OptGroup', OPTION: 'Option',

	INPUT: 'Input', TEXTAREA: 'TextArea', BUTTON: 'Button', LABEL: 'Label',

	FIELDSET: 'FieldSet', LEGEND: 'Legend', UL: 'UList', OL: 'OList',

	DL: 'DList', DT: 'Span', DD: 'Span', DIR: 'Directory', MENU: 'Menu', LI: 'LI', DIV: 'Div',

	P: 'Paragraph', H1: 'Heading', H2: 'Heading', H3: 'Heading', H4: 'Heading',

	H5: 'Heading', H6: 'Heading', Q: 'Quote', PRE: 'Pre', BR: 'BR',

	BASEFONT: 'BaseFont', FONT: 'Font', HR: 'HR', INS: 'Mod', A: 'Anchor',

	IMG: 'Image', OBJECT: 'Object', PARAM: 'Param', APPLET: 'Applet',

	MAP: 'Map', AREA: 'Area', SCRIPT: 'Script', TABLE: 'Table',

	CAPTION: 'TableCaption', COL: 'TableCol', TBODY: 'TableSection',

	THEAD: 'TableSection', TFOOT: 'TableSection', TR: 'TableRow',

	TD: 'TableCell', TH: 'TableCell', FRAMESET: 'FrameSet', FRAME: 'Frame', IFRAME: 'IFrame',

	SPAN: 'Span', FIELDSET : 'FieldSet'

};

//pour la Classe HTMLElement

if(typeof HTMLElement == 'undefined') var HTMLElement = function(){};

//Pour les sousClasses HTMLXxxElement ou Xxx est contenu dans le tableau constructor

for(var j in constructors)

{

  var constructorName = 'HTML'+ constructors[j] +'Element';

  if(eval('typeof ' + constructorName +' == \'undefined\''))

    eval('var ' + constructorName + ' = function(){}');

}

//Et la partie la plus interéssante du script celle pour laquel tout ce script est fait : l'implémentation de méthode au classes HTMLElement s

Ici c'est l'implémentation de la méthode foo() sur tous les éléments Inputs

HTMLInputElement.prototype.foo = function()

{

  alert(this.value)

};

<html>

  <head>

    <title>HTMLElement.prototype</title>

    <script type="text/javascript" src="script.js"></script>

    <!--[if ie]>

      <style type="text/css">

        *{behavior:url(behavior.htc)}

      </style>

    <!  -->

   </head>

   <body>

     <input type="button" onclick="this.foo()" value="click">

   </body>

</html>

<dl class="menu">

  <dt>Rubrique</dt>

    <dd>

      <ul>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	</ul>

  </dd>

</dl>

<dl class="menu">

  <dt>Rubrique</dt>

  <dd>

    <ul>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	  <li><a href="#">Sous-rubrique</a></li>

	</ul>

  </dd>

</dl>

body

{

	font-family: Arial, Helvetica, sans-serif;

	background: #EEE;

}

dl.menu, dl.menu dt, dl.menu dd, dl.menu dd ul, dl.menu dd ul li

{

	margin: 0px;

	padding: 0px;

}

dl.menu

{

	float: left;

	width: 150px;

	cursor: pointer;

}

dl.menu dt

{

	background: #FFF;

	font-size: 12px;

	font-weight: bold;

	color: #666;

}

dl.menu dd ul

{

	border-right: 1px solid #CCC;

	border-bottom: 1px solid #CCC;

	border-left: 1px solid #CCC;

	width: 140px;

	margin: 0px auto;

	list-style-type: none;

	background: #EEE;

	font-size: 11px;

}

dl.menu dd ul li:hover

{

	background: #CCC;

}

dl.menu dd ul li a

{

	text-decoration: none;

	color: #666;

	padding-left: 5px;

}

dl.menu dd ul li a:hover

{

	color: #FFF;

	padding-left: 10px;

}

var drawerMenu = {

	inc : 5,

	elements : new Array,

	timers : new Array,

	construct : function()

	{

		var dls = document.getElementsByTagName('dl');

		var n = 0;

		for(var i = 0; i < dls.length; i++)

		{

			if(dls[ i].className == 'menu')

			{

				n++;

				drawerMenu.timers[n] = 0;

				dls[ i].onmouseover = drawerMenu.triggerShow;

				dls[ i].onmouseout = drawerMenu.triggerHide;

				dls[ i].targetElement = n;

				for(var j = 0; j < dls[ i].childNodes.length; j++)

				{

					if(dls[ i].childNodes[j].nodeType == 1)

					{

						if(dls[ i].childNodes[j].tagName == 'DD')

						{

							dls[ i].childNodes[j].style.position = 'relative';

							dls[ i].childNodes[j].style.overflow = 'hidden';

							dls[ i].childNodes[j].style.height = '0px';

							for(var k = 0; k < dls[ i].childNodes[j].childNodes.length; k++)

							{

								if(dls[ i].childNodes[j].childNodes[k].nodeType == 1)

								{

									if(dls[ i].childNodes[j].childNodes[k].tagName == 'UL')

									{

										drawerMenu.elements[n] = dls[ i].childNodes[j].childNodes[k];					

										dls[ i].childNodes[j].childNodes[k].style.position = 'absolute';

										dls[ i].childNodes[j].childNodes[k].style.top = '-'+dls[ i].childNodes[j].childNodes[k].offsetHeight+'px';

									}

								}

							}

						}

					}

				}

			}

		}

	},

	triggerShow : function()

	{

		if(drawerMenu.timers[this.targetElement]) clearInterval(drawerMenu.timers[this.targetElement]);

		drawerMenu.timers[this.targetElement] = setInterval('drawerMenu.show('+this.targetElement+')', 20);

	},

	triggerHide : function()

	{

		if(drawerMenu.timers[this.targetElement]) clearInterval(drawerMenu.timers[this.targetElement]);

		drawerMenu.timers[this.targetElement] = setInterval('drawerMenu.hide('+this.targetElement+')', 20);

	},

	show : function(i)

	{

		var ul = drawerMenu.elements[ i];

		var t = parseInt(ul.style.top);

		var inx = Math.ceil(-t/drawerMenu.inc);

		if(t+inx < 0)

		{

			ul.style.top = (t+inx) +'px';

			ul.parentNode.style.height = (ul.offsetHeight+t+inx) + 'px';

		}

		else if(t < 0)

		{

			ul.style.top = '0px';

			ul.parentNode.style.height = ul.offsetHeight + 'px';

		}

		else

		{

			clearInterval(drawerMenu.timers[ i]);

			drawerMenu.timers[ i] = 0;

		}

	},

	hide : function(i)

	{

		var ul = drawerMenu.elements[ i];

		var t = parseInt(ul.style.top);

		var inx = Math.ceil(t/drawerMenu.inc);

		if(inx == 0) inx = -1;

		if(t+inx > -ul.offsetHeight)

		{

			ul.style.top = (t+inx) +'px';

			ul.parentNode.style.height = (ul.offsetHeight+t+inx) + 'px';

		}

		else if(t > -ul.offsetHeight)

		{

			ul.style.top = -ul.offsetHeight + 'px';

			ul.parentNode.style.height = '0px';

		}

		else

		{

			clearInterval(drawerMenu.timers[ i]);

			drawerMenu.timers[ i] = 0;

		}

	}

}



window.onload = drawerMenu.construct;