JavaScript-Menü, das nach oben aufgeht
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anschreiben
auswahl
beitrag
betreff
eigenschaft
erfolgen
fragen
funktion
gen
parameter
punkten
recht
richtung
sinnen
span
tabelle
verzicht
vorhabe
zeile
zuschneiden
-
Hallo!
Wie im Betreff bereits erw?hnt, suche ich ein Men? in JavaScript (von mir aus auch in PHP, das ist ganz gleich), das nach oben hin aufgeht. Alles, was ich bisher gefunden habe (und ich habe Google fast bis zum Ende durchgesucht, ohne jeglichen Erfolg), ging entweder nach unten auf oder zur Seite.
Ich m?chte allerdings das Men? unten hinsetzen und wenn es dann auch noch nach unten aufgeht, w?re das eher schlecht.
Jetzt werden sicher einige denken: "Das Men? soll unten sein? Dann muss man also erst runterscrollen, um navigieren zu k?nnen?"
Nein, nein, die Seite ist genau so gro?, dass es immer zu sehen ist, so dass das kein Problem ist.
Ich hoffe, mir kann jemand helfen, weil sonst wei? ich nicht weiter. Wenn weitere Infos zu dem Men? gebraucht werden, was ich damit vorhabe, gen?gt eine Frage und ich erkl?re es genauer. Denn das ganze hat ja einen Sinn und soll nicht einfach nur anders sein.
Bye bye DarkAurora
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
darkaurora schrieb:
Hallo!
Wie im Betreff bereits erw?hnt, suche ich ein Men? in JavaScript (von mir aus auch in PHP, das ist ganz gleich), das nach oben hin aufgeht. Alles, was ich bisher gefunden habe (und ich habe Google fast bis zum Ende durchgesucht, ohne jeglichen Erfolg), ging entweder nach unten auf oder zur Seite.
Ich m?chte allerdings das Men? unten hinsetzen und wenn es dann auch noch nach unten aufgeht, w?re das eher schlecht.
Jetzt werden sicher einige denken: 'Das Men? soll unten sein? Dann muss man also erst runterscrollen, um navigieren zu k?nnen?'
Nein, nein, die Seite ist genau so gro?, dass es immer zu sehen ist, so dass das kein Problem ist.
Ich hoffe, mir kann jemand helfen, weil sonst wei? ich nicht weiter. Wenn weitere Infos zu dem Men? gebraucht werden, was ich damit vorhabe, gen?gt eine Frage und ich erkl?re es genauer. Denn das ganze hat ja einen Sinn und soll nicht einfach nur anders sein.
Bye bye DarkAurora
Also mit PHP ist das unm?glich.
Man m?sste die Seite ja immer aktualisieren.
Aber probier doch mal, ein Script zu nehmen, bei dem das Men? nach unten aufgeht.
Und dann probier mal, es so umzuschreiben, dass es nach unten aufghet.
Hab ich auch bei manchen seiten gemacht. -
Also, das mit PHP war auch nur ein Gedanke. Bisher habe ich in Sachen PHP noch nicht so den Durchblick.
Ich habe auch schon versucht, ein anderes Men? umzuschreiben, es ist mir jedoch missgl?ckt. Keine Ahnung, ob es bei dem einfach nicht geht oder ob ich es einfach nur nicht hinbekommen habe.
----
Bei dem angegebenem Link war ich auch bereits, doch da habe ich auch nichts passendes gefunden.
Bye bye DarkAurora -
<html> <head> <meta name="generator" content="HTML Studio" /> <title> </title> <style type="text/css"> #nav td{visibility:hidden} #shower td{visibility:visible;} #nav{empty-cells:hide;} </style> <script type="text/javascript"> kill=new Array(); function navin() { for(i=0;i<kill.length;i++)document.getElementById(kill[i]).style.visibility='hidden'; for(i=0;i<navin.arguments.length;i++){document.getElementById(navin.arguments[i]).style.visibility='visible';} kill=navin.arguments; } </script> </head> <body> <table id="nav"> <tr><td id="up_1_1">Inhalt</td><td id="up_2_1">andere Inhalt</td><td id="up_3_1">was anderes</td></tr> <tr><td id="up_1_2">Inhalt</td><td id="up_2_2">andere Inhalt</td><td id="up_3_2">was anderes</td></tr> <tr><td id="up_1_3">Inhalt</td><td id="up_2_3">andere Inhalt</td><td id="up_3_3">was anderes</td></tr> <tr><td id="up_1_4">Inhalt</td><td id="up_2_4">andere Inhalt</td><td id="up_3_4">was anderes</td></tr> <tr id="shower"> <td onMouseOver="navin('up_1_1','up_1_2','up_1_3','up_1_4')">eins</td> <td onMouseOver="navin('up_2_1','up_2_2','up_2_3','up_2_4')">zwei</td> <td onMouseOver="navin('up_3_1','up_3_2','up_3_3','up_3_4')">drei</td> </tr> </table><a href="#" onClick="navin()">Navigation zuklappen</a> </body> </html>
-----------
So, habe ich mal zusammengebastelt.
Die Sachen im <head> Bereich solltest du so lassen. Entscheident ist f?r dich die Tabelle.
Die untereste Zeile der Tabelle hat jeweils ein JS-Eventhanlder mit der Funktion navin()
Dieser Funktion ?bergibst du dann die Zellen, die Sichtbar werden sollen.
Wenn du auf Tabellen verzichten m?chtest, dann musst du oben den CSS Bereich auf einen anderen Tag zuschneiden, die JS Funktion d?rfte aber trotzdem mit allen Tags Funktionieren.
Wichtig ist eben nur, dass du den Nav-elementen allen id-Werte gibst, die dann als Parameter f?r die navin() Funktion dienen.
Falls du noch Fragen haben solltest, kannst du mich gerne per PN anschreiben.
Beitrag ge?ndert am 10.11.2005 13:37 von bladehunter -
Okay, vielen lieben Dank f?r die M?he. Ich werde mich dann gleich mal dransetzen und versuchen, ob ich damit klarkomme. Aber ich denke, das wird schon. Wenn irgendetwas noch unklar sein sollte, melde ich mich noch mal.
DarkAurora
----
Hm, soweit ist das ja ganz gut. Nur leider funzt das nicht so, wie ich es mir vorgestellt habe. Deshalb, denke ich, w?re es besser, wenn ich doch mal erkl?re, was ich vorhabe mit diesem Men?.
Es gibt nur ein Hauptmen?punkt, ?ber diesem soll eine Men?auswahl erscheinen, von denen hin und wieder nach rechts auch noch Men?punkte abzweigen. Sprich: Wie das Startmen? bei Windows. Denn ich bin dabei, einen kleinen virtuellen Computer zu basteln. Den "Explorer" habe ich soweit schon hinbekommen, nur den "Desktop" mit der "Tasktleiste" noch nicht. Die Icons sind schon da und k?nnen auch angeklickt werden. Die "Taskleiste" ist soweit ja auch schon da, nur der "Startbutton" funktioniert eben wegen diesem Men?-Problem leider noch nicht.
So, ich hoffe, dass man damit nun etwas mehr anfangen kann. Ich hoffe es, denn es w?re schade, wenn ich den Startbutton weglassen m?sste.
DarkAurora
Beitrag ge?ndert am 10.11.2005 17:27 von darkaurora -
Ok, ich hoffe du bist mit der CSS Eigenschaft position:absolute bekannt.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
Dann wollen wir mal ein paar Sachen ?ndern:
<style type="text/css">
.nav{visibility:hidden;postion:absolute;}
</style>
Damit sollten wir dann von den Tabellen wegkommen.
Wir wollen statt dessen den Tag <span> nehmen.
F?r jeden Men?punkt erstellst du jetzt einen Span mit folgenden Eigenschaften:
<span class="nav" id="Eigener Id Name" OnMouseOver="navin(Alle Id's der Navigationspunkte, die diesem Navigationspunkt untergeordnet sind. Mit Komma trennen)" style="left:Anzahl der Pixel vom linken Bildschirmrandpx;bottom:Anzahl der Pixel vom unterem Bildschirmrandpx">
F?r den Startbutton definierst du genau das selbe, blo? l?sst du class="nav" weg, da der Startbutton ja immer sichtbar sein soll.
Dann wieder den <script> Bereich (am besten im <head>) notieren: (ohne das <?php und ?> )
<script type="text/javascript"> kill=new Array(); function navin() { for(i=0;i<kill.length;i++)document.getElementById(kill[i]).style.visibility='hidden'; for(i=0;i<navin.arguments.length;i++){document.getElementById(navin.arguments[i]).style.visibility='visible';} kill=navin.arguments; } </script>
So, ich glaube, das w?re alles, was ge?ndert werden m?sste. -
Hmmm, jetzt kommt eine Fehlermeldung, sobald ich den Startbutton ber?hre. Er sagt mir, dass in der Zeile 39 ein Objekt erforderlich ist. Das ist diese Zeile:
for(i=0;i<kill.length;i++)document.getElementById(kill).style.visibility='hidden';
aber was f?r ein Objekt? Hab ich was vergessen oder ?bersehen?
DarkAurora
Beitrag ge?ndert am 11.11.2005 10:49 von darkaurora -
?berpr?f mal, ob die ?bergebenen Parameter wirklich ?bereinstimmen mit den id's der Elemente und ob du keine Leerzeichen in den id's verwendet hast.
-
Ich habe folgendes eingegeben:
<span id="start" OnClick="navin(beenden,Programme)" style="left:100px;bottom:200px"><img src="../start1.gif" border=0
height=20></span><span class="nav" id="beenden" style="left:200px;bottom:200px"><a
href="beenden.html">beenden</a></span><span class="nav" id="Programme" OnClick="navin(Internet)"
style="left:200px;bottom:200px"></span><span class="nav" id="Programme" style="left:200px;bottom:200px"><a
href="i-net.html"Internet</a></span>
Den Rest habe ich einfach so hineinkopiert, wie du es hier reingeschrieben hast.
DarkAurora -
<span id="start" OnClick="navin('beenden,Programme')" style="left:100px;bottom:200px"><img src="../start1.gif" border=0
height=20></span>
<span class="nav" id="beenden" style="left:200px;bottom:200px"><a
href="beenden.html">beenden</a></span>
<span class="nav" id="Programme" OnClick="navin('Internet')"
style="left:200px;bottom:200px"></span>
<span class="nav" id="Programme" style="left:200px;bottom:200px"><a
href="i-net.html"Internet</a></span>
---
Du hast vergessen die Parameter in den Funktionsklammern mit ' zu Strings zu machen. -
Hm, ich hab das jetzt zwar ge?ndert, aber der Fehler bleibt der gleiche. Das ist doch alles zum verzweifeln ...
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
