PDA

View Full Version : css drop down menu with dojo dijit.layout.BorderContainer



since
01-23-2010, 02:48 PM
Hi,
I am trying to get a css drop down menu to work with a dojo dijit.layout.BorderContainer. The css drop down menu works with a "normal" html table elements. The menu is not able to overlay the dijit.layout.BorderContainer real estate. I have tried changing the z-index. Any insight on how I can I get a css drop down menu work w/dojo widgets would be greatly appreciated. I have included a sample html page to illustrate my point.

Steve



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; }
#borderContainerTwo{ width: 100%; height: 100%; }
</style>
<style type="text/css">
.menuh{
width: 100%;
float: left;
}
.menuh ul{
background: #eee;
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
border: #80aa66 1px solid;
}
.menuh li{
position:relative;
}
.menuh ul ul{
display:none;
}
.menuh li:hover ul,
.menuh li li:hover ul,
.menuh li li li:hover ul
{display:block;}
</style>
</head>
<body class="tundra">
<div dojoType="dijit.layout.BorderContainer" style="z-index:1" gutters="true" id="borderContainerTwo">
<div dojoType="dijit.layout.ContentPane" region="top" splitter="false">
<div class="menuh">
<ul>
<li>menu 1
<ul>
<li>sub menu 1.1</li>
<li>sub menu 1.2</li>
<li>sub menu 1.3</li>
<li>sub menu 1.4</li>
<li>sub menu 1.5</li>
<li>sub menu 1.6</li>
<li>sub menu 1.7</li>
</ul>
</li>
</ul>
</div>
<div>
hello
</div>
</div>
<div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"
region="center" id="mainSplit">
<div dojoType="dijit.layout.ContentPane" minSize="20" style="width: 300px;"
id="leftMenu" region="leading" splitter="true">
left
</div>
<div dojoType="dijit.layout.ContentPane" region="center">
right
</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
if (window.pub) {
window.pub();
}
});
</script>
</html>