...

View Full Version : Adding drop down menu to CSS



bethmrogers
12-02-2002, 07:22 PM
I have a drop-down menu on the home page of my website, but I would like to have the same menu on each page to make navigation easier. Since I'm already using CSS on my site, is there a way to add the list items in the style sheet, so I can add new items in just one place, instead of having to add the new item to each page? I'm fairly new to CSS, but I'm using Dreamweaver, which has been a big help. Thanks in advance for your help.

Mr J
12-02-2002, 07:42 PM
Hmm ........

I think what we are talking here is the creation of a .JS file to write menu in each page and a CSS style sheet.

Post your URL so that I can take a look at the script and layout.

Can't hurt to look

bethmrogers
12-02-2002, 07:50 PM
My home page is http://rogerswebnet.net - I appreciate it!

cg9com
12-02-2002, 08:36 PM
you could:

create a .js file and add your menu script in that (without the <script></script> tags, with a document write.
then you can link through the page with a script call, either way you will have to edit each page.

in .js file:
document.write('<select><option></option></select>');


on page ( where you want script to appear )

<script type="text/javascript" src="file.js"></script>


that should work ,then later you can just edit the .js file to edit the menu, and the positioning of the file with the script call on the page, hope that helps

if you need it explained better ( i apologize :thumbsup: ) just say so

Mr J
12-03-2002, 10:43 PM
save the following as menu.js


function go(){
location=
document.mycombo.example.options[document.mycombo.example.selectedIndex].value
}

document.write("<FORM name=mycombo>"
+"<SELECT size=1 name=example>"
+" <OPTION value=portfolio.html selected>Our Portfolio</OPTION>"
+" <OPTION value=mission.html>Our Mission Statement</OPTION>"
+" <OPTION value=faq.html>Frequently Asked Questions</OPTION>"
+" <OPTION value=topten.html>Top Ten</OPTION>"
+" <OPTION value=theplan.html>The Plan*</OPTION>"
+" <OPTION value=rings.html>Rings, Memberships and Links</OPTION>"
+" <OPTION value=tribute.html>A Tribute</OPTION>"
+" <OPTION value=personal/index.html>Personal Information</OPTION>"
+" <OPTION value=contact.html>Contact Information</OPTION>"
+" <OPTION value=ads.html>Submit Your Ads</OPTION>"
+" <OPTION value=tcb.html>Takin' Care of Business</OPTION>"
+" <OPTION value=sample.html>Sample Issue</OPTION>"
+" <OPTION value=article.html>Submit Articles</OPTION>"
+" <OPTION value=360/index.html>DragonFly 360 Productions</OPTION>"
+"</SELECT>")


In all the pages that are going to show the menu copy the following


<script src="menu.js"></script>

And

<A href="javascript:go()">Your Link</A>


I have attached a zip file with the .js file and three html pages for you to take a look at

bethmrogers
12-03-2002, 11:32 PM
Thanks very much - I'll try this and let you know how it comes out. I appreciate you both going to so much trouble.
Beth

bethmrogers
12-10-2002, 09:46 PM
Thank you both again so much - I've loaded the scripts and other information on my pages - this is a life-saver - I wanted to have navigation on all pages, but didn't want to take a chance on not getting all information on each page - thank you! Thank you! Thank you!
:D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum