HW15
Posts: 57
Joined: 3/12/2004
Status: offline
 |
2 DHTML Menus on 1 Page? - 9/3/2004 17:25:43
Is it possible to put two different DHTML menus on a single page? For example, I have a global horizontal dropdown menu across the top of my page that shows up on every page in the site (using .dwt). Then on certain pages I have a local left-side vertical tree menu related to those particular pages.
However, it seems that since they are completely different styled menus, with different CSS styles for each, that they are confilicting with eachother. The secondary left-side menu seems to be taking on the style properites of the main top menu.
I've tried making the local side menu and include file, but it is still being overrided by the main top menu's CSS style. In this way, they both show up, but the side menu doesn't work properly anymore. (Note: I also tried making the top menu an include file, but it doesn't even work at all as an include. So, I keep it hard-coded into my .dwt.)
Here is the code for the simple side menu that I use as an include page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style>
<!--
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(images/fold.gif)}
#foldinglist{list-style-image:url(images/list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--
/**
* Based on Folding Menu Tree
* Dynamic Drive (www.dynamicdrive.com)
* For full source code, installation instructions,
* 100's more DHTML scripts, and Terms Of
* Use, visit dynamicdrive.com
*
* Updated to support arbitrarily nested lists
* by Mark Quinn (mark@robocast.com) November 2nd 1998
*/
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
var head="display:''"
img1=new Image()
img1.src="images/fold.gif"
img2=new Image()
img2.src="images/open.gif"
function change(){
if(!document.all)
return
if (event.srcElement.id=="foldheader") {
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none") {
nested.style.display=''
event.srcElement.style.listStyleImage="url(images/open.gif)"
}
else {
nested.style.display="none"
event.srcElement.style.listStyleImage="url(images/fold.gif)"
}
}
}
document.onclick=change
//-->
</script>
</head>
<body>
<!-- Menu start -->
<ul>
<li id="foldheader"> News</li>
<ul id="foldinglist" style="&{head};" style>
<li> <a href="http://cnn.com">CNN</a></li>
<li> <a href="http://www.abcnews.com">ABC News</a></li>
</ul>
<li id="foldheader"> Technology</li>
<ul id="foldinglist" style="&{head};" style>
<li> <a href="http://www.links999.net">LINKS999</a></li>
</ul>
<li id="foldheader"> Software search</li>
<ul id="foldinglist" style="&{head};" style>
<li> <a href="http://simplythebest.net/shareware/">WWW shareware Search</a></li>
<li> <a href="http://simplythebest.net/shareware/hotspot.html">Hot Files</a></li>
<li id="foldheader"> DHTML Info</li>
<ul id="foldinglist" style="&{head};" style>
<li> <a href="http://www.simplythebest.net/shareware/programming/dhtml_tools.html">DHTML programs</a></li>
<li> <a href="http://simplythebest.net/scripts/">DHTML scripts</a></li>
</ul>
</ul>
</ul>
<!-- Menu end -->
<script language="JavaScript1.2">
<!--
/**
* Get cookie routine by Shelley Powers
* (shelley.powers@ne-dev.com)
*/
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (get_cookie(window.location.pathname) != ''){
var openresults=get_cookie(window.location.pathname).split(" ")
for (i=0 ; i < openresults.length ; i++){
foldinglist[openresults].style.display=''
document.all[foldinglist[openresults].sourceIndex -
1].style.listStyleImage="url(images/open.gif)"
}
}
if (document.all){
var nodelength=foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}
function check(){
for (i=0 ; i <= nodelength ; i++){
if (foldinglist.style.display=='')
openones=openones + " " + i
}
document.cookie=window.location.pathname+"="+openones
}
if (document.all)
document.body.onunload=check
//-->
</script>
</body>
</html>
And here is a snipit of the code for the main top menu that references 3 other files, including the menu.css style sheet and two .js files:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!-- #BeginEditable "doctitle" -->
<title>New Page 3</title>
<!-- #EndEditable -->
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<!-- Copyright © 2001 Garrett S. Smith (DHTML Kitchen) http://dhtmlkitchen.com/ - Email: admin@dhtmlkitchen.com -->
<!-- Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ -->
<style type="text/css" title="stylesheet.css">
@import "menu.css";
</style>
<script src="menubarAPI4.js" type="text/javascript"></script>
<script src="init.js" type="text/javascript"></script>
<body onload="init();monitor=document.getElementById('mon')" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
</body>
</html>
Is there a way to have two different DHTML menus on one page? Can anyone help?
Thanks in advance.
|
Printable Version 
New Messages
No New Messages
Hot Topic w/ New Messages
Hot Topic w/o New Messages
Locked w/ New Messages
Locked w/o New Messages
Post New Thread