Help with Drop down menu

**Lulworth001** · 11-14-2008, 11:52 AM

hello everyone,

I've just started learning how to use Expression Web and have Dreamweaver CS3 aswell. I want a drop down menu for my website, but when following the instruction i get lost. Probably cos i have no idea. Could someone help, or point me in the right direction with a video tutorial.

Thanks Tom

**Lulworth001** · 11-14-2008, 12:03 PM

sorry have been reading other threads and thought the code may help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns

="urn:schemas-microsoft-com

ffice

ffice">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HomeAbout UsPropertiesProperties</title>
<style type="text/css">
script {
}
ul {
}
</style>
<link rel="stylesheet" type="text/css" href="chromestyle2.css" />
<link rel="stylesheet" type="text/css" href="chromestyle3.css" />
<link rel="stylesheet" type="text/css" href="bluetabs.css" />
</head>

<body>

<div>
<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/resources/" rel="dropmenu2">Partners</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li></li>
</ul>
</div></div>

<div>

<div id="dropmenu1" class="dropmenudiv">
<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></div>

</body>

</html>

the link to the DDSript is: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

Thanks

**Schmoopy** · 11-14-2008, 01:27 PM

A link to the site where this is hosted would be appreciated to see this in action, but from looking at the code it doesn't look like you've included the file "ddtabmenu.js", which is needed to make the menu work,

Jack.

**Lulworth001** · 11-14-2008, 01:46 PM

hey thanks for the reply

i haven't got a site that i can show you yet i'm still working on it. What do i do with the .js file? Where does it go?

Thanks again

**Schmoopy** · 11-14-2008, 02:41 PM

You need to include the following between the <head> tag.

and then put this code in:

Code:

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

/***********************************************
* DD Tab 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>

<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu #1 with 1st tab selected
ddtabmenu.definemenu("ddtabs2", 1) //initialize Tab Menu #2 with 2nd tab selected
ddtabmenu.definemenu("ddtabs3", 1) //initialize Tab Menu #3 with 2nd tab selected
ddtabmenu.definemenu("ddtabs4", 2) //initialize Tab Menu #4 with 3rd tab selected
ddtabmenu.definemenu("ddtabs5", -1) //initialize Tab Menu #5 with NO tabs selected (-1)

</script>

Make sure the .js file is in the same place as your HTML file, hope this helps.

Code:

ddtabmenu.definemenu("ddtabs1", 0)

the "ddtabs1" is the id of the div you have, and change the "0" to "-1" if you want no tab to be selected as default

Tell me if you have any more problems

**Lulworth001** · 11-14-2008, 06:06 PM

Hey

I'm still not getting the drop down part. when you hover over the button.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab 1Tab 2Tab 3Tab 4You can have</title>
<link rel="stylesheet" type="text/css" href="solidblocksmenu.css" />
<link rel="stylesheet" type="text/css" href="SpryTabbedPanels.css" />
<link rel="stylesheet" type="text/css" href="ddcolortabs.css" />
</head>

<body>

<div>
<div id="colortab" class="ddcolortabs">

<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS" rel="dropmenu1_a"><span>
CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/resources/" title="Partners" rel="dropmenu2_a"><span>
Partners</span></a></li>	
<li><a href="http://tools.dynamicdrive.com" title="Useful Tools"><span>Tools</span></a></li>	
</ul>
</div>

<div class="ddcolortabsline">&nbsp;</div>


<!--1st drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal 
CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS 
Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and 
containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and 
Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<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>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>

</div>

</body>

</html>

Even tried copying the code from the page source and it still doesn't work.

Any ideas

thanks

**Schmoopy** · 11-14-2008, 07:52 PM

You still haven't linked the .js file in the <head> section, you have to link the .js file to make it work, all you've linked so far is the CSS, add this to your <head> section:

Code:

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

/***********************************************
* DD Tab 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>

<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu #1 with 1st tab selected
ddtabmenu.definemenu("ddtabs2", 1) //initialize Tab Menu #2 with 2nd tab selected
ddtabmenu.definemenu("ddtabs3", 1) //initialize Tab Menu #3 with 2nd tab selected
ddtabmenu.definemenu("ddtabs4", 2) //initialize Tab Menu #4 with 3rd tab selected
ddtabmenu.definemenu("ddtabs5", -1) //initialize Tab Menu #5 with NO tabs selected (-1)

</script>

Thread: Help with Drop down menu

Thread Tools

Search Thread

Help with Drop down menu

Bookmarks

Bookmarks

Posting Permissions