DHTML Dynomat: Hierarchical Menu Parameters | 2

Hierarchical Menus Version 2 - Parameters
child positioning

The menus on the right should have the "look" defined on the previous page. As before, they are draggable.
Child Positioning Parameters
Child Offset (childOffset):
Defines the vertical distance that a child menu is positioned, relative to the top of the menu item that opened it. Obviously, the top of the child menu should fall within the opening menu item's screen height. Select a value or enter your own integer pixel value:
Other:
Child Overlap - Pixels (childOverlap):
Defines the horizontal distance that a child menu overlaps its parent menu. Select a value or enter your own integer pixel value:
Other:
Child Overlap - Percentage (perCentOver):
The child overlap can also be defined as a percentage of the parent menu's width. If this value is null, the childOverlap parameter is used. If this value is set, it overrides the value of childOverlap.
Other:
The text area below contains the parameters set in this browser session. You may copy them to your system's clipboard and paste into your HTML editor.
</td><td class="sans" rowspan="2">
in NS4:
<ol><li>Click the <font face="Arial,Verdana,Geneva" size="-1"><b>Select Code</b></font> button.
</li><li>With your cursor over the highlighted selection, use your platform's <font face="Arial,Verdana,Geneva" size="-1"><b>Copy</b></font> command, either through the <font face="Arial,Verdana,Geneva" size="-1"><b>File</b></font> menu on the toolbar or a mouse right-click.
</li><li>Use your system's <font face="Arial,Verdana,Geneva" size="-1"><b>Paste</b></font> command to insert the parameters into your editor.</li></ol>
in IE4:
<ol><li>Click the <font face="Arial,Verdana,Geneva" size="-1"><b>Select Code</b></font> button. The parameter list is copied to the clipboard automatically.
</li><li>Use your system's <font face="Arial,Verdana,Geneva" size="-1"><b>Paste</b></font> command to insert the parameters into your editor.</li></ol></td></tr><tr><td align="CENTER"><input type="BUTTON" value="Select Code" onclick="ta()"/></td></tr></table><p class="sans">It is highly recommended that you do not copy and paste at this time. Continue building the parameter list on the next page. The parameters defined on this page will be carried over. Copy and paste on the final tool page, when the complete parameter list has been created.</p>
<hr size="1" color="purple"/><p class="sans">On the next page, we'll define <a href="hierTool4.html">the timing parameter that hides the menus</a>.</p>
</form>
<br clear="ALL"/><p align="RIGHT"><a href="index.html" onmouseover="navOver('imButBot2','left',true)" onmouseout="navOver('imButBot2','left',false)" onmousedown="navPress('imButBot2','left',true)" onmouseup="navPress('imButBot2','left',false)"><img name="imButBot2" src="../../art/b_left.gif" width="18" height="18" border="0"/></a><a href="hierTool2.html" onmouseover="navOver('imButBot3','left',true)" onmouseout="navOver('imButBot3','left',false)" onmousedown="navPress('imButBot3','left',true)" onmouseup="navPress('imButBot3','left',false)"><img name="imButBot3" src="../../art/b_left.gif" width="18" height="18" border="0"/></a><img name="imButBot1" src="../../art/b_center.gif" width="18" height="18"/><a href="hierTool4.html" onmouseover="navOver('imButBot9','right',true)" onmouseout="navOver('imButBot9','right',false)" onmousedown="navPress('imButBot9','right',true)" onmouseup="navPress('imButBot9','right',false)"><img name="imButBot9" src="../../art/b_right.gif" width="18" height="18" border="0"/></a><a href="hierTool5.html" onmouseover="navOver('imButBot4','right',true)" onmouseout="navOver('imButBot4','right',false)" onmousedown="navPress('imButBot4','right',true)" onmouseup="navPress('imButBot4','right',false)"><img name="imButBot4" src="../../art/b_right.gif" width="18" height="18" border="0"/></a><a href="hierTool6.html" onmouseover="navOver('imButBot5','right',true)" onmouseout="navOver('imButBot5','right',false)" onmousedown="navPress('imButBot5','right',true)" onmouseup="navPress('imButBot5','right',false)"><img name="imButBot5" src="../../art/b_right.gif" width="18" height="18" border="0"/></a></p>

<p align="CENTER">Produced by Peter Belesis and</p>
 
All Rights Reserved. <a href="http://www.internet.com/corporate/legal.html">Legal Notices.</a><br/>
Created: June 17, 1998<br/>
Revised: July 21, 1998
<p align="CENTER"><small>URL: http://www.webreference.com/dhtml/dynomat/hiermenus/hierTool3.html</small></p><br/><script language="JavaScript1.2"><!--
if (isMenu) {
fmMenu=document.fmMenuGen;
tarea = fmMenu.tarea;
if (IE4) {
tarea.style.display = "none";
sarea.style.width = 250;
sarea.style.fontFamily = "Courier,monospace";
sarea.style.fontSize = "10pt";
sarea.style.backgroundColor = "#F7E8E8";
sarea.style.border = "3px blanchedalmond inset";
}
function ta(){
if (NS4){
tarea.onfocus=null;
tarea.focus();
taOLD = tarea.value;
tarea.select();
tarea.onchange = tc;
tarea.onblur = ff;
}
else {
xx=document.body.createTextRange(); 
xx.moveToElementText(sarea);
xx.select();
xx.execCommand("Copy");
}
}
function tc(){this.value=taOLD}
function fb(){this.blur()}
function ff(){
this.onblur = null;
this.onchange = null;
this.onfocus = fb;
}
arMenu1 = new Array("Contents",0,"Services",0,"Experts",1,"About",0)
arMenu1_3 = new Array("3-D Animation",0,"Design",0,"DHTML",0,"E-Commerce",0,"HTML",0,"Internet",0,"JavaScript",0)
currentX = currentY = 0;
whichEl = null;
function grabEl(e) {
whichEl = elMenu1;
other = elMenu1_3;
if (IE4) {
whichEl.style.pixelLeft = whichEl.offsetLeft;
whichEl.style.pixelTop = whichEl.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop); 
}
else {
currentX = e.pageX;
currentY = e.pageY;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = moveEl;
}
return false;
}
function moveEl(e) {
if (whichEl == null) { return true};
if (IE4) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
}
else {
newX = e.pageX;
newY = e.pageY;
}
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
if (IE4) {
whichEl.style.pixelLeft += distanceX;
whichEl.style.pixelTop += distanceY;
other.style.pixelLeft += distanceX;
other.style.pixelTop += distanceY;
event.returnValue = false;
}
else { whichEl.moveBy(distanceX,distanceY); other.moveBy(distanceX,distanceY);}
return false;
}
function checkEl() {
if (whichEl!=null) { return false }
}
function dropEl() {
if (NS4) { document.releaseEvents(Event.MOUSEMOVE) }
whichEl = null;
return false;
}
if (IE4) {
document.onmousemove = moveEl;
document.onselectstart = checkEl;
document.onmouseup = dropEl;
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='IE3.js'><\/SCRIPT>");
}
if (NS4) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='NS3.js'><\/SCRIPT>");
}
}
//--></script>                
                </div>
            <div id="right">
<div class="image square quad">
    <!--
AD position = C
OAS eqv. = 336x280
QUAD pos = Bob-FLEX(BOB)POS(TOP)
QUAD path = www.webreference.com
Page type = index
-->
<script type="text/javascript" language="JavaScript">
zzfocrender("203", "9530", "657017/657013/657012/581231/581034", "9", "300", "250", "", "", "");</script>
<noscript>
<a href="http://o1.qnsr.com/cgi/r?WT.qs_dlk=-@LQIArIZzwAAEesVowAAAAB;;;n=203;c=657017/657013/657012/581231/581034;s=9530;x=2304;f=3535271500;u=j;z=20120213224942" target="_blank">
<img border="0" width="300" height="250" src="http://o1.qnsr.com/cgi/x?;n=203;c=657017/657013/657012/581231/581034;s=9530;x=2304;f=3535271500;u=j;z=20120213224942" alt="Click here" /></a>
</noscript>
</div>
<div id="featured_tech_jobs">
</div><div class="image square quad">
    <!--
AD position = M
OAS eqv. = flex
QUAD pos = Bob-FLEX(BOB)POS(MIDDLE)
QUAD path = www.webreference.com
Page type = index
-->
<script type="text/javascript" language="JavaScript">
zzfocrender("203", "9530", "657021/657013/657012/581231/581034", "9", "300", "250", "", "", "");</script>
<noscript>
<a href="http://o1.qnsr.com/cgi/r?WT.qs_dlk=-@LQIArIZzwAAEesVowAAAAB;;;n=203;c=657021/657013/657012/581231/581034;s=9530;x=2304;f=3265373018;u=j;z=20120213224947" target="_blank">
<img border="0" width="300" height="250" src="http://o1.qnsr.com/cgi/x?;n=203;c=657021/657013/657012/581231/581034;s=9530;x=2304;f=3265373018;u=j;z=20120213224947" alt="Click here" /></a>
</noscript>
</div>
<div id="ssn_widget_container">
    <div id="ssn_widget_header">
        <h5><img border="0" align="absbottom" alt="Justtechjobs.com" src="http://images.justtechjobs.com/images/webreference.gif"/>Find a programming school near you</h5>
    </div>
    <div id="ssn_widget_content">
<form id="SSN" name="populate" action="/school-search-results.html" method="get">
	 
	 <label>Zip Code:</label>
	  <input name="pc" type="text" maxlength="5" value="" style="display:block;float:left;"/>
	 <br/><br/> 
	 <label>Subject:</label>
	  <select name="sub">
		<option value="all">- Select All Subjects -</option>
				<optgroup label="Computers and Technology">
		<option value="compapplications">Computer Applications</option>
		<option value="comeng">Computer Engineering</option>
		<option value="comscience">Computer Science</option>
		<option value="cnp" selected="selected">Computer Prog. - Software Dev.</option>
		<option value="gameprogramming">Computer Game Programming</option>
		<option value="webdesign">Web Design</option>
		<option value="webdevelopment">Web Development</option>
		<option value="internetsystems">Internet Systems</option>
        <option value="internetcertification">Internet Certification</option>
        <option value="databasedesign">Database Design and Development</option>
        <option value="infosystemsmgmt">Information Systems Management</option>
        <option value="itprojectmgmt">Information Technology Project Management</option>
		<option value="networkdesign">Network Design - Development</option>
        <option value="systemsanalyst">Systems Analyst</option>
	  </select>
	  <br/><br/>  
	  <label>Degree:</label>
	  <select name="qual">
	   <option value="all" selected="selected">- Select All Degrees -</option>
		<option value="associate">Associate's</option>
		<option value="bachelor">Bachelor's</option>
		<option value="master">Master's</option>
		<option value="doctoral">Doctoral</option>
		<option value="certificate">Certificates</option>
		<option value="diploma">Diplomas</option>
		<option value="coursework">Coursework</option>
		<option value="mba">MBA</option>
	  </select>
	<br style="clear:both;"/><br/>  
	 <input name="ct" type="radio" value="online" />Online
	  <input name="ct" type="radio" value="campus" />Campus
	  <input name="ct" type="radio" value="either" checked="checked"/>Both
      
	  <br/><br/> 
	  <input type="submit" value="Submit" />	
</form></div>
</div><div id="marketplace">
    <script type="text/javascript" src="http://jlinks.industrybrains.com/jsct?sid=829&ct=INTERNETCOM_DEVELOPER&tr=WEBREFERENCE&num=5&layt=7&fmt=simp"></script>
</div></div>

            </div>
        <div class="clear"></div>
        <div id="footer">
        <div id="footer_content">
    <div id="quad_bottom"class="quad">
        <!--
AD position = I
OAS eqv. = 468x60-2
QUAD pos = Leo-FLEX(LEO)POS(BOTTOM)
QUAD path = www.webreference.com
Page type = index
-->
<script type="text/javascript" language="JavaScript">
zzfocrender("203", "9530", "657019/657013/657012/581231/581034", "14", "728", "90", "", "", "");</script>
<noscript>
<a href="http://o1.qnsr.com/cgi/r?WT.qs_dlk=-@LQIArIZzwAAEesVowAAAAB;;;n=203;c=657019/657013/657012/581231/581034;s=9530;x=3584;f=8623888827;u=j;z=20120213224947" target="_blank">
<img border="0" width="728" height="90" src="http://o1.qnsr.com/cgi/x?;n=203;c=657019/657013/657012/581231/581034;s=9530;x=3584;f=8623888827;u=j;z=20120213224947" alt="Click here" /></a>
</noscript>
    </div>
    <div class="footer_listing">
         
    </div>
    <div class="footer_listing">
        <span class="list-header">WebReference</span>
        <ul>
            <li class="first"><a href="/js/tips">Tip Archive</a></li>
            <li><a href="/about.html">About</a></li>
            <li><a href="/sitemap.html">Sitemap</a></li>
            <li><a href="/contactUs.php">Contact</a></li>
            <li><a href="http://webreference.justtechjobs.com/">Jobs</a></li>
            <li><a href="http://member.internet.com/login">Subscribe</a></li>
        </ul>

    </div>
    <div class="footer_listing">
        <span class="list-header">Topics</span>
        <ul>
            <li class="first"><a href="/authoring">Web Authoring</a></li>
            <li><a href="/internet">The Internet and the Web</a></li>
            <li><a href="/multimedia">Multimedia</a></li>
            <li><a href="/programming">Web Programming</a></li>
            <li><a href="/promotion">Website Promotion and Marketing</a></li>
            <li><a href="/experts">Contributors</a></li>
        </ul>
    </div>
    <div class="footer_listing">
        <span class="list-header"><a href="http://www.developer.com"><img src="/img/dev.com_logo.png" alt="Developer.com"></a></span>
        <ul>
            <li class="first"><a href="/terms">Terms Of Service</a></li>
            <li><a href="/licensing">Licensing and Permissions</a></li>
            <li><a href="/privacy">Privacy Policy</a></li>
            <li><a href="/mediakit/index.html">Advertising</a></li>
            <li><a href="http://e-newsletters.developer.com/">Newsletters</a></li>
            <!--<li><a href="http://e-newsletters.developer.com/announcement_list.html">E-mail Offers</a></li> -->
        </ul>
    </div>    <div class="footer_listing">
         
    </div>
    <div class="clear"></div>
    <div id="copyright">
        Copyright © 2012 QuinStreet Inc. All Rights Reserved.
    </div>
</div>
        </div>

<!-- Google Analytics -->
<script src="/icom_includes/footers/scripts/ga.js"  type="text/javascript">
</script>
<script  type="text/javascript" >
<!--     hide from no js browsers
delete Array.prototype.itemValidation;
delete Array.prototype.isArray;
var superTracker = _gat._getTracker("UA-2838492-1");
superTracker._initData();
superTracker._trackPageview();

-->
</script>
<script  type="text/javascript" >
   var site_name =  location.hostname;
   if ( site_name.indexOf("www.") != 0 ) {
     site_name  = "www."+site_name ;
   }
   document.write("<SCR" + "IPT LANGUAGE='JavaScript1.2' SRC='/icom_includes/footers/sites/"+ site_name +".js' TYPE='text/javascript'><\/SCR" + "IPT>");
-->
</script>
<script  type="text/javascript" >
<!--     hide from no js browsers
   pageTracker._initData();
   pageTracker._trackPageview();
   // -->
</script>
<!-- End Google Analytics -->

        <!-- START VIBRANT --><!-- start Vibrant Media IntelliTXT script section -->
        <script type="text/javascript" src="http://webreferences.us.intellitxt.com/intellitxt/front.asp?ipid=26016"></script>
        <!-- end Vibrant Media IntelliTXT script section -->
        <!-- END VIBRANT -->

		<!-- CREATE AJAX CONTAINERS -->
		<div id="ajax_alpha"></div>
		<div id="ajax_beta"></div>

        <script language="javascript" src="/scripts/shCore.js"></script>
        <script language="javascript" src="/scripts/shBrushPhp.js"></script>

        <script language="javascript" src="/scripts/shBrushXml.js"></script>
        <script language="javascript" src="/scripts/shBrushJScript.js"></script>
        <script language="javascript">
            dp.SyntaxHighlighter.HighlightAll('code');
        </script>
        <!-- FOR LIKE BUTTON -->
        <script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
        <div id="fb-root"></div>
	
    <script language="JavaScript" type="text/javascript">
	var gDomain="www.qsstats.com";
	var gDcsId="dcs17vxkl10000wkxczu5l0wa_9y2e";
	var gFpc="WT_FPC";
	var gConvert=true;
	var gFpcDom = "webreference.com";
	if ((typeof(gConvert) != "undefined") && gConvert && (document.cookie.indexOf(gFpc + "=") == -1) && (document.cookie.indexOf("WTLOPTOUT=")==-1)) {
	    document.write("<SCR"+"IPT TYPE='text/javascript' SRC='http"+(window.location.protocol.indexOf('https:')==0?'s':'')+"://"+gDomain+"/"+gDcsId+"/wtid.js"+"'><\/SCR"+"IPT>");
	}
	function dcsAdditionalParameters() {}
    </script>

    <script type="text/javascript" src="/imageserver/common/webtrends.js"></script>

    <noscript><img alt="" border="0" name="DCSIMG" width="1" height="1" src="http://www.qsstats.com/dcs17vxkl10000wkxczu5l0wa_9y2e/njs.gif?dcsuri=/nojavascript&WT.js=No&WT.tv=8.0.2" /></noscript>
</body>
</html>
DHTML Dynomat: Hierarchical Menu Parameters | 2

Hierarchical Menus Version 2 - Parameterschild positioning

Hierarchical Menus Version 2 - Parameters
child positioning
