If you know javascript then you don't need to learn anything new. DHTML is Javascript, HTML and CSS combined. It basically stands for Dynamic HTML.
But as for an example for DHTML.
For each "menu" section you want to change on a link click you need to create a div for it. Example:
HTML Code:
<a href="">Menu Link 1</a>
the resulting link change would be connected with:
HTML Code:
<div id="link1" class="link_info">
Link 1 Information
</div>
For each link you would have the similar information.
The style sheet information you need for the information would be similar to:
HTML Code:
.link_info {
width: 200px;
display: none;
background-color: #FFFFFF;
}
The display part is the important part.
For any area you want open before any clicks you need to add in:
HTML Code:
<div id="link1" class="link_info" style="display: block;">
Link 1 Information
</div>
The inline style will override the class and it needs to be specified otherwise you will run into problems with the javascript.
The javascript you need to add to your link would look like something like this.
HTML Code:
<a href="someplace for ppl with out JS" onclick="javascript: toggle('link1'); return false;">Menu Link 1</a>
Here is the javascript you need:
HTML Code:
<script type="text/javascript">
var current = "link1";
function toggle(item)
{
if(item != current)
{
obj = document.getElementById(item);
old = document.getElementById(current);
current = item;
obj.style.display = "block";
old.style.display = "none";
}
else return;
}
</script>
This should be on each page, I've not been able to make it work correctly in an external js file.
You can seen an example like this at:
http://www.gaidin.org - The above code is used there.
As a side note, there is a completely CSS way to do the same thing with hovers. But I myself don't have the reference material handy to show you any examples.
