Javascript-Frage: Link unter 'Klappmenü' mitschieben?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
are
beritt
busch
editor
entschuldigung
fragen
lsung
nachzucht
pferd
reitschule
scheien
service
studio
tatsache
these
unterpunkt
verweisen
vielen dank
zuchtstute
-
Also, ich hab mir ein 'Klappmenü' eingefügt, nun möchte ich aber noch einfache Links dazufügen.
Alles schön und gut.
Sobald ich aber einen Link aufgeklappt hab, also man sieht die Unterpunkte, überdeckt dass den normalen Link.
Nun die Frage: Wie kann ich den normalen Link so einfügen, dass, wenn man einen Link aufklappt, dieser sich mit nach 'unten' verschiebt?
Hier der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>DEIN SEITENTITEL</title> <style> body { scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ffffff; </style> <style type="text/css"> #divCont {position:absolute; z-index:1; left:10px; top:55px; height:800px; width:170px; visibility:hidden;} .clTop {position:absolute; z-index:1; width:170px; line-height:5px;} .clSub {position:absolute; z-index:1; left:1px; top:20px; width:170px; line-height:14px;} /*** This sets the style for the links inside the menu. ***/ #divCont .clTop a {color:#050575; font-family:Comic Sans MS,verdana,arial,helvetica,sans-serif; font-size:14px; font-weight:bold; text-decoration:underline;} #divCont .clTop a:hover {color:#050575; text-decoration:underline;} #divCont .clTop .clSub a {color:#050575; font-family:Comic Sans MS,verdana,arial,helvetica,sans-serif; font-size:10px; font-weight:bold; text-decoration:none;} #divCont .clTop .clSub a:hover {color:#050575; text-decoration:none;} </style> <script language="JavaScript" type="text/javascript"> /********************************************************************************** FoldoutMenu * 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 * * Script date: 09/04/2001 (keep this date to check versions) *********************************************************************************/ function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0 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=lib_bwcheck() /*** variables you can configure ***/ FoldNumber = 6 //How many toplinks do you have? var stayFolded = false //Stay open when you click a new toplink? foldImg = 1 //Do you want images (if not set to 0 and remove the images from the body)? mainOffsetY = 0 //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='hkm.jpg' var exImg=new Image(); //Making an image variable... exImg.src='hkm.jpg' //...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 bgproperties="fixed" style="background-color: rgb(255, 255, 255); background-image: url(main.jpg); color: rgb(0, 0, 0); background-attachment: fixed;" alink="#050575" link="#050575" vlink="#050575"> <font face="Comic Sans MS" size="2" color="#000000"> <img src="hkm.jpg" width=11 height=15 alt=""><a target="home" href="#"><span style="color: rgb(5, 5, 126); font-weight: bold;">Home</span></a><br> <img src="hkm.jpg" width=11 height=15 alt=""><a target="home" href="#"><span style="color: rgb(5, 5, 126); font-weight: bold;">Die Anlage</span></a> <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()"><img src="hkm.jpg" name="imgA0" width=11 height=15 alt="" border="0">Service/Leistungen</a><br> <div id="divSub0" class="clSub"> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Beritt und Ausbildung</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Reitschule</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Voltigieren</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Ferienangebot</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Geburtstage</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Für die Kleinsten</a><br> </div><br> </div> <div id="divTop1" class="clTop"><a href="#" onclick="menu(1); return false" onfocus="this.blur()"><img src="hkm.jpg" name="imgA1" width=11 height=15 alt="" border="0">Über Uns</a><br> <div id="divSub1" class="clSub"> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Kathrin Nöhbauer</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Das Team</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Unsere Pferde</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Andere Tiere</a><br> </div><br> </div> <div id="divTop2" class="clTop"><a href="#" onclick="menu(2); return false" onfocus="this.blur()"><img src="hkm.jpg" name="imgA2" width=12 height=12 alt="" border="0">Reitponyzucht</a><br> <div id="divSub2" class="clSub"> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Philosophie</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Zuchtstuten</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Nachzucht</a><br> </div><br> </div> <div id="divTop3" class="clTop"><a href="#" onclick="menu(3); return false" onfocus="this.blur()"><img src="hkm.jpg" name="imgA3" width=12 height=12 alt="" border="0">Sportpferdezucht</a><br> <div id="divSub3" class="clSub"> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Philosophie</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Zuchtstuten</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Nachzucht</a><br> </div><br> </div> <div id="divTop4" class="clTop"><a href="#" onclick="menu(4); return false" onfocus="this.blur()"><img src="hkm.jpg" name="imgA4" width=12 height=12 alt="" border="0">Shetlandponyzucht</a><br> <div id="divSub4" class="clSub"> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Philosophie</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Zuchtstuten</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Nachzucht</a><br> </div><br> </div> <div id="divTop5" class="clTop"><a href="#" onclick="menu(5); return false" onfocus="this.blur()"><img src="hkm.jpg" name="imgA5" width=12 height=12 alt="" border="0">Rhodesian Ridgeback</a><br> <div id="divSub5" class="clSub"> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Rasse und Geschichte</a><br> <img src="hkm.jpg" width=12 height=12 alt=""><a href="#">Dahli Busch v. Schlackenberg</a><br> </div><br> </div> </div> <!-- Here ends the foldoutmenu. --> </font> </body> </html>
Ich hoffe, jemand kann mir helfen, da ich selbst nicht weiterkomme und in Javascript nicht so bewandelt bin ;) .
Beitrag geändert: 17.11.2006 21:56:48 von miral -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mal ne Frage, glaubst du wirklich, dass für so etwas banales so viel Code nötig ist?
(Bin mitm Handy auf dieser Seite, nur mal als Nebeninfo)
Desweiteren: FrontPage ist scheiße !
Das soll kein persönlicher Angriff sein, sondern es ist einfach eine Tatsache, das HTML Editoren aus dem Hause Microsoft kein vernünftiges HTML hinbekommen.
Daher verweise ich auf http://de.selfhtml.org/
wo du erstmal lernst selber HTML zu schreiben. Und als Editor nimmst du HTML Studio.
(nimms mir bitte nicht übel, wenn du dir dies hier anhören/durchlesen musst, aber was du machst, lässt sich viel effizienter, besser machen und wenn man erstmal ein wenig Übung hat, ist es auch leichter.)
Die Antwort auf deine Frage findest du auf dem gerade von mir genanntem Link. Dort gehst du dann auf "Häufig gestellte Fragen" und dann wirst du deine Lösung finden. -
Entschuldigung, ich kann verstehen, dass das in den Augen eines Profis etwas 'banales/einfaches' ist. Deshalb meine Entschuldigung.
Des weiteren hab ich HTML Studio, den Code hat mir aber ein Bekannter gegeben, der meinte, der wäre gut.
Eine Antwort auf meine Frage habe ich leider trotzdem nicht gefunden.
Trotzdem vielen Dank für deine Hilfe. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
