• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 259
  • Last Modified:

Help creating a field that when clicked rolls up the sub fields underneath it . . . see explanation

First - Let me preface that I am a new beginner to Dreamweaver.

I'm attempting to create a field that is a category title for multiple subfields. Ideally I would like to be able to click on the Category and view the sub-categories that contain web content.

Example:

Consulting>
       Systems Integration
       Business Strategy
       Boutique
       Niche

When a user clicks on Consulting, it should display the 4 sub categories of consulting. The sub-categories are anchored to detail that is further down the webpage. (I've already created the anchors, but I would like to create the behavior that displays the sub-categories only when the main category (ie. consulting) is clicked.

Any assistance you can provide is greatly appreciated!
0
dlapinsk
Asked:
dlapinsk
  • 5
  • 2
1 Solution
 
Onyx23Commented:
Something like this should work fine for you. You can move the styles to an external location for more clean code if ya want :>)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JScript">
<!-- // DDMenu

  var eOpenMenu = null;
  function OpenMenu(eSrc,eMenu){
    eMenu.style.left = eSrc.parentElement.offsetLeft + divMenuBar.offsetLeft;
    eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
    eMenu.style.visibility = "visible";
    eOpenMenu = eMenu;
  }

  function CloseMenu(eMenu){
    eMenu.style.visibility = "hidden";
    eOpenMenu = null;
  }

  function MenuBar_over(){
    var eSrc = window.event.srcElement;
    if ("A" == eSrc.tagName.toUpperCase()){
      var eMenu = document.all[eSrc.parentElement.id.replace("tdMenuBarItem","divMenu")];
      if (eOpenMenu && eOpenMenu != eMenu){
        CloseMenu(eOpenMenu);}
      if (eMenu){
              OpenMenu(eSrc,eMenu);}
    }
  }

  function MenuBar_out(){
    var eTo = window.event.toElement;
    if (eOpenMenu && eTo && !eOpenMenu.contains(eTo) && "tblMenuBar" != eTo.id){
      CloseMenu(eOpenMenu)}
      }

  function Menu_out(){
    var eSrc = window.event.toElement;
    if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc)){
      CloseMenu(eOpenMenu)}
      }

//-->
</script>
<style type="text/css">
      BODY { font-family:"Verdana, Arial, Helvetica, sans-serif"; font-size:70%;}

      DIV#divMenuBar { background-color:#009999; }
      TABLE#tblMenuBar TD { font-size:60%; color:#FFFFFF; padding:0px 5px 0px 5px; cursor:default; }
      TABLE#tblMenuBar TD.clsMenuBarItem { font-weight:bold; cursor:default; }

      /* These two style rules added for links in MenuBar */
      TABLE#tblMenuBar TD.clsMenuBarItem A { text-decoration:none; color:#000000; font-weight:bold; }
      TABLE#tblMenuBar TD.clsMenuBarItem A:hover { color:#FFFFFF; }
      DIV.clsMenu {
            font-size:90%; background-color:#009999;
            position:absolute; visibility:hidden; width:130px;
            padding:5px 5px 5px 8px; border-top:1 white solid;
      }
      DIV.clsMenu A { text-decoration:none; color:#000000; font-weight:bold; }
      DIV.clsMenu A:hover { color:#FFFFFF; }
.style1 {font-size: 12%}
</style>
</head>

<body>
<ddMenu>
<DIV ID="ddMenuLayer" STYLE="position:absolute; left:0px; top:120px; width:100%; height:35px; z-index:1">
  <DIV ID="divMenuBar" ONMOUSEOVER="if (document.all) MenuBar_over();" ONMOUSEOUT="if (document.all) MenuBar_out();" ONSELECTSTART="return false;">
    <TABLE WIDTH="100%" BORDER="0" bgcolor="#999999" ID="tblMenuBar">
      <TR>
        <TD CLASS="clsMenuBarItem" ID="tdMenuBarItemHome"><A TARGET="_self" HREF="index.htm">Home</A> </TD>
        <TD>|</TD>
        <TD CLASS="clsMenuBarItem" ID="tdMenuBarItemConsulting"><A HREF="#" TARGET="_blank" class="style1">Consulting</A> </TD>
        <TD>|</TD>
        <TD WIDTH="100%">&nbsp;</TD>
      </TR>
    </TABLE>
  </DIV>
  <DIV CLASS="clsMenu" ONMOUSEOUT="Menu_out();" ID="divMenuConsulting">
    <DIV CLASS="clsMenuSpacer"></DIV>
    <DIV> <A TARGET="" HREF="#">Niche</A> </DIV>
    <DIV> <A TARGET="" HREF="#">Boutique</A> </DIV>
    <DIV> <A TARGET="" HREF="#">Systems Integration</A> </DIV>
    <DIV> <A TARGET="" HREF="#">Business Strategy</A> </DIV>
  </DIV>
</DIV>
</ddmenu>
</body>
</html>
0
 
Onyx23Commented:
Opps = a little more readable:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JScript">
<!-- // Dropdown menu example

  var eOpenMenu = null;
  function OpenMenu(eSrc,eMenu){
    eMenu.style.left = eSrc.parentElement.offsetLeft + divMenuBar.offsetLeft;
    eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;
    eMenu.style.visibility = "visible";
    eOpenMenu = eMenu;
  }

  function CloseMenu(eMenu){
    eMenu.style.visibility = "hidden";
    eOpenMenu = null;
  }

  function MenuBar_over(){
    var eSrc = window.event.srcElement;
    if ("A" == eSrc.tagName.toUpperCase()){
      var eMenu = document.all[eSrc.parentElement.id.replace("tdMenuBarItem","divMenu")];
      if (eOpenMenu && eOpenMenu != eMenu){
        CloseMenu(eOpenMenu);}
      if (eMenu){
              OpenMenu(eSrc,eMenu);}
    }
  }

  function MenuBar_out(){
    var eTo = window.event.toElement;
    if (eOpenMenu && eTo && !eOpenMenu.contains(eTo) && "tblMenuBar" != eTo.id){
      CloseMenu(eOpenMenu)}
      }

  function Menu_out(){
    var eSrc = window.event.toElement;
    if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc)){
      CloseMenu(eOpenMenu)}
      }

//-->
</script>
<style type="text/css">
      BODY { font-family:"Verdana, Arial, Helvetica, sans-serif"; font-size:70%;}

      DIV#divMenuBar { background-color:#009999; }
      TABLE#tblMenuBar TD { font-size:12px; color:#A3B2CC; padding:0px 5px 0px 5px; cursor:default; }
      TABLE#tblMenuBar TD.clsMenuBarItem { font-weight:bold; cursor:default; }

      /* These two style rules added for links in MenuBar */
      TABLE#tblMenuBar TD.clsMenuBarItem A { text-decoration:none; color:#000000; font-weight:bold; }
      TABLE#tblMenuBar TD.clsMenuBarItem A:hover { color:#A3B2CC; }
      DIV.clsMenu {
            font-size:12px; background-color:#009999;
            position:absolute; visibility:hidden; width:130px;
            padding:5px 5px 5px 8px; border-top:1 white solid;
      }
      DIV.clsMenu A { text-decoration:none; color:#000000; font-weight:bold; }
      DIV.clsMenu A:hover { color:#FFFFFF; }
.style1 {font-size: 12px}
</style>
</head>

<body>
<ddMenu>
<DIV ID="ddMenuLayer" STYLE="position:absolute; left:0px; top:120px; width:100%; height:35px; z-index:1">
  <DIV ID="divMenuBar" ONMOUSEOVER="if (document.all) MenuBar_over();" ONMOUSEOUT="if (document.all) MenuBar_out();" ONSELECTSTART="return false;">
    <TABLE WIDTH="100%" BORDER="0" bgcolor="#999999" ID="tblMenuBar">
      <TR>
        <TD CLASS="clsMenuBarItem" ID="tdMenuBarItemHome"><A TARGET="_self" HREF="index.htm">Home</A> </TD>
        <TD>|</TD>
        <TD CLASS="clsMenuBarItem" ID="tdMenuBarItemConsulting"><A HREF="#" TARGET="_blank" class="style1">Consulting</A> </TD>
        <TD>|</TD>
        <TD WIDTH="100%">&nbsp;</TD>
      </TR>
    </TABLE>
  </DIV>
  <DIV CLASS="clsMenu" ONMOUSEOUT="Menu_out();" ID="divMenuConsulting">
    <DIV CLASS="clsMenuSpacer"></DIV>
    <DIV> <A TARGET="" HREF="#">Niche</A> </DIV>
    <DIV> <A TARGET="" HREF="#">Boutique</A> </DIV>
    <DIV> <A TARGET="" HREF="#">Systems Integration</A> </DIV>
    <DIV> <A TARGET="" HREF="#">Business Strategy</A> </DIV>
  </DIV>
</DIV>
</ddmenu>
</body>
</html>
0
 
dlapinskAuthor Commented:
I think the code is a little over my head. Is there anyway you would walk me through how to do this using the tools within Dreamweaver and less of the code?
0
Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

 
Onyx23Commented:
Go to Macromedia website (extensions section)

Download the extension called:   Dropdown Menu Builder for IE

 (that's just what I use but understand that there are NUMEROUS extensions for drop down menus all having their specific building procedures/methods)

---> then you'll need to install the extension in Dreamweaver:

To install and manage extensions:
On the Macromedia Exchange website, click the download link for an extension.
Your browser may let you choose to open and install it directly from the site or save it to disk.

If you are opening the extension directly from the site, the Extension Manager handles the installation automatically.
If you are saving the extension to disk, a good place to save the extension package file (.mxp) is the Downloaded Extensions folder within the Dreamweaver application folder on your computer.
Double-click the extension package file, or open the Extension Manager (located in under Commands menu in top menu bar)  and select File > Install Extension.
The extension is installed in Dreamweaver. Some extensions aren’t accessible until Dreamweaver has restarted; you may be prompted to quit and restart the application.

 Once the Extension (of your choice) is installed you can go to Commands and click the name of the extension (you should see it in the 'Commands' drop down menu list) and build it as it instructs - they're pretty simple and self explainatory. (Be sure to have the page OPEN where you want the menu to be placed to)

NOTE: If you don't see it in the Commands menu then check  Winodws --> Behaviors ---> then click the plus symbol in the Behaviors panel and look for the extension name there.

Hope this helps!
 

0
 
dlapinskAuthor Commented:
thanks for all of the help. Using the behaviors, I am successfully to the point where I have created a pop-up menu showing my sub-categories (system integration, business strategy, boutique, niche). If I am maintaining the content all within the same page, is there a way to link to the the data within the same page (similar to an anchor) or do you have to link to a separate page?
0
 
Onyx23Commented:
Use (or rather place) either # or javascript:    in the link field :>)  
0
 
Onyx23Commented:
oops I just now saw where you said "anchor"  

You mean anchors to pages?,  targets? what exactly do you want to anchor?

I would need to know the TYPE of extension you're using otherwise I would have to give you help in code (which I know you don't want)

:>)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now