Menu

Problème avec menu css [Fermé]

- - Dernière réponse :  Sabrina - 6 juin 2009 à 01:24
Bonjour,

Je viens de terminer un site web mais un problème apparait avec le menu horizontal. http://www.ebev.ca J'ai 5 item dans mon menu et quand on passe avec la souris devant les trois premiers items, un petit menu déroule en dessous.

Sous Internet Explorer 7 (ce que presque tous mes visiteurs utilisent), le menu déroule toujours sous le premier item. Par exemple, si on passe la souris par-dessus le troisième item, le menu devrait dérouler sous le troisième item mais non, il apparait sous le premier.

En fouillant un peu sur internet, j'ai appris que la propriété "position" du css n'était pas bien prise en charge par tous les navigateurs. Est-ce qu'il y a quelques chose que je peux faire ??

Merci
Afficher la suite 

15 réponses

Messages postés
87
Date d'inscription
dimanche 10 mai 2009
Dernière intervention
16 septembre 2009
100
0
Merci
nous poster ton code dans un premier temps histoire qu'on puisse voir un peu ce que tu as fait

sinon ca risque d'etre dure de te repondre
0
Merci
Voici mon code CSS (fait avec dreamweaver) :

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
font-size: 11px;
cursor: default;
width: 67%;
position: relative;
left: 160px;
top: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
position: relative;
text-align: left;
cursor: pointer;
width: 125px;
float: left;
visibility: visible;
font-family: Verdana, Arial, Helvetica, sans-serif;
left: 0px;
vertical-align: middle;
}




/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
cursor: default;
width: 100%;
position: absolute;
left: -1000em;
z-index: 1020;
border: 1px solid #000;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: -12px;
width: 150px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 150px;
background-image: url(../../images/degrade_bleu_3.jpg);
vertical-align: middle;
text-align: left;
margin: 0;
border: 1px solid #ffffff;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: 0 0 0 105%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0px;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 0px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 0px solid #fff;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
color: #000000;
background-color: #0033cc;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #FFFFFF;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
height: 20px;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
}
}
ul.MenuBarHorizontal ul li ul li {
width: 200px;
border: 1px solid #fff;
background-image: url(../../images/degrade_bleu_3.jpg);
vertical-align: middle;
left: -10px;
}
0
Merci
Et le code HTML si vous en avez besoin: (j'ai mis en gras la section où se trouve le menu)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->

<head>

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

<script type="text/javascript">
function setHeight(){ var hauteur; var monFrm = document.getElementById('monIframe'); if(document.all){ hauteur = monFrm.contentWindow.document.body.scrollHeight; }else{ hauteur = monFrm.contentWindow.document.body.offsetHeight; } monFrm.setAttribute("height", hauteur); }
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
</script>

<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>EBEV.CA</title>
<meta http-equiv="église baptiste evangélique de victoriaville benoit rancourt" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="site/mm_lodging1.css" type="text/css" />

<style type="text/css">
<!--
body {
background-color: #0066FF;
border-top-color: #005EBB;
background-image: url(images/bg_1.gif);
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: underline;
}
-->
</style>

<link href="site/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>





<body onload="autofitIframe(’contentFRM’)">
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr bgcolor="#005ebb">
<!--1.1-->
<td height="35" colspan="5" nowrap="nowrap" background="images/bg_1.gif" bgcolor="#0066FF" class="header" id="header"><a href="section_membres/index_sm.html" target="_blank">Section membres</a><a href="site/index.html" target="monIframe"></a> | <a href="site/contact.html" target="monIframe">Contact</a><br /></td>
</tr>
<tr>
<!--2.1--><td width="1" nowrap="nowrap" bgcolor="#005ebb"> </td>
<!--2.2--><td height="123" nowrap="nowrap" background="images/head_v4.gif"><div align="center">
<table width="960" height="123" border="0" cellpadding="0" background="site/images/head_v4.gif">
<tr>
<td width="130"><a href="index.html" target="_parent"><img src="images/logo_header.jpg" width="84" height="115"/></a></td>
<td width="904">  </td>
</tr>
</table>
</div></td>
<!--2.3--><td width="1" bgcolor="#005EBB"> </td>
</tr>
<tr bgcolor="#005ebb">
<!--3.1--><td colspan="3"></td>
</tr>
<tr>
<!--4.1--><td width="1" nowrap="nowrap" bgcolor="#005ebb"></td>
<!--4.2--><td height="20" background="images/degrade_bleu.jpg" id="navigation">

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu MenuBarItemSubmenu" href="index.html" target="_parent">Accueil</a>
<ul>
<li><a href="site/qui_sommes_nous.html" target="monIframe">Qui sommes-nous ?</a></li>
<li><a href="site/notre_mission.html" target="monIframe">Notre mission</a></li>
<li><a href="site/notre_credo.html" target="monIframe">Notre crédo</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarHorizontal">Ressources</a>
<ul>
<li><a href="site/enseignements.html" target="monIframe">Enseignements</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Conférences</a>
<ul>
<li><a href="site/conference_02.html" target="monIframe">Pourquoi Dieu permet-il la souffrance?</a></li>
<li><a href="site/conference_01.html" target="monIframe">La résurrection de Jésus-Christ: Mythe ou réalité?</a></li>
</ul>
</li>
<li><a href="site/videos.html" target="monIframe">Vidéo</a></li>
<li><a href="http://salondesjeunesvicto.skyrock.com/" target="_blank">Blog</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Photos</a>
<ul>
<li><a href="site/photos_rassemblement.html" target="monIframe">Rassemblement</a></li>
<li><a href="site/photos_epluchette.html" target="monIframe">Épluchette</a> </li>
<li><a href="site/photos_mariage.html" target="monIframe">Mariage</a></li>
<li><a href="site/photos_eglise.html" target="monIframe">Bâtiment</a></li>
</ul>
</li>
<li><a href="site/liens.html" target="monIframe">Liens</a></li>
<li><a href="site/contact.html" target="monIframe">Contact</a></li>
</ul>
</td>
<!--4.3--><td width="1" bgcolor="#005EBB"> </td>
</tr>
<tr bgcolor="#005ebb">
<!--5.1--><td colspan="3"></td>
</tr>
<tr bgcolor="#ffffff">
<!--6.1--><td width="1" valign="top" bgcolor="#005ebb"></td>
<!--6.2--><td valign="top" bgcolor="#ffffff"id="menu_membre">
<iframe id="monIframe" name="monIframe" onload="setHeight()" src="site/accueil.html" width="100%" scrolling="no" frameborder="0"><span class="style2"></span> </iframe></td>
<!--6.3--><!--6.4--><td width="4" bgcolor="#005EBB"> </td>
</tr>
<tr>
<!--7.1--><td width="1" bgcolor="#005EBB"> </td>
<!--7.2-->
<td height="115" background="images/footer_v2.gif" bgcolor="#E3E3E3" class="foot"><table align="center" width="100%" height="115">
<tr><td width="125"> </td>
<td width="83%" ><div class="foot_titre">Église baptiste Évangélique de Victoriaville</div>
<div class="foot_adresse">101 Saint-Paul Victoriaville, Qc G6P 8G9  Tel: 819.752.4455</div>
<div class="foot_signature"><a href="mailto:sabrina_foisy@hotmail.com">sabrina_foisy@hotmail.com</a></div> </td>
</tr></table></td>
<!--7.3-->
<!--7.4--><td width="1" bgcolor="#005EBB"> </td>
</tr>
<tr bgcolor="#005ebb">
<!--1.1-->
<td height="35" colspan="3" nowrap="nowrap" background="images/bg_1.gif" bgcolor="#000000" class="footer"><br /></td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
//-->
</script>
</body>
</html>


Merci beaucoup d'avance !
Messages postés
614
Date d'inscription
dimanche 21 octobre 2007
Dernière intervention
22 juin 2009
62
0
Merci
Waou Oo
j'vais pas lire si ça te dérange pas ^^

Juste pour dire que les compatibilités entre navigateurs sont vraiment nulles ...
t'arrivera jamais ( ou très difficilement ^^ ) a faire une css valide sur tous les navigateurs

(car je rappelle qu'il y a FireFox / Opera / Chrome / Safari / IE <= 6 / IE 7 / IE 8
pour ne citer que les principaux ... et tous interprète a leur façon la css ... )

moi pour arreter de m'enerver avec ca, j'ai fait une petite fonction js
qui trouve le navigateur et change la css en fonction
( j'utilise une partie d'une librairie js trouvée sur un site de la MIT ^^ )

bon certes j'ai 7 css dans mon dossier ... mais ça m'évite pas mal de prise de tête ^^
0
Merci
Ok. Est-ce que cette petite fonction js que tu as crées pourrait s'employer sur mon site ?

Je m'essayes ;)
Messages postés
614
Date d'inscription
dimanche 21 octobre 2007
Dernière intervention
22 juin 2009
62
0
Merci
bien sur ^^ il te suffira de faire une css pour IE et une pour FireFox ...
ma fonction n'est pas compliquée ^^
en fait je recupere l'user agent ( navigator.userAgent )
qui me donne une chaine du type :
Mozilla/5.0 (Windows; U; Windows NT 6.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10 (.NET CLR 3.5.30729)
sous Firefox
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Creative AutoUpdate v1.10.10)
sous IE
comme tu peux le voir, on retrouve "Firefox" et "MSIE" (pour MicroSoft Internet Explorer)
donc je recherche ces mot pour definir sur quel navigateur je suis

ensuite je modifie le chemin de ma css en fonction de ca :
$A($$('link[rel=stylesheet]')).first().setAttribute('href','CSSie.css');}

first() etant un prototype pris sur la lib du MIT ^^
0
Merci
Je comprend quand tu me parles du user agent, mais tu me perds un peu plus loin... Qu'est-ce que tu veux dire par :
"je modifie le chemin de ma css en fonction de ca:
$A($$('link[rel=stylesheet]')).first().setAttribute('href','CSSie.css');} "

Je ne connais pas le js. Je connais seulement le css et le html. Quand j'ai créé le css pour mon menu avec Dreamweaver, il m'a automatiquement créé un js pour ce menu. Je te le copie ci-bas. Dois-je coller la fonction que tu m'as donnée dans ce js?



/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */

var Spry;
if(!Spry)
{
Spry = {};
}
if(!Spry.Widget)
{
Spry.Widget = {};
}

// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
{
this.init(element, opts);
};

Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
this.element = this.getElement(element);

// represents the current (sub)menu we are operating on
this.currMenu = null;

var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
{
// bail on older unsupported browsers
return;
}

// load hover images now
if(opts)
{
for(var k in opts)
{
var rollover = new Image;
rollover.src = opts[k];
}
}

if(this.element)
{
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
{
this.initialize(items[i], element, isie);
if(isie)
{
this.addClassName(items[i], "MenuBarItemIE");
items[i].style.position = "static";
}
}
if(isie)
{
if(this.hasClassName(this.element, "MenuBarVertical"))
{
this.element.style.position = "relative";
}
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
{
linkitems[i].style.position = "relative";
}
}
}
};

Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};

Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
{
return false;
}
return true;
};

Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
{
element.addEventListener(eventType, handler, capture);
}
else if (element.attachEvent)
{
element.attachEvent('on' + eventType, handler);
}
}
catch (e) {}
};

// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:false;';
menu.parentNode.appendChild(layer);

layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
};

// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
{
var layers = menu.parentNode.getElementsByTagName('iframe');
while(layers.length > 0)
{
layers[0].parentNode.removeChild(layers[0]);
}
};

// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
{
this.hideSubmenu(menus[i]);
}
this.removeClassName(this.element, "MenuBarActive");
};

// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
};

// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
if(this.currMenu)
{
this.clearMenus(this.currMenu);
this.currMenu = null;
}

if(menu)
{
this.addClassName(menu, "MenuBarSubmenuVisible");
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
{
if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
{
menu.style.top = menu.parentNode.offsetTop + 'px';
}
}
if(typeof document.uniqueID != "undefined")
{
this.createIframeLayer(menu);
}
}
this.addClassName(this.element, "MenuBarActive");
};

// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
if(menu)
{
this.removeClassName(menu, "MenuBarSubmenuVisible");
if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
{
menu.style.top = '';
menu.style.left = '';
}
this.removeIframeLayer(menu);
}
};

// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
{
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);

var hasSubMenu = false;
if(menu)
{
this.addClassName(link, "MenuBarItemSubmenu");
hasSubMenu = true;
}

if(!isie)
{
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
{
// this refers to the list item
if(testNode == null)
{
return false;
}
if(testNode == this)
{
return true;
}
else
{
return this.contains(testNode.parentNode);
}
};
}

// need to save this for scope further down
var self = this;

this.addEventListener(listitem, 'mouseover', function(e)
{
if(self.bubbledTextEvent())
{
// ignore bubbled text events
return;
}
clearTimeout(closetime);
if(self.currMenu == listitem)
{
self.currMenu = null;
}
// show menu highlighting
self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
{
opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
}
}, false);

this.addEventListener(listitem, 'mouseout', function(e)
{
if(self.bubbledTextEvent())
{
// ignore bubbled text events
return;
}

var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
{
clearTimeout(opentime);
self.currMenu = listitem;

// remove menu highlighting
self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
if(menu)
{
closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
}
}
}, false);
};
Messages postés
614
Date d'inscription
dimanche 21 octobre 2007
Dernière intervention
22 juin 2009
62
0
Merci
bouarf Oo
tout ca pour un simple menu Oo

une manipulation de css aurait simplifier l'histoire Oo

il existe des attributs en css tres utilie
par exemple 'hover' quoi dit "quand la souris est sur"
donc par exemple
#plop .hover // quand la souris passe sur le div 'plop'
de la tu peux changer la couleur ou l'image de fond
ca evite de demander ca a js Oo

apres une simple petite fonction js d'affichage/masquage de div suffit a faire le reste
( manipulation de css )
tu fais une fonction style :
function show_hide(id){
  for(i=0;i<nb_de_menu;i++)
    { getElementById('menu'+i).style.display='none'; } // cache tous les menus
  if(id)
    { getElementById(id).style.display='block'; } // fais apparaitre le menu 'id'
}


et dans ton html tu as :
<dt id='Le_menu' onmouseover=\"javascript:show_hide('menu1');\" onmouseout=\"javascript:show_hide();\"></dt>\n";
<dd id='menu1' onmouseover=\"javascript:show_hide('menu1');\" onmouseout=\"javascript:show_hide();\">\n";
  <a href='lien1'>plip</a><br />";
  <a href='lien2'>plap</a><br />";
  <a href='lien3'>plop</a>";
</dd>\n";

( la syntaxe dt / dd est un exemple ^^ tu peux le faire avec tout et n'importe quoi ^^
dans ton css les menu1 ... etc ... seront en display='none' pour etre caché au debut
le seul truc obligatoire c'est de nommer tous tes menu en nom+val (menu1 menu2 menu3 ... ) )
Messages postés
614
Date d'inscription
dimanche 21 octobre 2007
Dernière intervention
22 juin 2009
62
0
Merci
désolé de te sortir ça comme ça ...
mais les logiciels 'clickodrome' style DreamWeaver j'evite de m'en servir
car on peut pas facilement modifier à sa guise le code =/

je travaille en dur avec notepad++ ou geany ^^
0
Merci
Lol, non ça va. En faite, je suis entrain d'apprendre la programmation. Je commence alors Dreamweaver m'est bien utile, mais je sais que ce n'est pas l'idéal pour ceux qui s'y connaisse vraiment.

J'essai ce que tu viens de m'écrire et je te donne des nouvelles ;)

Merci !
0
Merci
Bon ok, je fais de mon mieux mais j'y arrive pas. Qu'est-ce qui marche pas avec mon html de mon menu:

<ul id="MenuBar1" onmouseover=\"javascript:show_hide('MenuBarItemSubmenu');\" onmouseout=\"javascript:show_hide();\" class="MenuBarHorizontal">
<li id="MenuBarItemSubmenu"><a class="MenuBarItemSubmenu MenuBarItemSubmenu" href="index.html" target="_parent">Accueil</a>
<ul>
<li><a href="site/qui_sommes_nous.html" target="monIframe">Qui sommes-nous ?</a></li>
<li><a href="site/notre_mission.html" target="monIframe">Notre mission</a></li>
<li><a href="site/notre_credo.html" target="monIframe">Notre crédo</a></li>
</ul>
</li>
etc..
Messages postés
614
Date d'inscription
dimanche 21 octobre 2007
Dernière intervention
22 juin 2009
62
0
Merci
arf ^^ c'est l'inverse :)
c'est ton "MenuBarItemSubmenu" qui doit comporter un numero ^^
bon il etait tard hier ^^ j'vais t'expliquer en detail ce que ca fait ^^
function show_hide(id){
  for(i=0;i<nb_de_sousmenu;i++) // parcours tous les sousmenu
    { getElementById('sousmenu'+i).style.display='none'; } // cache tous les sousmenu
  if(id)
    { getElementById(id).style.display='block'; } // fais apparaitre le sousmenu 'id'
}
tu as compris cette fonction ou non ?
car c'est la base de l'animation qu'on veut faire ^^

<dt id="menu1" onmouseover='javascript:show_hide('sousmenu1');'
		onmouseout='javascript:show_hide();'>Menu</dt>
	// t'as un menu deroulant, si tu passes dessus, tu cache tout et tu l'affiche
	<dd id="sousmenu1" onmouseover='javascript:show_hide('sousmenu1');'
			onmouseout='javascript:show_hide();'>
	// idem si tu passes sur les element du menu deroulant
		<a href="lien1.1">lien1.1</a>
		<a href="lien1.2">lien1.2</a>
		<a href="lien1.3">lien1.3</a>
		<a href="lien1.4">lien1.4</a>
	</dd>
<dt id="menu2" onmouseover='javascript:show_hide('sousmenu2');'
		onmouseout='javascript:show_hide();'>Menu</dt>
	<dd id="sousmenu2" onmouseover='javascript:show_hide('sousmenu2');'
			onmouseout='javascript:show_hide();'>
		<a href="lien2.1">lien2.1</a>
		<a href="lien2.2">lien2.2</a>
		<a href="lien2.3">lien2.3</a>
		<a href="lien2.4">lien2.4</a>
	</dd>

et ta css doit ressembler a ca :
#sousmenu1,#sousmenu2{
	display : none; // on cache les sousmenu
}

#sousmenu1 a,#sousmenu2 a{ // les lien des sous menu ont une image particuliere
	background-image : url("image.png");
	background-repeat : repeat-x;
}

#sousmenu1 a:hover,#sousmenu2 a:hover{ // cette image change quand on passe dessus
	background-image : url("image_appuyee.png");
	background-repeat : repeat-x;
}
0
Merci
Ok, non, je catch pas le premier script. J'ai fais une page de test juste pour essayer de bien maitriser cette fonction mais sans résultat. Peux-tu me dire qu'est-ce qui ne marche pas dans mon code svp ?
Oublions le css pour l'instant ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<script type="text/javascript">
function show_hide(id){
for(i=0;i<8;i++) // parcours tous les sousmenu
{ getElementById('sousmenu'+i).style.display='none'; } // cache tous les sousmenu
if(id)
{ getElementById(id).style.display='block'; } // fais apparaitre le sousmenu 'id'
}// JavaScript Document
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page de Test</title>
</head>


<body><dt id="menu1" onmouseover='javascript:show_hide('sousmenu1');'
onmouseout='javascript:show_hide();'>Menu1</dt>
// t'as un menu deroulant, si tu passes dessus, tu cache tout et tu l'affiche
<dd id="sousmenu1" onmouseover='javascript:show_hide('sousmenu1');'
onmouseout='javascript:show_hide();'>
// idem si tu passes sur les element du menu deroulant
<a href="lien1.1">lien1.1</a>
<a href="lien1.2">lien1.2</a>
<a href="lien1.3">lien1.3</a>
<a href="lien1.4">lien1.4</a>
</dd>
<dt id="menu2" onmouseover='javascript:show_hide('sousmenu2');'
onmouseout='javascript:show_hide();'>Menu2</dt>
<dd id="sousmenu2" onmouseover='javascript:show_hide('sousmenu2');'
onmouseout='javascript:show_hide();'>
<a href="lien2.1">lien2.1</a>
<a href="lien2.2">lien2.2</a>
<a href="lien2.3">lien2.3</a>
<a href="lien2.4">lien2.4</a>
</dd>
</body>
</html>
Messages postés
614
Date d'inscription
dimanche 21 octobre 2007
Dernière intervention
22 juin 2009
62
0
Merci
Salut ^^ et dsl j'etais au taf ^^
bon la fonction j'l'avais pas testée et j'avais oublié un bout =X
il manquait un test ^^ car sinon js plante et fais pas le reste

il manque la partie css donc je te l'ai integrée au code ;)
voila le code qui marche ( testé ;) )
te reste plus qu'a faire une css .. et la ce sera bcp plus simple pour la compatibilité entre les navigateurs ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<script type="text/javascript">
			function show_hide(id){
				for(i=1;i<8;i++)
					if(document.getElementById('sousmenu'+i))
						{ document.getElementById('sousmenu'+i).style.display='none'; }
				if(id)
					{ document.getElementById(id).style.display='block'; }
			}
		</script>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Page de Test</title>
	</head>

	<body>
		<dt id="menu1" onmouseover="javascript:show_hide('sousmenu1');" onmouseout="javascript:show_hide();">Menu1</dt>
			<dd id="sousmenu1" onmouseover="javascript:show_hide('sousmenu1');" onmouseout="javascript:show_hide();" style="display:none">
				<a href="lien1.1">lien1.1</a>
				<a href="lien1.2">lien1.2</a>
				<a href="lien1.3">lien1.3</a>
				<a href="lien1.4">lien1.4</a>
			</dd>
		<dt id="menu2" onmouseover="javascript:show_hide('sousmenu2');" onmouseout="javascript:show_hide();">Menu2</dt>
			<dd id="sousmenu2" onmouseover="javascript:show_hide('sousmenu2');" onmouseout="javascript:show_hide();" style="display:none">
				<a href="lien2.1">lien2.1</a>
				<a href="lien2.2">lien2.2</a>
				<a href="lien2.3">lien2.3</a>
				<a href="lien2.4">lien2.4</a>
			</dd>
	</body>
</html>
0
Merci
Merci énormément !!! Ça peut difficilement être plus clair que ça ! haha
Je travaille là-dessus et je te tiens au courant si j'ai un problème ;)

Merci encore :)