Using Dreamweaver I wont to create a XML Menu

I'm starting a new job soon and my first task will be to create a stylish drop down menu using XML. I'm a Dreamweaver girl! And therefore would like to be able to build it in this software. I'm also not sure if it will work with tables or css? I presume css? Also the page will be a template. Any advice??
sa_designerAsked:
Who is Participating?
 
thenoneConnect With a Mentor Commented:
<SCRIPT language=JavaScript1.2 src="/emarketing/webtools/homepage/js/menu_functions.js


="/emarketing/webtools/homepage/js/menu_functions.js <<<< These have to be configured to represent location on your site.

0
 
Jason C. LevineNo oneCommented:
Hi sa_designer,

There are a number of approaches to this problem, but none are built into Dreamweaver.  You could search the Exchange for a menu creator that loads the menu data from an XML document or go to a completely third party solution:

http://www.google.com/search?q=drop+down+menu+XML

You probably will have something that is CSS or javascript based that uses XML documents to populate the menus when all is said and done.
0
 
sa_designerAuthor Commented:
Hi there,

Ok I'm doing the job. You were right the XML menu is CSS & javascript based. The CSS sames to be in control of the text links and the java is control of the drop down menu.

Need help amending the menu:

How do I get the menu to roll over and form a tab and the drop down menu appears but when you move the mouse down the menu the roll over at the top is still present. At the moment it rolls over but then disappears when the mouse moves down the drop down.

Thanks
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Jason C. LevineNo oneCommented:
The answer depends on the method you are using to create the menus.  If you are using pure CSS, post the question and source code in the CSS area.  If javascript, post the question and source code there.

You could post it here, but I'm not great with javascript and since this question has been open a few days other experts are not actively looking at it.
0
 
thenoneCommented:
post code!
0
 
sa_designerAuthor Commented:
Javascript code

var sgXMLfile = new String()
var topnavxmlDoc = new ActiveXObject("Microsoft.XMLDOM")
topnavxmlDoc.async="false"

// variables for xml tags
var topic = topic
var subtopic = subtopic

/////////////////////////////////////
// LOAD UP MENU FUNCTION FILE THAT CONTAINS DISPLAY DIV FUNCTIONS ETC
//document.write('<SCRIPT language=JavaScript1.2 src="/emarketing/webtools/homepage/js/menu_functions.js" type=text/javascript></SCRIPT>')
//////////////////////////////////////

function TopNavMenu(sXMLfile){

//TopNavXMLfile = sXMLfile
topnavxmlDoc.load("/sarah/homepage/menu.xml")

document.write('<table width="610" border="0" cellspacing="0" cellpadding="10" bgcolor="#5F9BCF" align="left"><tr>')

for (y = 0; y < topnavxmlDoc.getElementsByTagName("menuitem").length; y++)
{
// IF NOT SUBMENU ITEM - PRINT MENUITEM NAME AND ADD LINK
if (topnavxmlDoc.getElementsByTagName("menuitem").item(y).getElementsByTagName("subtopic").length == 0)
{
document.write(topnavxmlDoc.getElementsByTagName("menuitem").item(y).getElementsByTagName("topic").item(0).text)
document.write('</td>')
}
else
{
document.write('<td width="30" class="topNav">')
document.write('<div id="testdiv" onmouseover="displaytopmenu(this,\'topnav'+y+'\');tn_cleartime()" onmouseout="tn_timeout()">&nbsp;<a href="#">')
document.write(topnavxmlDoc.getElementsByTagName("menuitem").item(y).getElementsByTagName("topic").item(0).text)
document.write('</a></div></td>')
}
// END LOOP ROUND XML NODES
}
document.write('</tr></table>')

/////////////////////////////////////////////////////////////////////////
// DIV CREATION
/////////////////////////////////////////////////////////////////////////
var topnavdisttemp;
topnavdisttemp = 180;
for (x = 0; x < topnavxmlDoc.getElementsByTagName("menuitem").length; x++)
{
if (topnavxmlDoc.getElementsByTagName("menuitem").item(x).getElementsByTagName("subtopic").length > 0)
{

document.write('<style> .topnav'+x+'{POSITION: absolute; LEFT:'+topnavdisttemp+'px; TOP: 98px; } </style>')

document.write('<DIV name="topnav'+x+'" ID="topnav'+x+'" STYLE="visibility:hidden; z-index:1" class="topnav'+x+'" onmouseover="tn_cleartime()" onmouseout="tn_timeout()">')

/////////////////////////////////////////////////////////////////////////
//FLYOUT BEGIN MAIN TABLE
/////////////////////////////////////////////////////////////////////////
document.write('<table border="0" cellpadding="0" cellspacing="0" width="75"><tr><td bgcolor="#5F9BCF" height="1" colspan="3"><img src="/emarketing/webtools/homepage/images/blank.gif" height="1"></td></tr>')
document.write('<tr><td width="1" bgcolor="#666666"><img src="/emarketing/webtools/homepage/images/blank.gif" width="1"></td><td width="100%">')
/////////////////////////////////////////////////////////////////////////
document.write('<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#666666">')
for (xx = 0; xx <topnavxmlDoc.getElementsByTagName("menuitem").item(x).getElementsByTagName("subtopic").length;xx++) {
document.write('<tr onmouseover="this.style.backgroundColor=\'#EFA333\'" onMouseout="this.style.backgroundColor=\'#ffffff\';"><td height="18"><a href="')
document.write(topnavxmlDoc.getElementsByTagName("menuitem").item(x).getElementsByTagName("link").item(xx).text+'" class="topnav_submenulink" onmouseover="tn_cleartime();">');
document.write(topnavxmlDoc.getElementsByTagName("menuitem").item(x).getElementsByTagName("subtopic").item(xx).text+'</a></td></tr>');
document.write('<tr><td ="#666666" height="1"><img src="/emarketing/webtools/homepage/images/blank.gif" height="1" width="1"></td></tr>')
}
document.write('</table>')
/////////////////////////////////////////////////////////////////////////////
//FLYOUT END MAIN TABLE
/////////////////////////////////////////////////////////////////////////////
document.write('</td><td width="1" bgcolor="#666666"><img src="/emarketing/webtools/homepage/images/blank.gif" width="1"></td></tr>')
document.write('</table>')
/////////////////////////////////////////////////////////////////////////////
document.write('</DIV>')
}
}
////////////////////////////////////////////////////////////////////////////////
// END FUNCTION
}

The CSS code

/* TOPNAV MENU ITEMS */
.topNav{
      font-family:  Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: bold;
      color: #ffffff;
      Text-decoration: none;
      text-transform: uppercase;
}
.topNav A:link {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: bold;
      COLOR: #ffffff;
      TEXT-DECORATION: none;
      text-transform: uppercase;
}
.topNav A:visited {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: bold;
      COLOR: #ffffff;
      TEXT-DECORATION: none;
      text-transform: uppercase;
}
.topNav A:hover {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: bold;
      COLOR: #333333;
      TEXT-DECORATION: none;
      text-transform: uppercase;
}
/* ------------------------------------ */

/* TOPNAV DROP DOWNS */

.topnav_submenulink
{
      BORDER-BOTTOM: #333333 1px;
      BORDER-LEFT: #333333 1px;
      BORDER-RIGHT: #333333 1px;
      BORDER-TOP: #333333 1px;
      COLOR: #333333;
      FONT-FAMILY: Arial, Helvetica, "sans serif";
      FONT-SIZE: 10px;
      FONT-WEIGHT: bold;
      PADDING-LEFT: 5px;
      TEXT-DECORATION: none;
      WIDTH: 140px;
      text-transform: capitalize;
}
.topnav_submenulink A:link {
      COLOR: #ffffff;
      TEXT-DECORATION: none;
}
.topnav_submenulink A:visited {
      COLOR: #ffffff;
      TEXT-DECORATION: none;
}
.topnav_submenulink:hover
{
    COLOR: #ffffff;
    TEXT-DECORATION: none;
      /*background-image: url("/emarketing/webtools/homepage/images/right_arrow.gif");
      background-repeat: no-repeat;
      background-position: 0% 25%;
      PADDING-LEFT: 5px;*/

}

/* ------------------------------------ */
0
 
thenoneCommented:
<SCRIPT language=JavaScript1.2 src="/emarketing/webtools/homepage/js/menu_functions.js


="/emarketing/webtools/homepage/js/menu_functions.js <<<< These have to be configured to represent location on your site.

please post the xml code.
0
 
sa_designerAuthor Commented:
menu_functions.js code:

var lasttopmenu = ""
var lastmenu = ""

function displaytopmenu(el,thetopmenu){
            
      if (lasttopmenu != "")
      {
            hideLayer(lasttopmenu)
      }
      
showtopLayer(el,thetopmenu);
lasttopmenu=thetopmenu;

}

function showtopLayer(el,thetopLayer)
{
      if(document.getElementById)
      {
            var thismenu = document.getElementById(thetopLayer);
            thismenu.style.visibility='visible';
            thismenu.style.pixelLeft = getPos(el,"Left");// + el.offsetWidth + 17;
            thismenu.style.pixelTop = getPos(el,"Top") + 21;
      }
      else if(document.all)
      {
            document.all[thetopLayer].style.visibility='visible';
      }
      else if(document.layers)
      {
            document.layers[thetopLayer].visibility='show';
      }
}

function getPos(el,sProp) {
      var iPos = 0
      while (el!=null) {
            iPos+=el["offset" + sProp]
            el = el.offsetParent
      }
      return iPos
}

function displaymenu(themenu){

      if (lastmenu != "")
      {
            hideLayer(lastmenu)
      }
      
showLayer(themenu);
lastmenu=themenu;

}

function showLayer(theLayer)
{
      if(document.getElementById)
      {
            document.getElementById(theLayer).style.visibility='visible';
      }
      else if(document.all)
      {
            document.all[theLayer].style.visibility='visible';
      }
      else if(document.layers)
      {
            document.layers[theLayer].visibility='show';
      }
}

function hideLayer(theLayer)
{
      if(document.getElementById)
      {
            document.getElementById(theLayer).style.visibility='hidden';
      }
      else if(document.all)
      {
            document.all[theLayer].style.visibility='hidden';
      }
      else if(document.layers)
      {
            document.layers[theLayer].visibility='hide';
      }
}

function colour(theobject,thecolour){
      theobject.style.backgroundColor=thecolour
}

var hideme;
var quickhideme;
var tn_hideme;
var tn_quickhideme;

function hideit()
{
      hideLayer(lastmenu);
}

function tn_hideit()
{
      hideLayer(lasttopmenu);
}

function cleartime()
{
      clearTimeout(hideme);
      //timeout();
}

function tn_cleartime()
{
      clearTimeout(tn_hideme);
      //timeout();
}

function timeout()
{
      hideme=setTimeout('hideit();',1000);
}

function tn_timeout()
{
      tn_hideme=setTimeout('tn_hideit();',1000);
}

function timeoutquick()
{
      if (lastmenu != "") {
            quickhideme=setTimeout('hideit();',10);
      }
}

function tn_timeoutquick()
{
      if (lasttopmenu != "") {
            tn_quickhideme=setTimeout('tn_hideit();',10);
      }
}


0
 
sa_designerAuthor Commented:
The website is an intranet on one of our servers.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.