A
aerotops
I am having a tough time coding a fly out vertical menu.
The one I have currently is CSS based using hover to display the level
2 menus. The requirement changed such that the menu should fly out not
on mouse-over (hover), but onClick. I have coded that part too.
When I click on a level 1 item, the level 2 item flys out as expected.
If I click on the SAME L1 item again, its hidden again. Same goes for
if a L2 item is visible and I click on the L2 item.
The problem is that I would like for the menu to hide when I click
anywhere else on the document which is not happening right now.
I would appreciate any pointers.
SOURCE CODE: To run this, just name the html file: test.html and the
CSS file as: afsllc1.css in the same folder.
HTML file:
<html>
<head></head>
<body id="bodyID">
<link rel="stylesheet" type="text/css" href="afsllc1.css" />
<script type="text/javascript">
var popupLink
function popMenu()
{
if(popupLink.style.visibility == "visible")
{
popupLink.style.visibility = "hidden";
}
else
{
popupLink.style.visibility = "visible";
popupLink.focus = "true";
}
}
function init()
{
//var bodyElement = document.getElementById("bodyID");
//bodyElement.attachEvent('onclick', hideMenuOnBodyClick);
popupLink = document.getElementById("secondLevel");
popupLink.style.visibility = "hidden";
popupLink.attachEvent('onblur', hideMenuOnBodyClick);
}
</script>
<div class="menu">
<ul>
<li><a href="#nogo">Educational Tools</a></li>
<li><a href="#nogo">Forms Library</a></li>
<li><a href="#nogo" onclick="popMenu()">Manuals »<!--[if IE
7]><!--></a><!--<![endif]-->
<table id = "secondLevelTable">
<tr><td>
<ul id="secondLevel">
<li><a href="#nogo">Item 3a</a></li>
<li><a href="#nogo">Item 3b <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Item 3c</a></li>
</ul>
</td></tr>
</table> <!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Marketing Materials</a></li>
<li><a href="#nogo">Become Registered for new locations</a></li>
</ul>
</div>
<script type="text/javascript">
window.onload = init;
</script>
</body>
</html>
CSS file:
..menu {
position:relative;
z-index:1000;
font-size:90%;
width: 180px;
float: left;
padding-bottom: 20px;
}
/* remove all the bullets, borders and padding from the default list
styling */
..menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
..menu li {
position:relative;
}
/* get rid of the table */
table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
..menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#fff;
background:#3B537F;/*Change menu background here*/
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
..menu a:hover{
color:#fff;
background:#949e7c;
}
/* hide the sub levels and give them a positon absolute so that they
take up no room */
..menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px;
}
/* make the second level visible when hover on first level list OR link
..menu ul :hover ul{
visibility:visible;
}*/
The one I have currently is CSS based using hover to display the level
2 menus. The requirement changed such that the menu should fly out not
on mouse-over (hover), but onClick. I have coded that part too.
When I click on a level 1 item, the level 2 item flys out as expected.
If I click on the SAME L1 item again, its hidden again. Same goes for
if a L2 item is visible and I click on the L2 item.
The problem is that I would like for the menu to hide when I click
anywhere else on the document which is not happening right now.
I would appreciate any pointers.
SOURCE CODE: To run this, just name the html file: test.html and the
CSS file as: afsllc1.css in the same folder.
HTML file:
<html>
<head></head>
<body id="bodyID">
<link rel="stylesheet" type="text/css" href="afsllc1.css" />
<script type="text/javascript">
var popupLink
function popMenu()
{
if(popupLink.style.visibility == "visible")
{
popupLink.style.visibility = "hidden";
}
else
{
popupLink.style.visibility = "visible";
popupLink.focus = "true";
}
}
function init()
{
//var bodyElement = document.getElementById("bodyID");
//bodyElement.attachEvent('onclick', hideMenuOnBodyClick);
popupLink = document.getElementById("secondLevel");
popupLink.style.visibility = "hidden";
popupLink.attachEvent('onblur', hideMenuOnBodyClick);
}
</script>
<div class="menu">
<ul>
<li><a href="#nogo">Educational Tools</a></li>
<li><a href="#nogo">Forms Library</a></li>
<li><a href="#nogo" onclick="popMenu()">Manuals »<!--[if IE
7]><!--></a><!--<![endif]-->
<table id = "secondLevelTable">
<tr><td>
<ul id="secondLevel">
<li><a href="#nogo">Item 3a</a></li>
<li><a href="#nogo">Item 3b <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Item 3c</a></li>
</ul>
</td></tr>
</table> <!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#nogo">Marketing Materials</a></li>
<li><a href="#nogo">Become Registered for new locations</a></li>
</ul>
</div>
<script type="text/javascript">
window.onload = init;
</script>
</body>
</html>
CSS file:
..menu {
position:relative;
z-index:1000;
font-size:90%;
width: 180px;
float: left;
padding-bottom: 20px;
}
/* remove all the bullets, borders and padding from the default list
styling */
..menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
..menu li {
position:relative;
}
/* get rid of the table */
table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
..menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#fff;
background:#3B537F;/*Change menu background here*/
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
..menu a:hover{
color:#fff;
background:#949e7c;
}
/* hide the sub levels and give them a positon absolute so that they
take up no room */
..menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px;
}
/* make the second level visible when hover on first level list OR link
..menu ul :hover ul{
visibility:visible;
}*/