Toon posts:

[javascript] uitklapmenu

Pagina: 1
Acties:
  • 61 views sinds 30-01-2008

Verwijderd

Topicstarter
Wat ik wil is dat als je op menu(1), menu(2) of menu(3) klikt hij niet een klein stukje naar beneden gaat. Dat is die divsub maar als ik dat weghaal krijg ik een foutmelding. Wie kan me helpen?
code:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<html>
<head>
<style type="text/css">
#divCont {position:absolute; z-index:1; left:0px; top:0px; height:400px; width:170px; visibility:hidden;}
.clTop   {position:absolute; z-index:1; width:170px; line-height:17px;}
.clSub   {position:absolute; z-index:1; left:0px; top:20px; width:170px; line-height:14px;}

#divCont .clTop a {color:#003366; font-family:verdana; font-size:11px; font-weight:bold; text-decoration:none;}
#divCont .clTop a:hover {color:#000000; text-decoration:none;}
#divCont .clTop .clSub a {color:#003366; font-family:verdana; font-size:11px; font-weight:normal; text-decoration:none;}
#divCont .clTop .clSub a:hover {color:#000000; text-decoration:none;}  
</style>
<script language="JavaScript" type="text/javascript">


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
}
var bw=new lib_bwcheck()



/*** variables you can configure ***/

FoldNumber = 4                    //How many toplinks do you have?
var stayFolded = false                //Stay open when you click a new toplink?
foldImg = 0                    //Do you want images (if not set to 0 and remove the images from the body)?
mainOffsetY = 10                    //Vertical space adjustment between the main items, in pixels.

//This is the default image.
//Remember to change the actual images in the page as well, but remember to keep the name of the image.
var unImg=new Image();
unImg.src='foldoutmenu_arrow.gif'

var exImg=new Image();                    //Making an image variable...
exImg.src='foldoutmenu_arrow_open.gif'    //...this is the source of the image that it changes to when the menu expands.

// NOTE: if you change the position of divCont from absolute to relative, you can put the foldoutmenu in a table.
// HOWEVER it will no longer work in netscape 4. If you wish to support netscape 4, you have to use absolute positioning.

/*** There should be no need to change anything beyond this. ***/

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

if(navigator.userAgent.indexOf('Opera')>-1 && document.getElementById){ //Opera 5 resize fix.
    scrX= innerWidth; scrY= innerHeight;
    document.onmousemove= function(){
        if(scrX<innerWidth-10 || scrY<innerHeight-10 || scrX>innerWidth+10 || scrY>innerHeight+10){
            scrX = innerWidth;
            scrY = innerHeight;
            initFoldout();
        }
    };
}

//object constructor...
function makeMenu(obj,nest){
    nest= (!nest)?"":'document.'+nest+'.';
    this.el= bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj);    
       this.css= bw.ns4?this.el:this.el.style;
    this.ref= bw.ns4?this.el.document:document;        
    this.x= (bw.ns4||bw.opera5)?this.css.left:this.el.offsetLeft;
    this.y= (bw.ns4||bw.opera5)?this.css.top:this.el.offsetTop;
    this.h= (bw.ie||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.opera5?this.css.pixelHeight:0;
    this.vis= b_vis;
    this.hideIt= b_hideIt;
    this.showIt= b_showIt;
    this.moveIt= b_moveIt;
    return this
}
//object methods...
function b_showIt(){this.css.visibility='visible'}
function b_hideIt(){this.css.visibility='hidden'}
function b_vis(){if(this.css.visibility=='hidden' || this.css.visibility=='HIDDEN' || this.css.visibility=='hide') return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px}

/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){
    if(bw.bw){
        if (!stayFolded){
            for (var i=0; i<oSub.length; i++){
                if (i!=num){
                    oSub[i].hideIt()
                    if (foldImg)oTop[i].ref["imgA"+i].src = unImg.src
                }
            }
            for(var i=1; i<oTop.length; i++){
                oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h)
            }
        }
        if (oSub[num].vis()){
            oSub[num].showIt()
            if (foldImg)oTop[num].ref["imgA"+num].src = exImg.src
        }else{
            oSub[num].hideIt()
            if(foldImg)oTop[num].ref["imgA"+num].src = unImg.src
        }
        for(var i=1; i<oTop.length; i++){ 
            if (!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+oSub[i-1].h+mainOffsetY) 
            else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+mainOffsetY)
        }
    }
}

/*********************************************************************
The init function... there should be no need to change anything here.
*********************************************************************/
function initFoldout(){
    //Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!!
    bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false
    if (bw.opera5) bw.ns6 = 0

    oTop = new Array()
    oSub = new Array()
    //Making the objects and hiding the subs...
    for (var i=0; i<FoldNumber; i++){
        oTop[i] = new makeMenu('divTop'+i,'divCont')
        oSub[i] = new makeMenu('divSub'+i,'divCont.document.divTop'+i)
        oSub[i].hideIt()
    }
    
    //Positioning the top objects...
    oTop[0].moveIt(0,0)
    for (var i=1; i<oTop.length; i++){
        oTop[i].moveIt(0, oTop[i-1].y+oTop[i-1].h+mainOffsetY)
    }
    
    //Making the containing menu object and showing it...
    oCont = new makeMenu('divCont')
    oCont.showIt()
}

// If the browser is ok, the script is started onload...
if(bw.bw) onload = initFoldout;
</script>
</head>

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

<div id="divCont"> <!-- These are the contents of the foldoutmenu. -->

<div id="divTop0" class="clTop"><a href="#" onclick="menu(0); return false" onfocus="this.blur()">Aktiviteiten</a><br>
<div id="divSub0" class="clSub">
    <a href="#">Databases</a><br>
    <a href="#">Financiele analyse</a><br>
    <a href="#">Conversie</a><br>
    <a href="#">Telemarketing</a><br>
    <a href="#">Verzuimmanagement</a><br>
</div><br>
</div>

<div id="divTop1" class="clTop"><a href="#" onclick="menu(1); return false" onfocus="this.blur()">Projecten</a><br>
<div id="divSub1" class="clSub">
</div><br>
</div>

<div id="divTop2" class="clTop"><a href="#" onclick="menu(2); return false" onfocus="this.blur()">Links</a><br>
<div id="divSub2" class="clSub">
</div><br>
</div>

<div id="divTop3" class="clTop"><a href="#" onclick="menu(3); return false" onfocus="this.blur()">Contact</a><br>
<div id="divSub3" class="clSub">
</div><br>
</div>
</div>


</body>
</html>

  • Helmet
  • Registratie: Januari 2002
  • Laatst online: 05-05 12:14
Wat heb je zelf al geprobeerd?
Heb je dit script zelf geschreven?
Met welke browser test je?

Icons are overrated


  • kleautviool
  • Registratie: Mei 2003
  • Laatst online: 21-05 19:24
Waarom denk je dat je vorige topic dicht is?

Maar als ik goed begrijp wat je wilt is dus een menu dat naar beneden uitklapt, en dat er dan telkens een submenu weergegeven word? Dan kan veeel korter. Gewoon toggelen tussen display: none en display: block;

Verwijderd

Topicstarter
Heb zelf al bijna alles geprobeerd maar kom er niet uit. Ik heb het ook nog niet getest maar dat komt later. Wil eerst dit probleem even oplossen.

  • Grijze Vos
  • Registratie: December 2002
  • Laatst online: 21-02 23:50
Aan de hand van die link van Anne heb ik vorige week nog zelf een suckerfish dropdown gemaakt. Tis niet zo moeilijk hoor. :)

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info


  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-05 18:53

Bosmonster

*zucht*

Daar zijn we natuurlijk niet voor.. bekijk de FAQ nog eens.

[rml][ W&G FAQ] Welkom in W&G: FAQ en Beleid[/rml]
Pagina: 1

Dit topic is gesloten.