bonjour à tous!!
j'ai du code me permettant de creer un menu horizontal en cascade, mais j'ai un peu de mal
en effet, pour certain element du menu, je ne veux pas mettre de sous menu et ça me met des erreurs, quand je supprime ces sous menus en question.
j'ai trop du mal
je vous donne les codes :
1- code CSS
[code]
BODY
{
}
.menuBar
{
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: left;
position:absolute;
margin-left: 13%;
top : 0%;
}
.Bar
{
BORDER-RIGHT: blue 1px outset;
BORDER-TOP: blue 0px outset;
FLOAT: left;
BORDER-LEFT: blue 1px outset;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px outset;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}
.menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH: 150px;
LINE-HEIGHT: 140%;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: deepskyblue
}
.menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
.ItemMouseOver
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight
}
.ItemMouseOut
{
WIDTH: 100%
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: left;
BORDER-LEFT: blue 1px ridge;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}
</style>
[/code]
2- code en JS
[code]
<script language="javascript">
function InitMenu()
{
var bar = menuBar.children
for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = "hidden"
bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)
if(menuItem.menu != null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
//var tmp = eval(menuItem.id+"_Arrow")
// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }
menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
}
}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden"
var menuItem = eval(Items[j].id)
if(menuItem.menu!= null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
// var tmp = eval(menuItem.id+"_Arrow")
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}
if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }
menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}
function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id)
TE.className = "menuItem"
}
}
obj.className="ItemMouseOver"
window.defaultStatus = obj.title
ShowSubMenu(obj)
}
function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)
}
function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children
for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver")
{var bar = eval(child[j].id)
bar.className="Bar"}
if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)
childMenu.style.visibility = "hidden"
}
}
}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}
</script>
[/code]
3- code HTML
[code]
<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=aliceblue>
<body>
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1">Ordinateur</DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Moniteur</DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Imprimante</DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">Scanner</DIV>
<DIV Id="Bar5" class="Bar" menu="menu5">Graveur</DIV>
<DIV Id="Bar6" class="Bar" menu="menu6">Souris</DIV>
<DIV Id="Bar7" class="Bar" menu="menu7">Clavier</DIV>
<DIV Id="Bar8" class="Bar" menu="menu8">Disque dur</DIV>
<DIV Id="Bar9" class="Bar" menu="menu9">Carte</DIV>
</DIV>
<div Id="menu1" class="menu">
<div Id="menuItem2_1" class="menuItem">Personnel</div>
<div Id="menuItem2_2" class="menuItem">Portable</div>
<div Id="menuItem2_3" class="menuItem">Page #3</div>
</div>
<!--MenuItem Definition -->
<!--<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" menu="menu6">SubMenu #1</div>
<div Id="menuItem1_2" class="menuItem" title="EspaceJavascript" cmd="http://www.espacejavascript.com/">EspaceJavascript.Com</div>
<div Id="menuItem1_3" class="menuItem" title="G1Script" cmd="http://www.g1script.com">G1Script.Com</div>
</div>-->
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem">Page #1</div>
<div Id="menuItem2_2" class="menuItem">Page #2</div>
<div Id="menuItem2_3" class="menuItem">Page #3</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem">Jet d'encre</div>
<div Id="menuItem3_2" class="menuItem">Portable</div>
<div Id="menuItem3_3" class="menuItem">Page #3</div>
<div Id="menuItem3_4" class="menuItem" menu="menu5">SubMenu #4</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem">Page #1</div>
<div Id="menuItem4_2" class="menuItem">Page #2</div>
<div Id="menuItem4_3" class="menuItem">Page #3</div>
<div Id="menuItem4_4" class="menuItem">Page #4</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem">Page #4-1</div>
<div Id="menuItem5_2" class="menuItem">Page #4-2</div>
<div Id="menuItem5_3" class="menuItem">Page #4-3</div>
</div>
<div id="menu6" class="menu">
<div Id="menuItem6_1" class="menuItem">Filiaire</div>
<div Id="menuItem6_2" class="menuItem">Sans fil</div>
<div Id="menuItem6_2" class="menuItem">Pour portable</div>
<div Id="menuItem6_3" class="menuItem" menu="menu7">SubMenu #1-1</div>
</div>
<div id="menu7" class="menu">
<div Id="menuItem7_1" class="menuItem">Page #1-1-1</div>
<div Id="menuItem7_2" class="menuItem">Page #1-1-2</div>
<div Id="menuItem7_3" class="menuItem">Page #1-1-3</div>
</div>
<div id="menu8" class="menu">
<div Id="menuItem8_1" class="menuItem">Page #1-1-1</div>
<div Id="menuItem8_2" class="menuItem">Page #1-1-2</div>
<div Id="menuItem8_3" class="menuItem">Page #1-1-3</div>
</div>
<div id="menu9" class="menu">
<div Id="menuItem9_1" class="menuItem">Graphique</div>
<div Id="menuItem9_2" class="menuItem">Réseau</div>
<div Id="menuItem9_3" class="menuItem">Son</div>
</div>
</body>
[/code]
et je voudrais savoir un autre truc
j'ai ce code dans mon menu (frame horizontale) et est ce que c'est possible (avec ce code) d'afficher les sous menus (s'il y a) dans ma page centrale?
merci beaucoup pour votre aide, car j'en ai vraiment besoin...