?
Solved

Using Dreamweaver I wont to create a XML Menu

Posted on 2006-07-22
9
Medium Priority
?
250 Views
Last Modified: 2010-04-25
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??
0
Comment
Question by:sa_designer
  • 4
  • 3
  • 2
9 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 17161865
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
 

Author Comment

by:sa_designer
ID: 17174082
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 17177467
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
Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

 
LVL 8

Expert Comment

by:thenone
ID: 17180424
post code!
0
 

Author Comment

by:sa_designer
ID: 17182199
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
 
LVL 8

Expert Comment

by:thenone
ID: 17185253
<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
 

Author Comment

by:sa_designer
ID: 17190808
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
 
LVL 8

Accepted Solution

by:
thenone earned 1000 total points
ID: 17192402
<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
 

Author Comment

by:sa_designer
ID: 17192541
The website is an intranet on one of our servers.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question