Forum home » Delegate support and help forum » Dreamweaver Training and help » dreamweaver course london - Layers
|
|
|
The UK's most regular Training information: |
|
Welcome. Please choose your application (eg. Excel) and then post your question. Our Microsoft Qualified trainers will then respond within 24 hours (working days). Frequently Asked Questions
Any suggestions, questions or comments? Please post in the Improve the forum thread. |
dreamweaver course london - Layers
Resolved · Low Priority · Version Standard
Reply Tue 25 Sep 2007, 12:47Delegate Karen said...
Karen has attended:
Dreamweaver 8 Introduction course
Layers
have created a menu on the left hand side of my page and I want to create dropdown options which appear under them either when you click on the main heading or when you hover over it with your mouse. How do I do this as at the moment I can only create ones that are there all the time.
For upcoming training course dates see: Pricing & availability
RE: Layers
Karen,
This is indeed a tricky one!
Around this web site, we use javascript functions to accomplish this, and because it's all viewable in our source code, there is no need to hide it away from you or anyone else!
First, save this into a javascript file (eg. global.js)
var supported = (document.getElementById || document.all);
if (supported) {
// set all to be initally false (ie. not shown / none)
var max = 7;
var shown = new Array();
for (var i=1;i<=max;i++) {
shown = false;
}
}
function blocking(i) {
if (!supported) {
alert('Sorry, this link does not work in your browser.');
return;
}
// reverse current state
shown = (shown) ? false : true;
// set css display value
current = (shown) ? 'block' : 'none';
// set
currentimg = (shown) ? 'on' : 'off';
if (document.getElementById) {
document.getElementById('comment_'+i).style.display = current;
}
else if (document.all) {
document.all['comment_'+i].style.display = current;
}
}
Then, whenever you want an 'expand' doovy, use this code:
<a href="" onClick="blocking(RANDOM NUMBER); return false">Click me to expand</a>
<div class="comment_off" id="comment_RANDOM NUMBER">
Whatever you want to reveal here
</div>
Then ensure you have this CSS code on all your pages
comment_off {
display: none;
}
You'll also need to link your HTML file to the javascript file in the HEAD part of your document (template is best), like this:
<script language="javascript" type="text/javascript" src="/asset/script/global.js"></script>
This assumes your javascript file is in a folder asseet/script.
Hope this helps!
Regards, Rich
|