File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
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

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;

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 (
* This notice MUST stay intact for legal use
* Visit for full source code

//Contents for menu 1
var menu1=new Array()
menu1[0]='& lt;a href=""& gt;JavaScript Kit& lt;/a& gt;'
menu1[1]='& lt;a href=""& gt; lt;/a& gt;'
menu1[2]='& lt;a href=""& gt;Coding Forums& lt;/a& gt;'
menu1[3]='& lt;a href=""& gt;CSS Drive& lt;/a& gt;'
menu1[4]='& lt;a href=""& gt;Image Optimizer& lt;/a& gt;'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='& lt;a href=""& gt;Free JavaScripts& lt;/a& gt;'
menu2[1]='& lt;a href=""& gt;JavaScript tutorials& lt;/a& gt;'
menu2[2]='& lt;a href=""& gt;JavaScript Reference& lt;/a& gt;'
menu2[4]='& lt;a href=""& gt;Java Applets& lt;/a& gt;'
menu2[3]='& lt;a href=""& gt;DHTML & CSS& lt;/a& gt;'
menu2[4]='& lt;a href=""& 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(, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top"), "rightedge")+obj.offsetWidth+horizontaloffset+"px", "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)"hidden"

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=""& gt;Dynamic Drive& lt;/a& gt;& lt;/li& gt;
& lt;li onmouseover1="dropdownmenu(this, event, menu2, '150px')" onmouseout1="delayhidemenu()"& gt;& lt;a href=""& 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=""& gt;CSS Drive& lt;/a& gt;& lt;/li& gt;
& lt;li& gt;& lt;a href=""& 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..


Thank You<br />Edward
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
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.

I agree. Here's the link:
subject: Regarding Menu with sub menus
jQuery in Action, 3rd edition