This week's book giveaway is in the Mac OS forum.
We're giving away four copies of a choice of "Take Control of Upgrading to Yosemite" or "Take Control of Automating Your Mac" and have Joe Kissell on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Regarding Menu with sub menus Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Regarding Menu with sub menus" Watch "Regarding Menu with sub menus" New topic
Author

Regarding Menu with sub menus

Edward Durai
Ranch Hand

Joined: Oct 09, 2004
Posts: 223
Hi I have html file like below. it contains one menu.

Here menu looking like

* Dynamic Drive
* JavaScript Kit & gt; sub menu1
* CSS Drive
* Coding Forums

But i want submenu 1 's submenu. (Just add one sub men)

e.g javascript & gt; sub menu 1 & gt; sub menu11 this is i expect

************************************************************************
My Original Html file is
**************************************************************************
& lt;html& gt;
& lt;head& gt;

& lt;style type=text/css& gt;

#dropmenudiv{
position:absolute;
background-color: #E3FFB0;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #C7FF5E;
}

/* Sample CSS definition for the example list. Remove if desired */
.navlist li {
list-style-type: square;
width: 135px;
background-color: #FFFFB9;
}

& lt;/style& gt;


& lt;script type=text/javascript& gt;

/***********************************************
* AnyLink Vertical Menu- � Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='& lt;a href="http://www.javascriptkit.com"& gt;JavaScript Kit& lt;/a& gt;'
menu1[1]='& lt;a href="http://www.freewarejava.com"& gt;Freewarejava.com& lt;/a& gt;'
menu1[2]='& lt;a href="http://codingforums.com"& gt;Coding Forums& lt;/a& gt;'
menu1[3]='& lt;a href="http://www.cssdrive.com"& gt;CSS Drive& lt;/a& gt;'
menu1[4]='& lt;a href="http://tools.dynamicdrive.com/imageoptimizer/"& gt;Image Optimizer& lt;/a& gt;'


//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='& lt;a href="http://www.javascriptkit.com/cutpastejava.shtml"& gt;Free JavaScripts& lt;/a& gt;'
menu2[1]='& lt;a href="http://www.javascriptkit.com/javaindex.shtml"& gt;JavaScript tutorials& lt;/a& gt;'
menu2[2]='& lt;a href="http://news.bbc.co.uk"& gt;JavaScript Reference& lt;/a& gt;'
menu2[4]='& lt;a href="http://www.javascriptkit.com/java/"& gt;Java Applets& lt;/a& gt;'
menu2[3]='& lt;a href="http://www.javascriptkit.com/dhtmltutors/"& gt;DHTML & CSS& lt;/a& gt;'
menu2[4]='& lt;a href="http://www.javascriptkit.com/howto/"& gt;Design Tutorials& lt;/a& gt;'

var disappeardelay=250 //menu disappear speed onmouseout1 (in miliseconds)
var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('& lt;div id="dropmenudiv" style="visibility:hidden;width: 160px" onmouseover1="clearhidemenu()" onmouseout1="dynamichide(event)"& gt;& lt;/div& gt;')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover1")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth & lt; dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y & lt; dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)& lt;dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

& lt;/script& gt;

& lt;/head& gt;

& lt;body& gt;
& lt;a href="default.htm" onmouseover1="dropdownmenu(this, event, menu1, '165px')" onmouseout1="delayhidemenu()"& gt;Webmaster Links& lt;/a& gt;& lt;br /& gt;

& lt;!-- Activate menu onclick1 instead
& lt;a href="default.htm" onclick1="return dropdownmenu(this, event, menu1, '165px')" onmouseout1="delayhidemenu()"& gt;Webmaster Links& lt;/a& gt;& lt;br /& gt;
--& gt;

& lt;ul class="navlist"& gt;
& lt;li& gt;& lt;a href="http://www.dynamicdrive.com"& gt;Dynamic Drive& lt;/a& gt;& lt;/li& gt;
& lt;li onmouseover1="dropdownmenu(this, event, menu2, '150px')" onmouseout1="delayhidemenu()"& gt;& lt;a href="http://www.javascriptkit.com"& gt;JavaScript Kit& lt;/a& gt; & lt;span style="position: relative; left: 30px"& gt;& gt;& lt;/span& gt;& lt;/li& gt;
& lt;li& gt;& lt;a href="http://www.cssdrive.com"& gt;CSS Drive& lt;/a& gt;& lt;/li& gt;
& lt;li& gt;& lt;a href="http://www.codingforums.com"& gt;Coding Forums& lt;/a& gt;& lt;/li& gt;
& lt;/ul& gt;
& lt;/body& gt;
& lt;/html& gt;
********************************************************************

Pls tell me, how to add this submenu and sub sub menu..

Thanks
edward


Thank You<br />Edward
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Why don;t you ask this on their forums since people know what the scripts do.

You would need to change the array and add the mouseovers. Not sure what problem you are having tod do that.

Eric
 
GeeCON Prague 2014
 
subject: Regarding Menu with sub menus