Solved

Using Dreamweaver I wont to create a XML Menu

Posted on 2006-07-22
9
238 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

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 …
There are cases when e.g. an IT administrator wants to have full access and view into selected mailboxes on Exchange server, directly from his own email account in Outlook or Outlook Web Access. This proves useful when for example administrator want…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …

688 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