• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Regarding Menu with sub menus

 
Edward Durai
Ranch Hand
Posts: 223
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic