11548 sujets

JavaScript, DOM et API Web HTML5

Fenêtre et menu accordéon

Bonjour


le but du script suivant est
1- créer une zone à l'aide d'une div (#menu1, #menu2,...);
2- au survol de cette zone faire appaitre un menu accorddéon;
3- au survol de ce menu obtenir le déroulé;
4- au survol d'une zone suivante fermer la fenêtre précédente.

(Ce code est le cumul de 2 scripts existants)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>un ba déroulant en CSS et javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}



#menu1,#menu2 {
position: absolute;
width: 10em;
z-index: 50;
}
#menu1 {
top:100px;
left: 200px;
}
#menu2 {
top:250px;
left: 100px;
}

#navigation {
margin: 0;
padding: 0;
list-style: none:
background: #000;
color: #fff;
width: 200px;
font: 1.2em "Trebuchet MS", sans-serif;
}
#navigation a, #navigation span {
display: block;
padding: 4px 10px;
color: #fff;
text-decoration: none;
background: #000 url(menu-item.png) left bottom no-repeat;
}
#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
background-image: url(menu-item-deroule.png);
}
#navigation .open a, #navigation .open span {
background-image: url(menu-item-enroule.png);
}
#navigation a:hover, #navigation a:focus, #navigation a:active {
text-decoration: underline;
}
#navigation .subMenu {
font-size: .8em;
background: #ccc url(subMenu.png) 0 0 repeat-x;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
}
#navigation ul.subMenu a {
background: none;
padding: 3px 20px;
}


</style>
<!--[if lte IE 6]>
<style type="text/css">
li {
height: 1px;
}
</style>
<![endif]-->


<script type="text/javascript">
/*
* jQuery 1.2.6 - New Wave Javascript
*
* Copyright (c) 2008 John Resig (jquery.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* $Date: 2008-05-24 14:22:17 -0400 (Sat, 24 May 2008) $
* $Rev: 5685 $
*/

...

</script>

<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$("ul.subMenu:not('.open_at_load')").hide();
// On selectionne tous les items de liste portant la classe "toggleSubMenu"

// et on remplace l'element span qu'ils contiennent par un lien :
$("li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
} ) ;

// On modifie l'evenement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$("li.toggleSubMenu > a").hover( function () {
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On emp?che le navigateur de suivre le lien :
return false;
});

} ) ;
// -->
</script>


<script type="text/javascript">

window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}

</script>


</head>
<body>



<dl id="menu">
<div id="menu1">
<dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul id="navigation">
<li><a href="" title="">Item 1</a></li>
<li class="toggleSubMenu"><span>Item 2</span>
<ul class="subMenu">

<li><a href="" title="">Item 2.1</a></li>
<li><a href="" title="">Item 2.2</a></li>
<li><a href="" title="">Item 2.3</a></li>
</ul>
</li>
<li class="toggleSubMenu"><span>Item 3</span>

<ul class="subMenu">
<li><a href="" title="">Item 3.1</a></li>
<li><a href="" title="">Item 3.2</a></li>

</ul>
</li>
<li><a href="" title="">Item 4</a></li>
</ul>
</dd>
</div>


<div id="menu2">
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu 2</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul id="navigation">
<li><a href="" title="">Item 1</a></li>
<li class="toggleSubMenu"><span>Item 2</span>
<ul class="subMenu">

<li><a href="" title="">Item 2.1</a></li>
<li><a href="" title="">Item 2.2</a></li>
<li><a href="" title="">Item 2.3</a></li>
</ul>
</li>
<li class="toggleSubMenu"><span>Item 3</span>

<ul class="subMenu">
<li><a href="" title="">Item 3.1</a></li>
<li><a href="" title="">Item 3.2</a></li>

</ul>
</li>
<li><a href="" title="">Item 4</a></li>
</ul>
</dd>
</div>
</dl>



</body>
</html>



Je rencontre un problème lors du survol de la fenêtre du menu avec Firefox, alors que cela se passe bien avec IE.
Quelqu'un pourrait-il m'aider à mettre le doigt sur ce point bloquant ?
D'avance merci.[code]
Bonjour également,

Nous te serions reconnaissant de bien vouloir mettre en forme ton code, pour une meilleure lisibilité, à l'aide des balises prévues à cet effet (bouton code) :
[ code]... ici ton code HTML, CSS, PHP, etc.[ /code] 
(sans espace après chaque crochet ouvrant).
et conformément à l'une des Règles de base du forum que tu as acceptées en t'inscrivant.

Plutôt que ces "kilomètres de lignes de codes", une page en ligne serait bien plus efficace Smiley cligne

Je t'avoue tout de même que je ne comprends pas très bien où tu veux en venir avec ce type de construction pour le moins bancales Smiley ohwell
La finalité pourrait aider nos membres à mieux te conseiller, ou éventuellement t'aiguiller vers autre chose Smiley cligne

Merci de ta compréhension en tout cas.
Cdt,
Sylvain
Bonsoir

Je conçois aisément la difficulté de me comprendre, l'exercice étant un peu difficile pour moi.

Je vais donc parler du produit fini idéal :

nous devons pouvoir représenter sur une carte de France des points importants. Le survol de chaque point fait apparaitre une fenêtre comportant des informations sous forme de liste. La quantité des informations étant relativement importante, j'opte pour un menu type accordéon.
Les fenêtres en question doivent pouvoir s'afficher au survol des points et bien sûr tenir compte de la dimension de la page pour pouvoir être lu.

Voilà en quelques lignes l'objet de ma démarche.
je suis disponible pour de plus amples info et en attendant merci
Sujet clos
Aller à