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

Webprogrammeren & scripting

[DHTML] afstand tussen meu items

None
2 antwoorden
  • Beste mensen

    ik heb van het internet een menu gehaald die ik graag wil gebruiken voor mijn website. Alleen vind ik dat de menu items te ver uit elkaar staan.

    Is er iemand die mij kan vertellen hoe ik in onderstaande script het menu kan wijzigen dat de items wat dichter bij elkaar staan.
    Ook zou ik graag nog willen weten hoe ik de links betreffende de menu items in een ander frame kan laten openen.

    Alvast bedankt voor jullie reacties.

    Pieter

    [code:1:6bf91f9fa2]
    <head>
    <style>
    <!–
    DIV.clTop{position:absolute; width:170}
    DIV.clSub{position:absolute; left:10; width:170}
    #divCont{position:relative; left:10; top:0; height:400; width:170;}
    A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:12px; text-decoration:none; font-weight:bold; color:black}
    A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:12px; text-decoration:none; color:black}
    #divMain{position:absolute}
    //–>
    </style>
    </head>

    <!–3 Parts to this script
    ===================================================
    part 1 - In this section you can change the position of where it is displayed on the page.
    ===================================================

    <!– –>
    <!– –>

    <!–======================================================
    PART 2
    ======================================================
    //–>

    <script language="JavaScript">

    /*
    Copyright (C) 1999 Thomas Brattli
    This script is made by and copyrighted to Thomas Brattli at www.bratta.com
    Visit for more great scripts.
    This may be used freely as long as this msg is intact!
    */

    /*
    This script is a "foldout" menu script, all the "foldouts" will
    stay outfolded in older browsers. Works in ie4+ and ns4+.
    ADDED: Images

    To change where the menu appears change the left and top values of the divCont
    in the stylesheets, it's currently placed relative so you can
    place this menu in tables or similar if you want. Change the
    text colors and size in the A.clMain and A.clSubb classes.
    */

    /*
    Change this to false if you want all the submenus to get unfold when you
    foldout a new one.
    */
    var stayFolded=false

    //This is the image that it changes to when it expands.
    var exImg=new Image(); exImg.src='arrow1.gif'
    //This is the image is changes to with it's "unfolded" or something :}
    //Remeber to change the actual images in the page aswell, but remember to
    //keep the name of the image.
    var unImg=new Image(); unImg.src='arrow.gif'

    /*
    Browsercheck
    */
    var n = (document.layers) ? 1:0;
    var ie = (document.all) ? 1:0;
    var browser=((n || ie) && parseInt(navigator.appVersion)>=4)

    /*
    Making cross-browser objects
    */
    function makeMenu(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'
    this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
    this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
    this.height=n?this.ref.height:eval(obj+'.offsetHeight')
    this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
    this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
    return this
    }
    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=="hide") return true;}
    function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
    /*
    Initiating the page. Just add to the arrays here to get more menuitems
    and add divs in the page
    */
    function init(){
    oTop=new Array()
    oTop[0]=new makeMenu('divTop1','divCont')
    oTop[1]=new makeMenu('divTop2','divCont')
    oTop[2]=new makeMenu('divTop3','divCont')
    oTop[3]=new makeMenu('divTop4','divCont')
    oTop[4]=new makeMenu('divTop5','divCont')
    oTop[5]=new makeMenu('divTop6','divCont')
    oTop[6]=new makeMenu('divTop7','divCont')
    oSub=new Array()
    oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
    oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
    oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
    oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
    oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
    oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
    oSub[6]=new makeMenu('divSub7','divCont.document.divTop7')
    for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
    for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
    }
    /*
    This is the function that changes the sub menus to folded or unfolded state.
    */
    function menu(num){
    if(browser){
    if(!stayFolded){
    for(i=0;i<oSub.length;i++){
    if(i!=num){
    oSub[i].hideIt()
    oTop[i].ref["imgA"+i].src=unImg.src
    }
    }
    for(i=1;i<oTop.length;i++){
    oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
    }
    }
    if(oSub[num].vis()){
    oSub[num].showIt()
    oTop[num].ref["imgA"+num].src=exImg.src
    }else{
    oSub[num].hideIt()
    oTop[num].ref["imgA"+num].src=unImg.src
    }
    for(i=1;i<oTop.length;i++){
    if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
    else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
    }
    }
    }
    //Initiating the menus onload, if it's a 4.x+ browser.
    if(browser) onload=init;


    </script>

    <!–
    ===================================================
    Part 3
    ====================================================
    //–>

    <!–A1 –><div id="divCont">
    <div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Home';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA0" width=12 height=12 alt="" border="0"> [Home]</a><br>
    <div id="divSub1" class="clSub">
    &nbsp;<a href="http://www.a1javascripts.com/essential_scripts/" class="clSubb" ONMOUSEOVER="window.status='Essential Scripts';return true;" ONMOUSEOUT="window.status='';return true;">-Essential Scripts</a><br>
    &nbsp;<a href="http://www.a1javascripts.com/mouseover_scripts/" class="clSubb" ONMOUSEOVER="window.status='Mouse Over Scripts';return true;" ONMOUSEOUT="window.status='';return true;">-Mouseover Scripts</a><br>
    &nbsp;<a href="http://www.a1javascripts.com/page_effects/" class="clSubb" ONMOUSEOVER="window.status='Page Effect Scripts';return true;" ONMOUSEOUT="window.status='';return true;">-Page Effects</a><br>
    &nbsp;<a href="http://www.a1javascripts.com/site_navigation/" class="clSubb" ONMOUSEOVER="window.status='Site Navigation Scripts';return true;" ONMOUSEOUT="window.status='';return true;">-Site navigation</a><br>
    </div><br>
    </div>
    <div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA1" width=12 height=12 alt="" border="0"> [Nieuws]</a><br>
    <div id="divSub2" class="clSub">
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">Laatste nieuws</a><br>
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">Nieuws archief</a><br>
    </div><br>
    </div>
    <div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA2" width=12 height=12 alt="" border="0"> [choice 2]</a><br>
    <div id="divSub3" class="clSub">
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 1</a><br>
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 2</a><br>
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 3</a><br>
    </div><br>
    </div>
    <div id="divTop4" class="clTop"><a href="#" onclick="menu(3); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA3" width=12 height=12 alt="" border="0"> [choice 3]</a><br>
    <div id="divSub4" class="clSub">
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 1</a><br>
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 2</a><br>
    </div><br>
    </div>
    <div id="divTop5" class="clTop"><a href="#" onclick="menu(4); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA4" width=12 height=12 alt="" border="0"> [choice 4]</a><br>
    <div id="divSub5" class="clSub">
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 1</a><br>
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 2</a><br>
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 3</a><br>
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 4</a><br>
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 5</a><br>
    </div><br>
    </div>
    <div id="divTop6" class="clTop"><a href="#" onclick="menu(5); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA5" width=12 height=12 alt="" border="0"> [choice 5]</a><br>
    <div id="divSub6" class="clSub">
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">-Sub 1</a><br>
    </div><br>
    </div>
    <div id="divTop7" class="clTop"><a href="#" onclick="menu(6); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA6" width=12 height=12 alt="" border="0"> Beker alle teams</a><br>
    <div id="divSub7" class="clSub">
    &nbsp;<a href="#" class="clSubb" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;">Scharnegoutum 1</a><br>
    </div><br>
    </div>
    </div>
    <!– –>
    [/code:1:6bf91f9fa2]

    (mod: titel en lay-out aangepast: code tussen tags)
  • thomas brattli heeft een nieuwe site:
    www.dhtmlcentral.com

    Als je daar eerst even gaat lezen hoe je het menu aanpast (eerst zelf porberen, you know…) horen we het wel als je er echt niet uit komt…

    t.

Beantwoord deze vraag

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