Log in

View Full Version : 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:confused:
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:o="urn:schemas-microsoft-com:office:office">

<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>
<!--1st drop down menu -->
<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:


<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.


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.


<!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:


<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>