Log in

View Full Version : adding drop-down menus to an existing website


legalwalleye
09-16-2008, 04:36 AM
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
09-16-2008, 11:19 AM
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
09-16-2008, 12:54 PM
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
09-16-2008, 05:21 PM
Make sure you use classes on your original menu, and you can reuse them :). Cheers.
legalwalleye
09-16-2008, 06:33 PM
sorry, but I don't understand your message - newbie here.
SpOrTsDuDe-Reese
09-16-2008, 06:45 PM
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
09-18-2008, 01:50 AM
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
09-18-2008, 09:17 AM
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
09-18-2008, 04:13 PM
ok. that must pertain to something else on the bottom of the page - I should have left it off.
bluewalrus
09-18-2008, 05:04 PM
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><
legalwalleye
09-18-2008, 05:14 PM
then what do you recommend I do?