Need sub submenu for submenu?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • bhosalevivek
    New Member
    • May 2007
    • 3
    #1

    Need sub submenu for submenu?

    I did this code from Dynamic Drive DHTML. it's working properly, but now I need submenu for "Submenu 1.2", means when I take mouse on "Submenu 1.2" I need to display "Submenu 1.2.1". I try to do this but it could't work.

    hope you understand my Language and My problem.

    please help me.

    Code is below.

    [HTML]<html>
    <head>

    <style type="text/css">

    #dropmenudiv{
    position:absolu te;
    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: yellow;
    }

    </style>


    <script type="text/javascript">


    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="#">Submen u 1.1</a>'
    menu1[1]='<a href="#">Submen u 1.2</a>'
    menu1[2]='<a href="#">Submen u 1.3</a>'
    menu1[3]='<a href="#">Submen u 1.4</a>'

    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="#">Submen u 2.1</a>'
    menu2[1]='<a href="#">Submen u 2.2</a>'
    menu2[2]='<a href="#">Submen u 2.3</a>'

    //Contents for menu 2, and so on
    var menu3=new Array()
    menu3[0]='<a href="#">Submen u 3.1</a>'
    menu3[1]='<a href="#">Submen u 3.2</a>'
    menu3[2]='<a href="#">Submen u 3.3</a>'

    var menu4=new Array()
    menu4[0]='<a href="#">Submen u 4.1</a>'
    menu4[1]='<a href="#">Submen u 4.2</a>'
    menu4[2]='<a href="#">Submen u 4.3</a>'

    var menuwidth='165p x' //default menu width
    var menubgcolor='li ghtyellow' //menu bgcolor
    var disappeardelay= 250 //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclic k="yes" //hide menu when user clicks within menu?

    /////No further editting needed

    var ie4=document.al l
    var ns6=document.ge tElementById&&! document.all

    if (ie4||ns6)
    document.write( '<div id="dropmenudiv " style="visibili ty:hidden;width :'+menuwidth+'; background-color:'+menubgc olor+'" onMouseover="cl earhidemenu()" onMouseout="dyn amichide(event) "></div>')

    function getposOffset(wh at, offsettype){
    var totaloffset=(of fsettype=="left ")? what.offsetLeft : what.offsetTop;
    var parentEl=what.o ffsetParent;
    while (parentEl!=null ){
    totaloffset=(of fsettype=="left ")? totaloffset+par entEl.offsetLef t : totaloffset+par entEl.offsetTop ;
    parentEl=parent El.offsetParent ;
    }
    return totaloffset;
    }


    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.sty le.left=dropmen uobj.style.top= "-500px"
    if (menuwidth!="") {
    dropmenuobj.wid thobj=dropmenuo bj.style
    dropmenuobj.wid thobj.width=men uwidth
    }
    if (e.type=="click " && obj.visibility= =hidden || e.type=="mouseo ver")
    obj.visibility= visible
    else if (e.type=="click ")
    obj.visibility= hidden
    }

    function iecompattest(){
    return (document.compa tMode && document.compat Mode!="BackComp at")? document.docume ntElement : document.body
    }

    function clearbrowseredg e(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="ri ghtedge"){
    var windowedge=ie4 && !window.opera? iecompattest(). scrollLeft+ieco mpattest().clie ntWidth-15 : window.pageXOff set+window.inne rWidth-15
    dropmenuobj.con tentmeasure=dro pmenuobj.offset Width
    if (windowedge-dropmenuobj.x < dropmenuobj.con tentmeasure)
    edgeoffset=drop menuobj.content measure-obj.offsetWidth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest(). scrollTop : window.pageYOff set
    var windowedge=ie4 && !window.opera? iecompattest(). scrollTop+iecom pattest().clien tHeight-15 : window.pageYOff set+window.inne rHeight-18
    dropmenuobj.con tentmeasure=dro pmenuobj.offset Height
    if (windowedge-dropmenuobj.y < dropmenuobj.con tentmeasure){ //move up?
    edgeoffset=drop menuobj.content measure+obj.off setHeight
    if ((dropmenuobj.y-topedge)<dropme nuobj.contentme asure) //up no good either?
    edgeoffset=drop menuobj.y+obj.o ffsetHeight-topedge
    }
    }
    return edgeoffset
    }

    function populatemenu(wh at){
    if (ie4||ns6)
    dropmenuobj.inn erHTML=what.joi n("")
    }


    function dropdownmenu(ob j, e, menucontents, menuwidth){
    if (window.event) event.cancelBub ble=true
    else if (e.stopPropagat ion) e.stopPropagati on()
    clearhidemenu()
    dropmenuobj=doc ument.getElemen tById? document.getEle mentById("dropm enudiv") : dropmenudiv
    populatemenu(me nucontents)

    if (ie4||ns6){
    showhide(dropme nuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=g etposOffset(obj , "left")
    dropmenuobj.y=g etposOffset(obj , "top")
    dropmenuobj.sty le.left=dropmen uobj.x-clearbrowseredg e(obj, "rightedge")+"p x"
    dropmenuobj.sty le.top=dropmenu obj.y-clearbrowseredg e(obj, "bottomedge")+o bj.offsetHeight +"px"
    }

    return clickreturnvalu e()
    }

    function clickreturnvalu e(){
    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&&!dropmenu obj.contains(e. toElement))
    delayhidemenu()
    else if (ns6&&e.current Target!= e.relatedTarget && !contains_ns6(e .currentTarget, e.relatedTarget ))
    delayhidemenu()
    }

    function hidemenu(e){
    if (typeof dropmenuobj!="u ndefined"){
    if (ie4||ns6)
    dropmenuobj.sty le.visibility=" hidden"
    }
    }

    function delayhidemenu() {
    if (ie4||ns6)
    delayhide=setTi meout("hidemenu ()",disappearde lay)
    }

    function clearhidemenu() {
    if (typeof delayhide!="und efined")
    clearTimeout(de layhide)
    }

    if (hidemenu_oncli ck=="yes")
    document.onclic k=hidemenu

    </script>

    </head>

    <body>
    <a href="default.h tm" onClick="return clickreturnvalu e()" onMouseover="dr opdownmenu(this , event, menu1, '150px')" onMouseout="del ayhidemenu()">M enu 1</a> |

    <a href="default.h tm" onClick="return clickreturnvalu e()" onMouseover="dr opdownmenu(this , event, menu2, '150px')" onMouseout="del ayhidemenu()">M enu 2</a> |

    <a href="default2. htm" onClick="return dropdownmenu(th is, event, menu3, '200px')" onMouseout="del ayhidemenu()">M enu 3</a> (onclick)
    </body>
    </html>[/HTML]
    Last edited by gits; Dec 12 '07, 02:11 PM. Reason: added code tags
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      The first step is to create arrays for the sub-submenu.

      You will need to add the mouse events to the submenus to display the sub-submenus.

        Comment

        Previous template Next
        Working...