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
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>
2- code en JS
<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; j4"
//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; j4"
// 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>
3- code HTML
Ordinateur
Moniteur
Imprimante
Scanner
Graveur
Souris
Clavier
Disque dur
Carte
Personnel
Portable
Page #3
<!--MenuItem Definition -->
<!--
SubMenu #1
EspaceJavascript.Comhttp://www.espacejavascript.com/ ">EspaceJavascript.Com>
G1Script.Comhttp://www.g1script.com ">G1Script.Com>
-->
Page #1
Page #2
Page #3
Jet d'encre
Portable
Page #3
SubMenu #4
Page #1
Page #2
Page #3
Page #4
Page #4-1
Page #4-2
Page #4-3
Filiaire
Sans fil
Pour portable
SubMenu #1-1
Page #1-1-1
Page #1-1-2
Page #1-1-3
Page #1-1-1
Page #1-1-2
Page #1-1-3
Graphique
Réseau
Son
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...
Afficher la suite