Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

javascript menu

None
2 antwoorden
  • <Script language="JavaScript">
    <!–
    function scrollit(seed) {
    var m1 = " ";
    var m2 = " ";
    var m3 = " ";
    var m4 = " ";
    var msg=m1+m2+m3+m4;
    var out = " ";
    var c = 1;
    if (seed > 100) {
    seed–;
    cmd="scrollit("+seed+")";
    timerTwo=window.setTimeout(cmd,100);
    }
    else if (seed <= 100 && seed > 0) {
    for (c=0 ; c < seed ; c++) {
    out+=" ";
    }
    out+=msg;
    seed–;
    window.status=out;
    cmd="scrollit("+seed+")";
    timerTwo=window.setTimeout(cmd,100);
    }
    else if (seed <= 0) {
    if (-seed < msg.length) {
    out+=msg.substring(-seed,msg.length);
    seed–;
    window.status=out;
    cmd="scrollit("+seed+")";
    timerTwo=window.setTimeout(cmd,100);
    }
    else {
    window.status=" ";
    timerTwo=window.setTimeout("scrollit(100)",75);
    }
    }
    }
    //–>
    </SCRIPT>

    <script language="JavaScript">

    function StatusFlash(yon)
    {
    if (yon == 'yes')
    {
    window.status = 'www.sipro.myweb.nl…….. ' //Dit is de String die het eerst getoond wordt.
    setTimeout("StatusFlash('no')",1200) /*De 1200 staat voor het aantal milliseconden dat de String getoond wordt deze kan eventueel verandert worden…*/
    }
    else
    {
    window.status = 'Veel, heel veel javascript ' //Dit is de tweede string, verander naar ' ' voor knipperen.
    setTimeout("StatusFlash('yes')",1200) //Ook hier kan het aantal milliseconden aangepast worden.
    }
    }
    </script>







    <STYLE type=text/css>DIV.clSlide {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; Z-INDEX: 10; LEFT: 0px; PADDING-BOTTOM: 3px; WIDTH: 138px; CLIP: rect(0px 138px 22px 0px); PADDING-TOP: 3px; POSITION: absolute; HEIGHT: 22px
    }
    DIV.clSlideSub {
    PADDING-RIGHT: 2px; PADDING-LEFT: 2px; Z-INDEX: 10; LEFT: 8px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; WIDTH: 127px; CLIP: rect(0px 127px 20px 0px); PADDING-TOP: 2px; POSITION: absolute; HEIGHT: 20px
    }
    DIV.clSlideSub2 {
    PADDING-RIGHT: 2px; PADDING-LEFT: 2px; Z-INDEX: 10; LEFT: 8px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; WIDTH: 118px; CLIP: rect(0px 118px 20px 0px); PADDING-TOP: 2px; POSITION: absolute; HEIGHT: 20px
    }
    #divSlideCont {
    Z-INDEX: 10; LEFT: 0px; VISIBILITY: hidden; WIDTH: 170px; POSITION: absolute; TOP: 100px; HEIGHT: 600px
    }
    A.clSlideLinks {
    FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: white; FONT-FAMILY: Verdana, Helvetica, Helv; TEXT-DECORATION: none
    }
    A.clSlideSubLinks {
    FONT-SIZE: 10px; COLOR: navy; FONT-FAMILY: Verdana, Helvetica, Helv; TEXT-DECORATION: none
    }
    A.clSlideSub2Links {
    FONT-SIZE: 9px; COLOR: navy; FONT-FAMILY: Verdana, Helvetica, Helv; 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()


    //Opera didn't seem to like the padding in the layers, it messes up the background-images, so here's a version without it.
    if(bw.opera5) document.write("<style>DIV.clSlide{padding:0px; background-image:url(' ')}
    DIV.clSlideSub{padding:0px; background-image:url(' ')}
    DIV.clSlideSub2{padding:0px; background-image:url(' ')}</style>")

    /************************************************************************************
    Making cross-browser objects
    ************************************************************************************/
    function makeMenuObj(obj,nest){
    nest=(!nest) ? "":'document.'+nest+'.'
    this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
    this.ref=bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0;
    this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.offsetLeft;
    this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop;
    this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey
    this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0;
    this.bgImg=b_bgImg; this.obj = obj + "Object"; eval(this.obj + "=this");
    this.clipTo=b_clipTo;
    return this
    }
    function b_showIt(){this.css.visibility="visible"; this.status=1}
    function b_hideIt(){this.css.visibility="hidden"; this.status=0}
    function b_movey(y){this.y=y; this.css.top=this.y}
    function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
    function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y}
    function b_bgImg(img){if(bw.ie||bw.dom)this.css.backgroundImage="url('"+img+"')"
    else this.css.background.src=img
    }
    function b_clipTo(t,r,b,l,w){if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r
    this.css.clip.bottom=b;this.css.clip.left=l
    }else{this.css.clip="rect("+t+","+r+","+b+","+l+")"; if(w){this.css.width=r; this.css.height=b}}}
    /********************************************************************************
    Initiating page, making objects..
    ********************************************************************************/
    function SlideMenuInit(){
    oSlideMenu=new makeMenuObj('divSlideCont')
    oSlideMenu.moveIt(menux,menuy)
    oSlide=new Array()
    for(i=0;i<menus.length;i++){
    oSlide=new makeMenuObj('divSlide'+i,'divSlideCont')
    oSlide.subs=menus.subs
    oSlide.sub=new Array()
    oSlide.moveIt(0,mainheight*i)
    oSlide.starty=oSlide.y
    if(bw.opera) oSlide.css.paddingLeft="10px"
    if(!menus.seperator) oSlide.bgImg(level0_regular)
    for(j=0;j<oSlide.subs;j++){
    oSlide.sub[j]=new makeMenuObj('divSlideSub'+i+"_"+j,'divSlideCont')
    oSlide.sub[j].moveIt(10,oSlide.y+subheight*j+between)
    oSlide.sub[j].starty=oSlide.sub[j].y
    oSlide[j]=new Array()
    oSlide[j].subs=menus[j].subs
    oSlide[j].sub=new Array()
    img=level1_round
    if(oSlide[j].subs!=0){
    if(j!=oSlide.subs-1) img=level1_sub
    else img=level1_sub_round
    oSlide.sub[j].css.color="white"
    }else{
    if(j!=oSlide.subs-1)img=level1_regular
    }
    oSlide.sub[j].origimg=img
    oSlide.sub[j].bgImg(img)
    for(a=0;a<oSlide[j].subs;a++){
    oSlide[j].sub[a]=new makeMenuObj('divSlideSub'+i+"_"+j+"_"+a,'divSlideCont')
    oSlide[j].sub[a].moveIt(20,oSlide.sub[j].y+subheight*a+between-2)
    oSlide[j].sub[a].starty=oSlide[j].sub[a].y
    oSlide[j][a]=new Array()
    oSlide[j][a].subs=menus[j][a].subs
    oSlide[j][a].sub=new Array()
    if(a!=oSlide[j].subs-1) img=level2_regular
    else img=level2_round
    oSlide[j].sub[a].origimg=img
    oSlide[j].sub[a].bgImg(img)
    }
    }
    }
    oSlideMenu.showIt()
    }
    /********************************************************************************
    Variables
    ********************************************************************************/
    var active=-1;var going;var isthere; var sactive=-1; var sisthere=-1; var s2active=-1; var s2isthere=-1
    /********************************************************************************
    Switch menu function.
    ********************************************************************************/
    function swmenu(num,snum,s2num){
    if(snum!=-1){
    if(oSlide[num][snum].subs==0) return
    }
    if(s2num!=-1){
    if(oSlide[num][snum][s2num].subs==0) return
    }
    if((num!=active || snum!=sactive || s2num!=s2active) && !going){going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)}
    }
    /********************************************************************************
    Moving the menus upward to their original position.
    ********************************************************************************/
    function moveUp(num,snum){
    if(snum==-1){
    for(i=0;i<oSlide.length;i++){
    if(oSlide.y>oSlide.starty+pxspeed && active!=i) oSlide.moveBy(0,-pxspeed)
    else{if(active!=i) oSlide.moveIt(oSlide.x,oSlide.starty); isthere=i}
    }

    if(isthere<oSlide.length-1) setTimeout("moveUp("+num+","+snum+")",timspeed)
    else swmenu2(num,snum)
    }else{
    if(num==oSlide.length-1) isthere=num

    if(sactive!=-1){ //Is out!
    //Slide subs
    j=0
    for(i=sactive+1;i<oSlide[num].sub.length;i++){
    j++
    if(oSlide[num].sub.y>oSlide[num].sub.starty+pxspeed) oSlide[num].sub.moveBy(0,-pxspeed)
    else{oSlide[num].sub.moveIt(oSlide[num].sub.x,oSlide[num].sub.starty); sisthere=i}
    }
    //Slide main
    for(i=num+1;i<oSlide.length;i++){
    if(oSlide.y>oSlide.starty + oSlide[num].sub[sactive].y +subheight*j ) oSlide.moveBy(0,-pxspeed)
    else{oSlide.moveIt(oSlide.x,oSlide.starty + oSlide[num].sub[sactive].y +subheight*j ); isthere=i}
    }
    }else{ //Slide to the one clicked
    for(i=num+1;i<oSlide.length;i++){
    if(oSlide.y>oSlide.starty + snum*between+between) oSlide.moveBy(0,-pxspeed)
    else{oSlide.moveIt(oSlide.x,oSlide.starty + snum*between+between); isthere=i}
    }
    }
    if(isthere<oSlide.length-1 || (sactive!=-1 && sisthere<oSlide[num].sub.length-1 && sactive!=oSlide[num].sub.length-1)) setTimeout("moveUp("+num+","+snum+")",timspeed)
    else swmenu2(num,snum)
    }
    }
    /********************************************************************************
    Switch menu 2, stuff that happens before the menus are moved down again.
    ********************************************************************************/
    function swmenu2(num,snum){
    isthere=0;
    sisthere=0;
    if(active>-1 && snum==-1){
    //Hiding submenus
    for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].hideIt()}
    oSlide[active].bgImg(level0_regular)
    oSlide[active].moveIt(0,oSlide[active].starty)
    }
    if(sactive>-1){
    //Hiding submenus
    for(j=0;j<oSlide[active][sactive].sub.length;j++){oSlide[active][sactive].sub[j].hideIt()}
    oSlide[active].sub[sactive].bgImg(oSlide[active].sub[sactive].origimg)
    oSlide[active].sub[sactive].moveIt(10,oSlide[active].sub[sactive].starty)
    //Move back to place
    for(i=sactive+1;i<oSlide[active].sub.length;i++){
    oSlide[active].sub.moveIt(oSlide[active].sub.x,oSlide[active].sub.starty)
    }
    }
    active=num
    //Showing submenus
    if(snum>-1){
    sactive=snum
    for(j=0;j<oSlide[num][snum].sub.length;j++){oSlide[num][snum].sub[j].showIt()}
    oSlide[num].sub[snum].moveBy(10,3)
    oSlide[num].sub[snum].bgImg(level1_round2)
    }else{
    sactive=-1
    for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].showIt()}
    oSlide[num].moveBy(10,3)
    oSlide[num].bgImg(level0_round)
    }
    if(num!=oSlide.length-1) moveDown(num,snum)
    else{
    isthere=num
    moveDown(num,snum)
    }
    }
    /********************************************************************************
    Moving the menus down
    ********************************************************************************/
    function moveDown(num,snum){
    //if(num==oSlide.length-1) isthere=num
    for(i=num+1;i<oSlide.length;i++){
    if(snum==-1){
    if(oSlide.y<(oSlide[num].subs-1)*subheight+oSlide.starty+between-pxspeed) oSlide.moveBy(0,pxspeed)
    else{oSlide.moveIt(oSlide.x,(oSlide[num].subs-1)*subheight+oSlide.starty+between); isthere=i}
    }else{
    if(oSlide.y<(oSlide[num].subs-1)*subheight+oSlide.starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between) oSlide.moveBy(0,pxspeed)
    else{oSlide.moveIt(oSlide.x,(oSlide[num].subs-1)*subheight+oSlide.starty+between + (oSlide[num][snum].subs-1)*subheight+between); isthere=i}
    }
    }
    if(snum!=-1){
    for(i=snum+1;i<oSlide[num].sub.length;i++){
    if(oSlide[num].sub.y<(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub.starty+between-pxspeed) oSlide[num].sub.moveBy(0,pxspeed)
    else{oSlide[num].sub.moveIt(oSlide[num].sub.x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub.starty+between); sisthere=i}
    }
    }
    if(snum==-1){
    if(isthere<oSlide.length-1) setTimeout("moveDown("+num+","+snum+")",timspeed)
    else going=false
    }else{
    if(isthere<oSlide.length-1 || (sisthere<oSlide[num].sub.length-1 && snum!=oSlide[num].sub.length-1)) setTimeout("moveDown("+num+","+snum+")",timspeed)
    else going=false
    }
    }
    var test=0
    /********************************************************************************
    Functions to write out the layers…
    ********************************************************************************/
    menus=new Array(); var a=0; var b=0; var c=0; var d=0
    function makeMenu(type,text,lnk,target,end){
    str=""; tg="";
    if(target) tg='target="'+target+'"'
    if(!lnk) lnk="#"
    self.status=lnk
    if(a==0) str='<div id="divSlideCont">
    '
    if(type=="top"){
    menus[a]=new Array();
    if(text=="seperator"){
    str+='\t<div id="divSlide'+a+'" class="clSlide"></div>
    '
    menus[a].seperator=1
    }else{
    str+='\t<div id="divSlide'+a+'" class="clSlide"><a href="'+lnk+'" '+tg+' onclick="swmenu('+a+',-1,-1); if(bw.ie || bw.ns6) this.blur(); '
    if(lnk=="#") str+='return false'
    str+='" class="clSlideLinks"> '+text+'</a><br></div>
    '
    }
    menus[a].subs=0; a++; b=0
    }else if(type=="sub"){
    str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b)+'" class="clSlideSub"><a '+tg+' onclick="swmenu('+(a-1)+','+b+',-1); if(bw.ie || bw.ns6) this.blur(); '
    if(lnk=="#") str+='return false'
    str+='" href="'+lnk+'" class="clSlideSubLinks">  '+text+'</a><br></div>
    '
    b++; menus[a-1].subs=b; menus[a-1][b-1]=new Array(); c=0; menus[a-1][b-1].subs=0
    }else if(type=="sub2"){
    str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b-1)+'_'+c+'" class="clSlideSub2"><a '+tg+' href="'+lnk+'" class="clSlideSub2Links">  '+text+'</a><br></div>
    '
    c++; menus[a-1][b-1].subs=c; menus[a-1][b-1][c-1]=new Array(); d=0; menus[a-1][b-1][c-1].subs=0
    }
    if(end) str+="</div>"
    document.write(str)
    }
    function preLoadBackgrounds(){
    for(i=0;i<arguments.length;i++){
    this=new Image()
    this.src=arguments
    }
    return this
    }
    </SCRIPT>
    </HEAD>
    <BODY bgColor=#ffffff marginheight="0" marginleft="0" onLoad="StatusFlash('yes')" onLoad="scrollit(100)">
    <center>Klik <a href="hoofdmenu.zip"> hier</a> om deze script te downloaden. </center><script>
    //Variables to set
    between=28 //The pixel between the menus and the submenus
    mainheight=25 //The height of the mainmenus
    subheight=22 //The height of the submenus
    pxspeed=13 //The pixel speed of the animation
    timspeed=15 //The timer speed of the animation
    menuy=80 //The top placement of the menu.
    menux=0 //The left placement of the menu
    //Images - Play with these
    level0_regular="level0_regular.gif"
    level0_round="level0_round.gif"
    level1_regular="level1_regular.gif"
    level1_round="level1_round.gif"
    level1_sub="level1_sub.gif"
    level1_sub_round="level1_sub_round.gif"
    level1_round2="level1_round2.gif"
    level2_regular="level2_regular.gif"
    level2_round="level2_round.gif"

    //Leave this line
    preLoadBackgrounds(level0_regular,level0_round,level1_regular,level1_round,level1_sub,level1_sub_round,level1_round2,level2_regular,level2_round)


    //There are 3 different types of menus you can make
    //top = Main menus
    //sub = Sub menus
    //sub2 = SubSub menus

    //You control the look of the menus in the stylesheet

    //makeMenu('TYPE','TEXT','LINK','TARGET', 'END (THE LAST MENU)')

    //Menu 0
    makeMenu('top','Home')
    makeMenu('sub','hoofdpagina', 'home.htm', target="mainFrame")
    makeMenu('sub','javascript','javascript.htm')

    //Menu 1
    makeMenu('top','Javascripts')
    makeMenu('sub','menu 1','javascript.htm')
    makeMenu('sub','menu 2','javascript2.html')
    makeMenu('sub','Menu 3','javascript3.html')
    makeMenu('sub','Menu 4','javascript4.html')
    makeMenu('sub','Menu 5','javascript5.html')
    makeMenu('sub','Menu 6','javascript6.html')
    makeMenu('sub','Menu 7','javascript7.html')
    makeMenu('sub','Menu 8','javascript8.html')


    //Menu 2
    makeMenu('top','Downloads')
    makeMenu('sub','klik hier','explosion.htm', target="mainFrame")
    makeMenu('sub','klik hier','', target="mainFrame")
    makeMenu('sub2','klik hier','explosion.htm', target="mainFrame")
    //Menu 3
    makeMenu('top','Verdien Geld')
    makeMenu('sub','Stappenplan','Geldverdienen.html', target="mainFrame")

    //Menu 4
    makeMenu('top','html - codes')
    makeMenu('sub','alle html-codes', 'htmlcodes.html', target="mainFrame")



    //Menu 5
    makeMenu('top','Vragen')
    makeMenu('sub','Uitleg', 'vragen.html', target="mainFrame")
    makeMenu('sub','mail', 'mail.html', target="mainFrame")
    //Menu 6
    makeMenu('top','Gastenboek')
    makeMenu('sub','Plaats je mening','http://pub.alxnet.com/guestbook?id=2269378', target="mainFrame")

    //Starting the menu
    onload=SlideMenuInit;
    </SCRIPT><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    var MyName = 'sipro';
    var MyHeight = 22;
    var MyWidth = 22;
    var MyAlign = '';
    var MyTarget = '_blank';
    </SCRIPT>




    Ik heb dit menu gebruikt alleen hoe kan je er voor zorgen dat het menu van grote verandert als het scherm van grote verandert. Ik maak gebruik van tabellen.
  • ten eerste:
    plaats in het vervolg gewoon een link naar je pagina waar dit opstaat, het wordt zo wel een heel erg lang topic…
    en ik heb hem niet doorgelezen ofzo, maar ik weet wel dat je met % moet werken.
    als ik bijvoobeeld de breedte van iets opgeef, stel ik niet 600px, maar bijvoorbeeld 80%.
    wat doet de browser dan?
    hij meet de breedte (of hoogte, hangt ervanaf hoe je het gebruikt) van het actuele scherm, en neemt daar 80 % van. werkt altijd!
    (voorbeeld: ik pas het zelf ook toe op mijn site, speel maar eens met de afmetingenen van het browservenster, zul je zien dat alles meegaat)

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.