Nospam said:
Would you have a tutorial example of how this is done?
Sorry no tutorial, but I can make a hasty description with broken English.
Basically what I am trying to do is have a menu image map, containing four
menus in the header of my page, each of these when clicked will expand the
menus in the sidebar, and those menus in the sidebar when clicked will show
in the main content, i.e my page is seperated with a header, sidebar, main
content, and footer, is there any other way of doing this other than with
javascript? Would you have an example tutorial on how this is done
with/without javascript?
I assume you are somewhat familiar with CSS and how to place out div-elements
on places where you want them to be.
Here is a crude example, I have selected to use an anchor to open/close the
div-element, but you can use any element that accepts the onclick-event.
Each div-element have to have their unique id and the showdiv() function has
to be called with the id-name (try to avoid names that are reserved words in
javascript, like form). If the div is visible, then it will be closed if the
link is pressed on.
In this example you must have the style="display: none;" set in the div
element, you can't move it to the CSS file, as then the script won't work.
--- testpage.html ---
<html>
<head><title>Testpage</title>
<script type="text/javascript">
function showdiv(id) {
el = document.getElementById(id);
if (el.style.display == 'none') {
el.style.display = '';
el = document.getElementById('_' + id);
} else {
el.style.display = 'none';
el = document.getElementById('_' + id);
}
}
</script>
</head>
</body>
<a href="
http://www.example.net/index.php" title="My SubMenu 1"
onclick="javascript:showdiv('myhiddendiv1');return false;">Link to open the
SubMenu</a>
<a href="
http://www.example.net/index.php" title="My SubMenu 1"
onclick="javascript:showdiv('myhiddendiv2');return false;">Link to open the
other submenu</a>
<div id="myhiddendiv1" style="z-index: 0; display: none;">
Here you have what you want in the submenu
</div>
<div id="myhiddendiv2" style="z-index: 0; display: none;">
Here you have what you want in the other Submenu
</div>
</body>
</html>
--- eof ---
I hope you will get this to work as you want.
