Trying to incorporate a drop down menu in an already designed web site [Archive]

View Full Version : Trying to incorporate a drop down menu in an already designed web site

DIYPARTYHIRE

12-01-2008, 08:15 PM

Hi all

First post of many no doubt lol ...

im new here ive done a fair bit of basic web design but i now need to put a drop down menu in the navigation bar of my web site.

but i cant figure out where to start ... ive tried the online tutorials but dont seem to help with my already existing web site ...

Can anyone help???

Thanks

Schmoopy

12-01-2008, 09:27 PM

Provide a link to your site so we can see what sort of menu would be best suited to it. Do you want a horizontal or vertical drop down menu?

Snookerman

12-01-2008, 09:30 PM

Did you take a look at the DD ones?

Menu and Navigation Scripts: http://www.dynamicdrive.com/dynamicindex1/index.html (http://www.dynamicdrive.com/dynamicindex1/index.html)

CSS Menus: http://www.dynamicdrive.com/style/csslibrary/category/C1/ (http://www.dynamicdrive.com/style/csslibrary/category/C1/)

DIYPARTYHIRE

12-01-2008, 09:49 PM

Thanks for the reply

website is

www.diypartyhire.co.uk

its a basic design that we use for showing hire equipment - only just been done so there are still some issues that im working out, but we didnt think we would need too many pages hence why we didnt put drop down menus on.

Schmoopy

12-01-2008, 09:53 PM

Ok, well since you say you're not very experienced this is probably a good choice: http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

It's a very simple drop down menu, which you can customise to your needs, and it's pure CSS so it shouldn't be too hard for you to implement, just say if you need more help.

It is mostly explained on the page I have linked to though.

Hope this helps,

Jack.

DIYPARTYHIRE

12-01-2008, 10:05 PM

Thanks for the links that is the kind of thing that i want

the problem comes when i try and insert the code into the page that i already have - i never know which bits to overwrite.

any chance some one could get my source code and just add the menu code to it so i can see where i need to place it?

i know im a pain im just at a loss with this at the moment and its doing my head in lol

Schmoopy

12-01-2008, 10:20 PM

You'll have to experiment with the page a bit, so you can comment out by using  around the menu you currently have and replace it with the following after the <body>



<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Anchor Link</a>

<div id="anylinkmenu1" class="anylinkcss">

<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>

</div>



<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')">Anchor Link 2</a>

<div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: lightyellow">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</a>

</div>

And then put this between the <head> tag:

<link rel="stylesheet" type="text/css" href="anylink.css" />

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

/***********************************************
* AnyLink CSS Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Make sure you save the .css and .js files from the page I linked to earlier, and then from there you should be able to play around with the CSS, adding background-color, borders, etc etc, to get the effect you want.

Edit: Here's more specific code - Go to this part of your code:

<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="lighting.htm">Lighting</a> </li>
<li><a href="sound.htm">Sound </a></li>
<li><a href="effects.htm">Effects</a></li>

<li><a href="packages.htm">Packages</a></li>
<li><a href="terms.htm">Terms</a></li>
<li><a href="contact.htm">Contact</a></li>
<li></li>
</ul>
</div>


And then edit it like this:

<li><a href="sound.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'soundmenu')">Sound</a></li>

Now that's done, change the "soundmenu" div:

<div id="soundmenu" class="anylinkcss">

<a href="#">Your Drop Down Link HERE</a>
</a>

</div>

From that, you should be able to edit the rest of the links in the same sort of way, post a reply if you continue to have problems with it.

Hope it helps anyway.