Solved

Using Dreamweaver I wont to create a XML Menu

Posted on 2006-07-22
9
231 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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

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…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

830 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