adding drop-down menus to an existing website

[legalwalleye]

Hello, newbie here w/ somewhat limited programming skills so please try to bare with me - thanks.

I purchased a web template (I know strike one), and I want to add drop down menus (or fly-out menus) to the main navigation buttons on the index page, but really don't know how. I have visited a few do-it-yourself sites, but nothing seems to work or their being built from scratch.

This is my template:http://szocik.com/template/

If anyone could guide me w/ the code for one of the buttons, I’m guessing i could take it from there.

Thank you for your time and consideration.


lgw

[SpOrTsDuDe-Reese]

You should be able to do this all with CSS. I recommend you looking into Suckerfish menus. I assume when you mean "flyout menus" I think you mean rollover menus. What the idea for it is, for the 2nd level of navigiation, give it an ID/class and give it properties you want for style and give display:none to it, and on the top navigational part, when hovered set it to display:block;. Got to go to homeroom now.

[legalwalleye]

yes, I do mean fly out menus. But, is there a simple way to add code to the buttons to add them tot he existing template I have - as opposed to making new ones? thanks,

[SpOrTsDuDe-Reese]

Make sure you use classes on your original menu, and you can reuse them . Cheers.

[legalwalleye]

sorry, but I don't understand your message - newbie here.

[SpOrTsDuDe-Reese]

Show your code for your original flyout menu. Oh, and if your a newbie how do you know what you want is called a flyout menu? We call those rollover menus...

[legalwalleye]

Show your code for your original flyout menu. Oh, and if your a newbie how do you know what you want is called a flyout menu? We call those rollover menus...

would this be it?

<!-- Begin


var menuwidth = "161" // WIDTH OF THE LEFT MENU AND SIDEBAR
var date = "yes" // SHOW DATE


// NOTE: If you use a ' add a slash before it like this \'

document.write('<div id="sidebar" class="menu-layer">');
document.write('<TABLE cellpadding="0" cellspacing="0" border="0" width="'+menuwidth+'" class="printhide">');
document.write('<tr><td>');

document.write('<a href="index.html" class="menu">Home</a>');


// NOTE: COPY AND PASTE THE NEXT 2 LINES TO MAKE A NEW LINK


document.write('</td></tr><tr><td>');
document.write('<a href="about.htm" class="menu">About</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="news.htm" class="menu">News</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="quotes.htm" class="menu">Quotes</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="clients.htm" class="menu">Clients</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="resources.htm" class="menu">Resources</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="careers.htm" class="menu">Careers</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="services.htm" class="menu">Services</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="gallery1.htm" class="menu">Gallery / Products</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="staff.htm" class="menu">Our Staff</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="faq-home.htm" class="menu">F.A.Q.</a>');


document.write('</td></tr><tr><td>');
document.write('<a href="calendar.htm" class="menu">Event Calendar</a>');


// END MENU LINKS



document.write('</td></tr><tr><td align="center" valign="middle">');
document.write('<img src="picts/spacer.gif" HEIGHT="1" width="'+menuwidth+'"><br>');
document.write('</td></tr></table>');
document.write('</div>');




// End -->

[SpOrTsDuDe-Reese]

document.write() only writes stuff to the page when the page is loaded. Unless this is the same case it is impossible to use the document.write() for this.

[legalwalleye]

ok. that must pertain to something else on the bottom of the page - I should have left it off.

[bluewalrus]

This is your code i have no idea how to incorporate suckerfish into this though never done it with tables.

<script language="JavaScript" type="text/javascript" src="menu.js">
</script><div id="sidebar" class="menu-layer"><table class="printhide" 
border="0" cellpadding="0" cellspacing="0" width="161"><tbody><tr>
<td><a href="index.html" class="menu">Home</a></td></tr><tr>
<td><a href="about.htm" class="menu">About</a></td></tr><tr>
<td><a href="news.htm" class="menu">News</a></td></tr><tr>
<td><a href="quotes.htm" class="menu">Quotes</a></td></tr>
<tr><td><a href="clients.htm" class="menu">Clients</a></td>
</tr><tr><td><a href="resources.htm" class="menu">Resources</a>
</td></tr><tr><td><a href="careers.htm" class="menu">Careers</a>
</td></tr><tr><td><a href="services.htm" class="menu">Services</a>
</td></tr><tr><td><a href="gallery1.htm" class="menu">Gallery / Products</a>
</td></tr><tr><td><a href="staff.htm" class="menu">Our Staff</a>
</td></tr><tr><td><a href="faq-home.htm" class="menu">F.A.Q.</a>
</td></tr><tr><td><a href="calendar.htm" class="menu">Event Calendar</a>
</td></tr><