Bonjour,

J'ai suivi le tutoriel "Menu vertical Alsacréations (version 2 - Romain Berton)" pour intégrer un menu vertical déroulant (qui puisse s'ouvrir et se refermer) à mon site. J'en suis vraiment satisfait, tout est OK (configuration, ajustements...) mais j'ai un réel souci de compatibilité avec Safari. En effet, lorsque j'arrive sur mon site (avec Safari), le menu est déjà ouvert et la possibilité d'ouverture et de fermeture des rubriques n'existe pas.

Voici l'url :
http://s207754854.onlinehome.fr/clem/guillaume_delvigne/
Style CSS : http://s207754854.onlinehome.fr/clem/guillaume_delvigne/inc/stylemenu.css
Menu JS : http://s207754854.onlinehome.fr/clem/guillaume_delvigne/inc/menu.js

Merci d'avance.
Clément
Modifié par cLm (17 Jan 2008 - 14:40)
Modérateur
Salut,

Il se pourrait que ça vienne de la méthode de chargement que j'avais trifouillé dans tous les sens... Smiley langue

Essaie ce code pour voir :
/**
*	Menu vertical Alsacréations (version 2 - Romain Berton)
*/

( function() {

	// Test de passage d'un argument
	var fnTest = function()
	{
		var iI = arguments.length - 1;
		for(iI; iI >= 0; iI--) if(!arguments[iI]) return false;
		return true;
	};

	// Ajout d'une action sur un événement
	var fnConnect = function(oElem, sEvType, fn, bCapture)
	{
		return oElem.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				oElem['on' + sEvType] = fn;
	};

	// Retrait d'une action sur un événement
	var fnDisconnect = function (oElem, sEvType, fn, bCapture)
	{
		return oElem.removeEventListener?
			oElem.removeEventListener(sEvType, fn, bCapture):
			oElem.detachEvent?
				oElem.detachEvent('on' + sEvType, fn):
				oElem['on' + sEvType] = null;
	};
	
	// Annulation du clic sur un élément
	var fnCancelClick = function(e)
	{
		if(e && e.stopPropagation && e.preventDefault)
		{
			e.stopPropagation();
			e.preventDefault();
			return false; // Pour Safari
		}
		else if(window.event && window.event.cancelBubble && window.event.returnValue)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
			return false;
		}
		else return false;
	};

	// Récupération de la source de l'événement
	var fnGetTarget = function(e)
	{
		var target = window.event ? window.event.srcElement : e ? e.target : this;
		if(!target) return false;
		if(target.nodeName.toLowerCase() != 'a') target = target.parentNode; //Pour Safari
		return target;
	};

	// Affichage des menus
	var fnMontre = function(e)
	{
		var oTarget = fnGetTarget(e);
		var oList = oTarget.parentNode.getElementsByTagName('ul')[0];
		oList.className = 'Montre';
		fnDisconnect(oTarget, 'click', fnMontre, false);
		fnConnect(oTarget, 'click', fnCache, false);
		return fnCancelClick(e);
	};
	
	// Masquage des menus
	var fnCache = function(e)
	{
		var oTarget = fnGetTarget(e);
		oTarget.nextSibling.className = 'Cache';
		fnDisconnect(oTarget, 'click', fnCache, false);
		fnConnect(oTarget, 'click', fnMontre, false);
		return fnCancelClick(e);
	};
	
	// Initialisation du menu
	var fnMenu = function()
	{
		var oMenus = document.getElementById('menus'),
			oItem = oMenus.getElementsByTagName('li'),
			iI = oItem.length - 1,
			oUl = oMenus.getElementsByTagName('ul'),
			iJ = oUl.length - 1;
		for(iJ; iJ >= 0; iJ--) if(oUl[iJ].className != 'Montre') oUl[iJ].className = 'Cache';
		for(iI; iI >= 0; iI--)
		{
			if(oItem[iI].parentNode.getAttribute('id') == 'menus')
			{
				var oA = document.createElement('a'),
					sTxtLi = oItem[iI].firstChild.nodeValue,
					oTxtA = document.createTextNode(sTxtLi);
				oA.setAttribute('href', '#ouverture-fermeture-Menu');
				oA.appendChild(oTxtA);
				oItem[iI].replaceChild(oA, oItem[iI].firstChild);
				oA.nextSibling.className != 'Montre' ?
					fnConnect(oA, 'click', fnMontre, false):
					fnConnect(oA, 'click', fnCache, false);
			}
		}
	};

	// Dean Edwards/Matthias Miller/John Resig

	function init() {
		// quit if this function has already been called
		if (arguments.callee.done) return;
 		// flag this function so we don't do the same thing twice
    		arguments.callee.done = true;
		// kill the timer
		if (_timer) clearInterval(_timer);
		return fnTest(document.getElementById, document.getElementsByTagName, document.createElement, document.createTextNode) ?
				fnMenu() :
				false;
	};

	/* for Mozilla/Opera9 */
	if (document.addEventListener) {
		document.addEventListener("DOMContentLoaded", init, false);
	}
	/* for Internet Explorer */
	/*@cc_on @*/
	/*@if (@_win32)
	document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
	var script = document.getElementById("__ie_onload");
	script.onreadystatechange = function() {
		if (this.readyState == "complete") {
			init(); // call the onload handler
        	}
    	};
	/*@end @*/
	/* for Safari */
	if (/WebKit/i.test(navigator.userAgent)) { // sniff
		var _timer = setInterval(function() {
        		if (/loaded|complete/.test(document.readyState)) {
				init(); // call the onload handler
        		}
    		}, 10);
	}
} ) ();
Merci pour ta réponse. Avec ton code, l'ouverture et la fermeture du menu fonctionnent. Par contre, l'espace entre chaque rubrique est énorme et ca vient peut-être du css. Voici 2 screenshots pour mieux visualiser :

Firefox : upload/14613-Image2.png
Safari : upload/14613-Image1.png

Qu'est-ce que je pourrai bidouiller pour ne plus avoir ces grands espaces ?

Merci d'avance et merci encore pour ta réponse.

Clément