Javascriptmenu in Tabelle

C

casimir

Mitglied
Hallo ,

ich war bisher in dem Glauben, dass man ein JavascriptFoldoutmenu im Gegensatz zu Java in eine Tabele packem kann un sich diese entspechend anpasst. Unterliege ich da einem Trugschluss? Mein code sieht so aus: PS bevor jemand anrät die tabellen farbe unsichtbar zu machen sei gesagt, es kommt da noch nen Graphikrahmen run , hier nicht dabei.


Viele grüße und Danke i.V


gruss


casi


_______________________
Code: 
 <html>

<head>
<title>Kein Titel</title>
<meta name="generator" content="Namo WebEditor v6.0(Trial)">

</head>
<head>
<style>
<!--
DIV.clTop{position:absolute; width:160}
DIV.clSub{position:absolute; left:5; width:160}
#divCont{position:relative; left:4; top:3; height:280; width:160;}
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:11px; text-decoration: none; color: #C71585;
}
#divMain{position:absolute}
body {
        scrollbar-3d-light-color: #FFFFFF;
  scrollbar-highlight-color: #FF80FF;
  scrollbar-face-color: #FFFFFF;
  scrollbar-arrow-color: #000000;
  scrollbar-shadow-color: #FF80FF;
  scrollbar-darkshadow-color: #FFFFFF;
  scrollbar-track-color: #FFFFFF;
}
//-->

</style>
</head>
<head>
<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. - Anm.: Wenn Sie alle Punkte aufklappen wollen, dann "true"
************************************************************************************/
var stayFolded=false

//This is the image that it changes to when it expands.
var exImg=new Image(); exImg.src='arrowb1.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='arrowb.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;

fferererererere
</script>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table border="1" width="100%" height="100">
    <tr>
        <td width="100%" height="100%" align="center">
		
		
		<!-- Beginn Einbau -->

<div id="divCont" align=left>
      <div id="divTop1" class="clTop">
        <a href="#" target="_self" onclick="menu(0); return false" class="clMain"><img src="arrowb.gif" name="imgA0" alt="" border="0" width="12" height="12"> </a><a class="clMain">Aktuelles</a><br>
            <div id="divSub1" class="clSub" style="width: 130; height: 73">
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/vorst.shtml" target="haupt" class="clSubb">dr Vorstand</a><br>
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/aktiv/a1.htm" target="haupt" class="clSubb">die Aktive</a><br>
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/kal/calancal/clancalendar.php" target="haupt" class="clSubb">s'Jooresprogramm</a><br>
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/bericht/schind.htm" target="haupt" class="clSubb">Yber d' Schindgrabe</a><br>
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/bericht/pasforschind.html" target="haupt" class="clSubb">Do kasch Passiv wärde</a><br>
            </div><br>
      </div>
      
      <div id="divTop2" class="clTop">
        <a href="#" target="_self" onclick="menu(1); return false" class="clMain"><img src="arrowb.gif" name="imgA1" alt="" border="0" width="12" height="12"> Fasnacht</a><br>
            <div id="divSub2" class="clSub">
                 <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/fasn/zeedel.html" target="haupt" class="clSubb">Zeedel 2005</a><br>
                <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/fasn/s_ffasnacht04.shtml" target="haupt" class="clSubb">Fasnacht 2004</a><br>
                 <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/fasn/zeedel04.html" target="haupt" class="clSubb">Zeedel 2004</a><br>
              </div><br>
      </div>
      
      <div id="divTop3" class="clTop">
        <a href="#" target="_self" onclick="menu(2); return false" class="clMain"><img src="arrowb.gif" name="imgA2" alt="" border="0" width="12" height="12"> Fotteli</a><br>
            <div id="divSub3" class="clSub">
                <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?http://www.gligge.ch/4images/categories.php?cat_id=3" target="_blank" class="clSubb">s'Album</a><br>
                <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/bericht/evelin.shtml" target="haupt" class="clSubb">Aifach Bilder</a><br>
                <a href="http://www.gligge.ch/schind/bericht/gv03.shtml" target="haupt" class="clSubb">GV 2003  Bilder</a><br>

               </div><br>
      </div>
      
      <div id="divTop4" class="clTop">
        <a href="" onclick="menu(3); return false" class="clMain"><img src="arrowb.gif" name="imgA3" alt="" border="0" width="12" height="12"> Bricht / Archiv</a><br>
            <div id="divSub4" class="clSub" style="width: 130; height: 98">
                 <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/archiv/archindex.shtml" target="_blank" class="clSubb">s ARCHIV</a><br>
                <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/keller.htm" target="haupt" class="clSubb">Uus em Käller</a><br>
                <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/bericht/gmorgen.htm" target="haupt" class="clSubb">Morgestraich</a><br>
                <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/schind/bericht/neys.htm" target="haupt" class="clSubb">s'Gflischder</a><br>
                </div><br>
      </div>
      
      <div id="divTop5" class="clTop">
        <a href="" onclick="menu(4); return false" class="clMain"><img src="arrowb.gif" name="imgA4" alt="" border="0" width="12" height="12"> Aller Gattig</a><br>
            <div id="divSub5" class="clSub" style="width: 130; height: 65">
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?/bebbi_rap.htm" target="haupt" class="clSubb">Bebbi Rapp</a><br>
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?http://www.staenzler.ch/Sub/Witze/witze.htm" target="_blank" class="clSubb">D Stänzler Witz-Site</a><br>
                   <a href="http://www.gligge.ch/schind/bericht/stat.shtml" target="_blank"  class="clSubb">e Statistigg</a><br>
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?http://www.4webpage.ch.vu" target="_blank" class="clSubb">Für Webmaster</a><br>
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?http://www.awidmer.ch/php/donleing.php" target="_blank" class="clSubb">Downloads,etc</a><br>
                   <a href="mailto:webmaster@gligge.ch" target="_self" class="clSubb">Mail an Webi</a><br>
            </div><br>
      </div>
      
      <div id="divTop6" class="clTop">
        <a href="" onclick="menu(5); return false" class="clMain"><img src="arrowb.gif" name="imgA5" alt="" border="0" width="12" height="12"> Link Sidde</a><br>
            <div id="divSub6" class="clSub" style="width: 130; height: 56">
                   <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?http://www.awidmer.ch/lm/fasnacht/f_links.htm" target="_blank" class="clSubb">Fasnachts-Links</a><br>
                  <a href="http://www.gligge.ch/cgi-bin/clickcounter/click.cgi?http://www.awidmer.ch/shop.htm" target="_blank" class="clSubb">ETReinhard  Shop</a><br>
                  <a href="http://free-service.de/forum/cgi-bin/forum.pl?id=1401-02180845&la=de" target="_blank" class="clSubb">d'Fasnachts-Börse</a><br>
                  <a href="http://www.awidmer.ch/awiprojekte.shtml" target="_blank" class="clSubb">AWIweb Projekte</a><br>
                  <a href="http://www.linkhitlist.com/cgi/ShowHitList.exe?ShowLinkHitparade&ListNo=D14378164181" target="_blank" class="clSubb">Dy Link sälber Ydrage</a><br>
  </div><br>
      </div>
           
      <div id="divTop7" class="clTop" style="width: 130; height: 34">
        <a href="" onclick="menu(6); return false" class="clMain"><img src="arrowb.gif" name="imgA6" alt="" border="0" width="12" height="12"> s'Geschdebuech</a><br>
            <div id="divSub7" class="clSub" style="width: 81; height: 26">
                   <a href="http://www.guweb.com/cgi-bin/guestbook?id=GLIGGE" target="haupt" class="clSubb">Ydrage</a><br>
                   <a href="http://www.guweb.com/cgi-bin/guestbook?id=GLIGGE" target="haupt" class="clSubb">Lääse</a><br>
            </div><br>
      </div>
</div>
<!-- Ende Einbau -->
		
		
		
		</td>
    </tr>
</table>
<p>&nbsp;</p>
</body>

</html>
____________________________
 
Hallo casimir,

die Tabellen-Höhe 'korrespondiert' nicht mit der Höhe des FoldoutMenüs und reagiert aus diesem Grund auch nicht auf die aktuelle Menü-Höhe bei einem geöffnetem Submenü.

Nach meinem Wissen lässt sich dies in Thomas Brattli's Foldoutmenu auch nicht einstellen bzw. steuern ...

Empfehle dir aber mal das DHTMLCentral - Forum, vielleicht hilft dir die DC-Community weiter?


greez, maik.l
 
Jo danke nochmal, ich dachte bisher bei JS ist dass egal, aber man lernt nie aus, kannst du mir vielleciht nen besseres Foldoutmenu empfehlen?


danke i.V.


Gruss


casi
 
Kenne kein besseres FoldoutMenu, als das von Thomas Brattli. Ausserdem gibt es aktuellere Versionen des Scripts -> FoldoutMenu und FoldoutMenu 2. Aber ich bezweifle, dass sich diese so in eine Tabelle einbauen lassen, wie du es dir vorstellst.


greez, maik.l
 
Das sind 2 grundverschiedene Sachen.... vor einer Navigation mit Java-Applets kann ich nur warnen... im Gegensatz zu JS gibts dann keine Möglichkeit der Benutzung.(bestes Beispiel sind die schicken JAVA-Hover-Buttons bei MS-Frontpage:-))

Zu dem Menu ansich.... ich habs mir mal mit dem IE angeschaut(in Mozilla läuft es nicht, weil du eine überlagerte Version benutzt)... das lässt sich in deinem Fall wahrscheinlich noch weitaus einfacher lösen.
Schau dir mal in der Tutorials-Sektion das "Basic-DHTML-Menu" an.... das ist dafür ein guter Ansatz.

Ansonsten... suche im Board mal nach "toggle" ... vielleicht kommt da was bei raus.
Auf jeden Fall schlummern hier garantiert eine Reihe brauchbarer Lösungen(die zu Suchen ich mich momentan nicht motiviert genug fühle)

Falls du nix findest, sag nochmal Bescheid ;)
 
Jo danke noch mal, ist mir schon klar dass dass verschiedene Sachen sind, wegen dieser Inflexibilität und auch der Geschwindigkeit wollte ich ja JS nehmen. Also mit Toggles, weis ich nicht so recht was dass sein soll, kann dass bei meinem Problem helfen?


Gruss


Casi
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück