Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Shaun E on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Flyout Menu

Status
Not open for further replies.
jazzgirl

jazzgirl

Technical User
Jun 19, 2001
80
US
I haven't been using Dreamweaver long so please bear with me. I need to know how to create a flyout menu. Something very simple. Example, you hover over an image or a link and a menu pops out with multiple links. What is the easiest way to do this or where are there some good instructions?

Any help appreciated.

Jazzgirl
 
Sort by date Sort by votes
If you want to use JavaScript for the menu use the following code.....(There are 3 different sections of code)

Put this in the <head> of your document:

Code: 
<STYLE>
bgproperties=&quot;fixed&quot;
<!--
A.ssmItems:link		{color:black;text-decoration:none;}
A.ssmItems:hover	{color:black;text-decoration:none;}
A.ssmItems:active	{color:black;text-decoration:none;}
A.ssmItems:visited	{color:black;text-decoration:none;}
//-->
</STYLE>

<SCRIPT SRC=&quot;ssm.js&quot; language=&quot;JavaScript1.2&quot;>

</SCRIPT>

<SCRIPT SRC=&quot;ssmItems.js&quot; language=&quot;JavaScript1.2&quot;></SCRIPT>

Then copy/paste this into notepad and save in your webspace as ssm.js

Code: 
NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName==&quot;Netscape&quot; && navigator.appVersion.charAt(0)==&quot;4&quot;)

tempBar='';barBuilt=0;ssmItems=new Array();

moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;}
if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = document.body.scrollTop;}
if (NS6||IE||NS) {
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) bssm.pixelTop+=smooth;
if (NS6||NS) bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout('makeStatic()', 1)}}

function buildBar() {
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+&quot;<BR>&quot;}}
document.write('<td align=&quot;center&quot; rowspan=&quot;100&quot; width=&quot;'+barWidth+'&quot; bgcolor=&quot;'+barBGColor+'&quot; valign=&quot;'+barVAlign+'&quot;><p align=&quot;center&quot;><font face=&quot;'+barFontFamily+'&quot; Size=&quot;'+barFontSize+'&quot; COLOR=&quot;'+barFontColor+'&quot;><B>'+tempBar+'</B></font></p></TD>')}

function initSlide() {
if (NS6){ssm=document.getElementById(&quot;thessm&quot;).style;bssm=document.getElementById(&quot;basessm&quot;).style;
bssm.clip=&quot;rect(0 &quot;+document.getElementById(&quot;thessm&quot;).offsetWidth+&quot; &quot;+document.getElementById(&quot;thessm&quot;).offsetHeight+&quot; 0)&quot;;ssm.visibility=&quot;visible&quot;;}
else if (IE) {ssm=document.all(&quot;thessm&quot;).style;bssm=document.all(&quot;basessm&quot;).style
bssm.clip=&quot;rect(0 &quot;+thessm.offsetWidth+&quot; &quot;+thessm.offsetHeight+&quot; 0)&quot;;bssm.visibility = &quot;visible&quot;;}
else if (NS) {bssm=document.layers[&quot;basessm1&quot;];
bssm2=bssm.document.layers[&quot;basessm2&quot;];ssm=bssm2.document.layers[&quot;thessm&quot;];
bssm2.clip.left=0;ssm.visibility = &quot;show&quot;;}
if (menuIsStatic==&quot;yes&quot;) makeStatic();}

function buildMenu() {
if (IE||NS6) {document.write('<DIV ID=&quot;basessm&quot; style=&quot;visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'&quot;><DIV ID=&quot;thessm&quot; style=&quot;Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0 ;Z-Index : 20;&quot; onmouseover=&quot;moveOut()&quot; onmouseout=&quot;moveBack()&quot;>')}
if (NS) {document.write('<LAYER name=&quot;basessm1&quot; top=&quot;'+YOffset+'&quot; LEFT='+XOffset+' visibility=&quot;show&quot;><ILAYER name=&quot;basessm2&quot;><LAYER visibility=&quot;hide&quot; name=&quot;thessm&quot; bgcolor=&quot;'+menuBGColor+'&quot; left=&quot;'+(-menuWidth)+'&quot; onmouseover=&quot;moveOut()&quot; onmouseout=&quot;moveBack()&quot;>')}
if (NS6){document.write('<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;'+(menuWidth+barWidth+2)+'&quot; bgcolor=&quot;'+menuBGColor+'&quot;><TR><TD>')}
document.write('<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;1&quot; width=&quot;'+(menuWidth+barWidth+2)+'&quot; bgcolor=&quot;'+menuBGColor+'&quot;>');
for(i=0;i<ssmItems.length;i++) {
if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}
else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
if(ssmItems[i-1]&&ssmItems[i-1][4]!=&quot;no&quot;){document.write('<TR>')}
if(!ssmItems[i][1]){
document.write('<td bgcolor=&quot;'+hdrBGColor+'&quot; HEIGHT=&quot;'+hdrHeight+'&quot; ALIGN=&quot;'+hdrAlign+'&quot; VALIGN=&quot;'+hdrVAlign+'&quot; WIDTH=&quot;'+ssmItems[i][5]+'&quot; COLSPAN=&quot;'+ssmItems[i][3]+'&quot;> <font face=&quot;'+hdrFontFamily+'&quot; Size=&quot;'+hdrFontSize+'&quot; COLOR=&quot;'+hdrFontColor+'&quot;><b>'+ssmItems[i][0]+'</b></font></td>')}
else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;
document.write('<TD BGCOLOR=&quot;'+linkBGColor+'&quot; onmouseover=&quot;bgColor=\''+linkOverBGColor+'\'&quot; onmouseout=&quot;bgColor=\''+linkBGColor+'\'&quot; WIDTH=&quot;'+ssmItems[i][5]+'&quot; COLSPAN=&quot;'+ssmItems[i][3]+'&quot;><ILAYER><LAYER onmouseover=&quot;bgColor=\''+linkOverBGColor+'\'&quot; onmouseout=&quot;bgColor=\''+linkBGColor+'\'&quot; WIDTH=&quot;100%&quot; ALIGN=&quot;'+linkAlign+'&quot;><DIV  ALIGN=&quot;'+linkAlign+'&quot;><FONT face=&quot;'+linkFontFamily+'&quot; Size=&quot;'+linkFontSize+'&quot;> <A HREF=&quot;'+ssmItems[i][1]+'&quot; target=&quot;'+ssmItems[i][2]+'&quot; CLASS=&quot;ssmItems&quot;>'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')}
if(ssmItems[i][4]!=&quot;no&quot;&&barBuilt==0){buildBar();barBuilt=1}
if(ssmItems[i][4]!=&quot;no&quot;){document.write('</TR>')}}
document.write('</table>')
if (NS6){document.write('</TD></TR></TABLE>')}
if (IE||NS6) {document.write('</DIV></DIV>')}
if (NS) {document.write('</LAYER></ILAYER></LAYER>')}
theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}


And finally copy/paste this into notepad and save as ssmItems.js


Code: 
<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=0; // no quotes!!
XOffset=0;
staticYOffset=0; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor=&quot;black&quot;;
menuIsStatic=&quot;yes&quot;; //this sets whether menu should stay static on the screen
menuWidth=100; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily=&quot;arial&quot;;
hdrFontSize=&quot;2&quot;;
hdrFontColor=&quot;white&quot;;
hdrBGColor=&quot;#00BFFF&quot;;
hdrAlign=&quot;left&quot;;
hdrVAlign=&quot;center&quot;;
hdrHeight=&quot;15&quot;;
linkFontFamily=&quot;arial&quot;;
linkFontSize=&quot;2&quot;;
linkBGColor=&quot;white&quot;;
linkOverBGColor=&quot;#87CEEB&quot;;
linkTarget=&quot;mainFrame&quot;;
linkAlign=&quot;Left&quot;;
barBGColor=&quot;#00BFFF&quot;;
barFontFamily=&quot;arial&quot;;
barFontSize=&quot;2&quot;;
barFontColor=&quot;black&quot;;
barVAlign=&quot;center&quot;;
barWidth=20; // no quotes!!
barText=&quot;MENU&quot;; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=[&quot;Menu&quot;] //create header
ssmItems[1]=[&quot;Page 1&quot;, &quot;[URL unfurl="true"]http://www.mydomain.co.uk/page1.html&quot;,[/URL] &quot;&quot;]
ssmItems[2]=[&quot;Page 2, &quot;[URL unfurl="true"]http://www.mydomain.co.uk/page2.html&quot;,&quot;&quot;[/URL]]
ssmItems[3]=[&quot;Page 3&quot;, &quot;[URL unfurl="true"]http://www.mydomain.co.uk/page3.html&quot;,[/URL] &quot;&quot;]
ssmItems[4]=[&quot;Page 4&quot;, &quot;[URL unfurl="true"]http://www.mydomain.co.uk/page4.html&quot;,[/URL] &quot;&quot;]
ssmItems[5]=[&quot;Page 5&quot;, &quot;[URL unfurl="true"]http://www.mydomain.co.uk/page5.html&quot;,[/URL] &quot;&quot;]


buildMenu();

//-->

Configure the menu in ssmItems.js by adding removing items/changing colors etc.

Hope that helps, for more information and some other menu's take a look at
Naiku
 
Upvote 0 Downvote
Thank you Ranjan and Naiku for your help. Naiku I've copied and pasted the script and will try it today. I'll also take a look at the links you've posted to learn more.

Jazzgirl
 
Upvote 0 Downvote
Doh!!!!! teach me for not reading all the posts.. The secret of life is honesty and fair dealing. If you can fake that, you've got it made.
Groucho Marx (1895-1977)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

samiotis1949
  • Locked
  • Question
Spry menu given me a headache
Replies
0
Views
272
samiotis1949
samiotis1949
theOftenator
  • Locked
  • Question
Spry Menu Bar Submenus: Position Shifting Upon Rollover
Replies
0
Views
228
theOftenator
theOftenator
hany3
  • Locked
  • Question
Add a name ancher in spry menu dreamweaver cs4
Replies
2
Views
262
darryncooke
darryncooke
kirnehator
  • Locked
  • Question
Aligning website menu
Replies
1
Views
243
imeldesign
imeldesign
zickler
  • Locked
  • Question
Menu buttons overlapping flash movie file
Replies
1
Views
194
apepp
apepp

Part and Inventory Search

Sponsor

Back
Top