SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2001
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dhtml-menu - submenus?? please help!!!!!!!

    I have the following script from www.bratta.com for a circle menu - it runs well, but I want to change a few things -
    I want to have submenus - they shall be shown after having clicked a button and the buttons have gone in the center and the submenus shall be shown and they shall be links - open in the same page - menu shall not be removed
    And when the buttons are clicked and go in the center , they shall change (p.ex. form webkmu in home) are in the circle, the move und mout - functions shall not work - more exactly - the background-image shall stay! Please help, it's really important and urgent for me - if you don't know the whole solution, please give me some tips!!!

    I have succedded in making "circles" that are the starting points for submenus, but I don't know how to place them so, that it looks good and how to make them into links and third - how to combine the buttons and the submenus - if I click on a button (which is a main link like services) the submenus shall be and link p.ex. to kmu, web,....

    It would also be fine to have different numbers of submenus - according to the buttons

    Please tell me, if it isn't clear what I want, then I will try to be more exactly!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>webkmu - mit Ihrer Website zum Erfolg</title>
    <link href="stylesheet.css" rel=stylesheet type="text/css">
    <style type="text/css">
    DIV.clButtons{position:absolute; width:22; height:22; left:98; top:6; visibility:inherit}
    #divCont{position:absolute;width:220; height:220; clip:rect(0,220,220,0); z-index:30; visibility:hidden}
    #divCenter{position:absolute; width:220; height:220; left:10; top:10; visibility:inherit}
    </style>
    <script language="JavaScript" type="text/javascript">
    /**********************************************************************************
    CircleMenu
    * Copyright (C) 2001 Thomas Brattli
    * This script was released at DHTMLCentral.com
    * Visit for more great scripts!
    * This may be used and changed freely as long as this msg is intact!
    * We will also appreciate any links you could give us.
    *
    * Made by Thomas Brattli
    *********************************************************************************/

    function lib_bwcheck(){ //Browsercheck (needed)
    this.ver=navigator.appVersion
    this.agent=navigator.userAgent
    this.dom=document.getElementById?1:0
    this.opera5=this.agent.indexOf("Opera 5")>-1
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6
    this.mac=this.agent.indexOf("Mac")>-1
    this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    return this
    }
    bw=new lib_bwcheck()


    /***************************************************************************
    Object constructors; making Cross-browser object of the buttons
    ****************************************************************************/
    //Debug function ******************
    function lib_message(txt){alert(txt); return false}

    //Lib objects ********************
    function lib_obj(obj,nest,o){
    if(!bw.bw) return lib_message('Old browser')
    nest=(!nest) ? "":'document.'+nest+'.'
    if(o&&bw.ns4) this.evnt=o;
    else this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
    if(!this.evnt) return lib_message('The layer does not exist ('+obj+') - \nIf your using Netscape please check the nesting of your tags!')
    this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt; this.ref=bw.dom||bw.ie4?document:this.css.document;
    this.x=this.css.left||this.css.pixelLeft||this.evnt.offsetLeft||0; this.y=this.css.top||this.css.pixelTop||this.evnt.offsetTop||0
    this.w=this.evnt.offsetWidth||this.css.clip.width||this.ref.width||this.css.pixelWidth||0; this.h=this.evnt.offsetHeight||this.css.clip.height||this.ref.height||this.css.pixelHeight||0
    this.c=0 //Clip values
    if((bw.dom || bw.ie4) && this.css.clip) {
    this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1);
    this.c=this.c.split(' '); for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}
    }
    this.ct=this.css.clip.top||this.c[0]||0; this.cr=this.css.clip.right||this.c[1]||this.w||0
    this.cb=this.css.clip.bottom||this.c[2]||this.h||0; this.cl=this.css.clip.left||this.c[3]||0
    this.obj = obj + "Object"; eval(this.obj + "=this")
    return this
    }
    //Moving object to **************
    lib_obj.prototype.moveIt = function(x,y){this.x=x;this.y=y; this.css.left=x;this.css.top=y}

    //Showing object ************
    lib_obj.prototype.showIt = function(){this.css.visibility="visible"}

    //Document size object ********
    function lib_doc_size(){
    this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
    this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
    if(!this.x2||!this.y2) return message('Document has no width or height')
    this.x50=this.x2/2;this.y50=this.y2/2;
    return this;
    }

    /***************************************************************************
    Main variables
    ****************************************************************************/
    //The radius for the circle
    radius=96
    //Start angle
    startAngle=90
    //Speed in milliseconds
    circleSpeed=20
    //angle to move per timeout
    moveAngle=5


    /***************************************************************************
    Initiating the buttons and starts the circlemove
    ****************************************************************************/
    var xcenter,ycenter,menuState,circleGoing;
    function init(num){
    page=new lib_doc_size()
    //Making a simple object for the divCont
    oCont=new lib_obj('divCont')
    oCenter=new lib_obj('divCenter','divCont')
    //Moving the divCont to the center of the page.page.x2/3-110
    oCont.moveIt(page.x2/2-110,page.y2/2-110)
    //Takes care of the resizing.
    window.onresize=resized;
    //Making an array to hold the button objects
    oBut=new Array()

    //Making button objects, arguments: divName,nested div,anglestop
    for(i=0;i<6;i++){
    oBut[i]=new lib_obj('div'+i,'divCont')
    }
    //Setting stop angles for each button
    oBut[0].stop=0
    oBut[1].stop=30
    oBut[2].stop=-30
    oBut[3].stop=-90
    oBut[4].stop=-150
    oBut[5].stop=-210
    //Moves the button; ie5 bugfix
    oBut[0].moveIt(98,6)
    //Starts the circlemove
    xcenter = oBut[0].x - radius*Math.cos(startAngle*Math.PI/180)
    ycenter = oBut[0].y + radius*Math.sin(startAngle*Math.PI/180)
    oCont.showIt() //Showing cont layer
    circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')

    }
    /***************************************************************************
    Moves the buttons in a circle
    ****************************************************************************/
    function circleGo(radius,angleinc,angle,endangle,xcenter,ycenter,fn,lnk) {
    //if angleinc < endangle-angle (no matter if it's positive or negative numbers)
    if ((Math.abs(angleinc)<Math.abs(endangle-angle))) {
    circleGoing=true
    angle += angleinc
    var x = xcenter + radius*Math.cos(angle*Math.PI/180)
    var y = ycenter - radius*Math.sin(angle*Math.PI/180)
    for(i=1;i<oBut.length;i++){
    //if angle are bigger then the stop angle of each button
    if(angle>=oBut[i].stop) oBut[i].moveIt(x,y)
    }
    setTimeout("circleGo("+radius+","+angleinc+","+angle+","+endangle+","+xcenter+","+ycenter+",'"+fn+"','"+lnk+"')",circleSpeed)
    }else{
    circleGoing=false
    eval(fn)
    }
    }
    function resized(){
    page2=new lib_doc_size()
    if(page2.x2!=page.x2 || page2.y2!=page.y2){
    if(bw.ns4) location.reload() //If the width or height have changed we reload the page.
    else init()
    }
    }
    /***************************************************************************
    When click on the buttons
    ****************************************************************************/
    var zIndex=5
    target='content'
    function mclick(num,lnk){
    //If it's not moving already
    if(!circleGoing){
    //Added feature; the clicked buttons stays on top!
    zIndex++
    oBut[num].css.zIndex=zIndex
    //Checks the state of the menu and circles it the right way
    if(menuState) circleGo(radius,moveAngle,oBut[5].stop,startAngle+5,xcenter,ycenter,'moveCenter("'+lnk+'")')
    else moveFromCenter(lnk)
    }
    }
    //Moving the buttons to the center
    function moveCenter(lnk){
    if(oBut[0].y<95){
    for(i=0;i<oBut.length;i++){
    oBut[i].moveIt(oBut[i].x+(i-2.5),oBut[i].y+3)
    }
    setTimeout("moveCenter('"+lnk+"')",30)
    }else{
    menuState=0
    if(lnk && String(lnk)!="undefined") top[target].location.href=lnk

    //HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
    }
    }
    //Moving the buttons from center
    function moveFromCenter(lnk){
    if(oBut[0].y>6){
    for(i=0;i<oBut.length;i++){
    oBut[i].moveIt(oBut[i].x-(i-2.5),oBut[i].y-3)
    }
    setTimeout("moveFromCenter('"+lnk+"')",30)
    }else{
    circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1',lnk)
    menuState=0
    if(lnk && String(lnk)!="undefined") top[target].location.href=lnk
    }
    }
    /***************************************************************************
    Mouseover and out on the buttonsoCenter.ref["imgCenter"].src=preCenter[num].srcoCenter.ref["imgCenter"].src='bilder/logo.gif'
    ****************************************************************************/
    function preLoad(num,path,path2){
    for(i=0; i<=num; i++){
    this[i]=new Image()
    this[i].src='bilder/'+path+(i+1)+path2+'.gif'
    }
    return this
    }
    preCenter=new preLoad(5,'center',''); pre=new preLoad(5,'','');
    preb=new preLoad(5,'','_b'); prec=new preLoad(5,'','_c')



    function mover(num){
    oBut[num].ref["img"+num].src=prec[num].src
    oCenter.ref["imgCenter"].src=preCenter[num].src
    }
    function mout(num){
    oBut[num].ref["img"+num].src='bilder/'+(num+1)+'.gif'
    oCenter.ref["imgCenter"].src='bilder/logo-back.gif'

    }
    //Starting the menu on pageload.
    onload=init;
    </script>

    </head>

    <body marginleft="0" marginheight="0">

    <br><br><br>


    <div id="divCont">
    <!-- Circle image -->
    <div id="divCenter"><a href="content.html" target="content" border=0><img src="bilder/logo.gif" name="imgCenter" width="200" height="200" border=0 alt=""></a></div>
    <!-- Buttons -->
    <div id="div0" class="clButtons"><a href="#" onclick="mclick(0,'technical/technical.html'); parent.focus(); return false" onmouseover="mover(0)" onmouseout="mout(0)"><img src="bilder/1.gif" name="img0" width=22 height=22 border=0 alt="Technical Info"></a></div>
    <div id="div1" class="clButtons"><a href="#" onclick="mclick(1,'customers.html'); parent.focus(); return false" onmouseover="mover(1)" onmouseout="mout(1)"><img src="bilder/2.gif" name="img1" width=22 height=22 border=0 alt="Our Customers"></a></div>
    <div id="div2" class="clButtons"><a href="#" onclick="mclick(2,'retail.html'); parent.focus(); return false" onmouseover="mover(2)" onmouseout="mout(2)"><img src="bilder/3.gif" name="img2" width=22 height=22 border=0 alt="Retail Products"></a></div>
    <div id="div3" class="clButtons"><a href="#" onclick="mclick(3,'queries.html'); parent.focus(); return false" onmouseover="mover(3)" onmouseout="mout(3)"><img src="bilder/4.gif" name="img3" width=22 height=22 border=0 alt="Questions, quotes & links"></a></div>
    <div id="div4" class="clButtons"><a href="#" onclick="mclick(4,'aboutus.html'); parent.focus(); return false" onmouseover="mover(4)" onmouseout="mout(4)"><img src="bilder/5.gif" name="img4" width=22 height=22 border=0 alt="About us"></a></div>
    <div id="div5" class="clButtons"><a href="#" onclick="mclick(5,'eshop.html'); parent.focus(); return false" onmouseover="mover(5)" onmouseout="mout(5)"><img src="bilder/6.gif" name="img5" width=22 height=22 border=0 alt="e-commerce shop"></a></div>
    </div>

    </body>
    </html>
    signature

  2. #2
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is a little confusing what you want to happen! IMO because you want to add quite a major chunk of code to it (the submenus) then you might be better off emailing the script creator and asking him to modify it.
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •