Sevencolors studies:
experiments with Javascript, CSS, PHP and web standards

Printer icon

Pop-up menu

A pop-up Javascript menu

The Javascript code in the <head> of the page:

<script language="JavaScript" type="text/javascript">
<!--
function show_nav(){
var menu = document.getElementsByTagName('a');
for(var i=0;i<menu.length;i++){
if(menu[i].className == 'category'){
menu[i].onmouseover = function() {m_over(this);return true;}
}else if(menu[i].className == 'external'){
menu[i].onclick = function(){window.open(this.href,'','');return false;}
}
}
}
function hide(){
var hide = document.getElementsByTagName('ul');
for(var i=0;i<hide.length;i++){
if(hide[i].className == 'nav'){
hide[i].style.display = 'none';
}
}
}
function m_over(el){
var lists = document.getElementsByTagName('ul');
var l = el.href.match(/#(\w.+)/)[1];
var active_nav = document.getElementById(l);
active_nav.style.display = 'block';
for(var i=0;i<lists.length;i++){
if(lists[i].id != l){
lists[i].style.display = 'none';
}
}
}
function close_pop(){
var div = document.getElementById('main_cont');
div.onmouseover = function(){hide();return true}
}
window.onload = function() {show_nav();hide();close_pop()}
//-->
</script>

The XHTML code in the <body> of the page:

<body>
<div id="wrap">
<p id="skip"><a href="#main_cont">skip navigation</a></p>
<div id="menu_cont">
<p class="cat"><a class="category" href="#list1">menu1</a></p>
<ul class="nav" id="list1">
<li><a href="#">Link 1/1</a></li>
<li><a href="#">Link 2/1</a></li>
<li><a title="this link will open a new window" class="external" href="#">Link 3/1</a></li>
</ul>
<p class="cat"><a class="category" href="#list2">menu2</a></p>
<ul class="nav" id="list2">
<li><a href="#">Link 1/2</a></li>
<li><a href="#">Link 2/2</a></li>
<li><a href="#">Link 3/2</a></li>
</ul>
</div>
<div id="main_cont">
<p>ahfqo ew rj h fqwepi g qewpr <a href="#">abcd</a> gqpe r igpqeiurv ahfqoewrj h fqwep igqe wprgqp erigp q e iurv</p>
<p>ahfq oewr jhfqwep igqewp rgqperig pqeiurv</p>
<p>ah fqoewrjhf qwe pig <a title="this link will open a new window" class="external" href="#">efgh</a> qe wprgqp erigp eiurv</p>
</div>
</div>

The Javascript code will set the display property to none only if enabled, which means that, if Javascript is disabled, the menu will appear open and usable. Setting the display property using CSS and then change it using Javascript would mean that, with Javascript disabled, the menu would stay closed and would be unusable.

The only problem with this script that I can see is the fact that, with Javascript disabled and CSS enabled, the menu stays open and it could cover part of the text (see example page). An obvious solution is to place the text a bit lower so that even if the menu is open it doesn`t cover it. On the example page the code is commented. The layout can be changed to meet any design requirements.