• 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;

background-color: #E3FFB0;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;

#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;
return totaloffset;

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover1")
else if (e.type=="click")

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
if (windowedge-dropmenuobj.x-obj.offsetWidth & lt; dropmenuobj.contentmeasure)
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
if (windowedge-dropmenuobj.y & lt; dropmenuobj.contentmeasure){ //move menu up?
if ((dropmenuobj.y-topedge)& lt;dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
return edgeoffset

function populatemenu(what){
if (ie4||ns6)

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

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))
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)

function delayhidemenu(){
if (ie4||ns6)

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

& 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..

Eric Pascarello
Posts: 15385
  • 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.

  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!