Archivlink: javarea.de Forum > JavaScript > Submenü soll aufgeklappt bleiben
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Submenü soll aufgeklappt bleiben

Pages: [1] 2 ... nächste » ... Letzte »

geschrieben von Gast am 10.01.2010 - 14:05
Hallo,

habe ein Problem mit diesem Menü - sobald ich über das Submenü eine Auswahl treffe, klappt alles zu. Der Besucher weiß somit nicht mehr, wo er war. Könnt ihr mir helfen? Die Unterkategorie sollte auf bleiben solang ich darin suche und sobald ich einen anderen Menüpunkt aufsuche wieder zuklappen.

Ich mach die Website für eine Freundin, bin kein Profi und wäre dankbar, wenn jemand helfen könnte. Lieben Dank im voraus, Christine


geschrieben von Danny am 10.01.2010 - 22:32
Hallo Christiane,

um was für ein Script geht es denn, bzw. um welche Seite bzw um welchen Code geht es denn ?

Gruß Danny

geschrieben von Gast am 10.01.2010 - 23:24
Hallo Danny,

hatte die Site als Datei angehängt aber das hat wohl nicht geklappt.
Hier der Code:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\">
<meta http-equiv=\"content-script-type\" content=\"text/javascript\">
<meta http-equiv=\"content-style-type\" content=\"text/css\">
<title>Foldoutmenue Vertical</title>

<style type=\"text/css\" media=\"screen\">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

#menu, #menu ul
{
padding: 0px;
margin: 0px;
}

#menu li
{
border: 1px solid #fff;
list-style-type: none;
font-weight: bold;
cursor: pointer;
display: block;
}

#menu a
{
text-decoration: none;
font-weight: normal;
padding-left: 10px;
display: block;
}
//-->
</style>

<script type=\"text/javascript\">
<!--
function hideSub()
{
if (!document.getElementsByTagName)
return;

var mnu = document.getElementById(\'menu\');
var toplis = mnu.getElementsByTagName(\'li\');

for (var it = 0; it < toplis.length; it++)
{
var sublis = toplis[it].getElementsByTagName(\'li\');

for (var is = 0; is < sublis.length; is++)
if (sublis[is].style)
sublis[is].style.display = (toplis[it].className == \'show\') ? \'block\' : \'none\';
}
}

function mShow(Me)
{
if (!Me.getElementsByTagName)
return;

var mylis = Me.getElementsByTagName(\'li\');

if (!mylis)
return;

for (j = 0; j < mylis.length; j++)
mylis[j].style.display = (mylis[j].style.display == \'block\') ? \'none\' : \'block\';
}
//-->
</script>

</head>
<body onload=\"hideSub();\">

<ul id=\"menu\">
<li class=\"show\" onclick=\"mShow(this);\">Options 1
<ul>
<li><a href=\"#\">Item 1</a></li>
<li><a href=\"#\">Item 1</a></li>
<li><a href=\"#\">Item 1</a></li>
<li><a href=\"#\">Item 1</a></li>
</ul>
</li>

<li onclick=\"mShow(this);\">Options 2
<ul>
<li><a href=\"#\">Item 2</a></li>
<li><a href=\"#\">Item 2</a></li>
<li><a href=\"#\">Item 2</a></li>
<li><a href=\"#\">Item 2</a></li>
</ul>
</li>

<li onclick=\"mShow(this);\">Options 3
<ul>
<li><a href=\"#\">Item 3</a></li>
<li><a href=\"#\">Item 3</a></li>
<li><a href=\"#\">Item 3</a></li>
</ul>
</li>

<li onclick=\"mShow(this);\">Options 4
<ul>
<li><a href=\"#\">Item 4</a></li>
<li><a href=\"#\">Item 4</a></li>
<li><a href=\"#\">Item 4</a></li>
<li><a href=\"#\">Item 4</a></li>
<li><a href=\"#\">Item 4</a></li>
</ul>
</li>
</ul>

</body>
</html>

Hab es aber so abgeändert, daß bereits im Hauptmenü eine Seite im MainFrame aufklappt. Guckst Du hier: http://www.spassmitpferd.de

Liebe Grüße und herzlichen Dank im voraus,
Christine

geschrieben von Gast am 11.01.2010 - 00:50

geschrieben von Danny am 11.01.2010 - 21:36
Hallo Christine,


du hast ja ein onclick auf dem <li> Element der Hauptkategorie. Das ruft die Funktion mshow auf, die entweder alle Unterelemente öffner oder sofern sie schon offen sind alle schließt.

In einer Liste ist es aber so, dass eine Unterliste in dem übergeordneten <li> Element steht. Das heist wenn du auf eine Unterliste bzw auf einen Link deiner Unterkategorie klickst, klickst du auch auf das übergeordnete Element und rufst mshow erneut auf, was alle Element wieder schließt.

Als Lösung würde ich folgendes vorschlagen. Du gibst dem Link der Hauptkategrie das onclick Event, denn das steht für sich nicht in Verbindung mit der Unterliste. Die Funktion mshow muss dann noch entsprechend angepasst werden. So in etwa:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
function mShow(Me)
{
	if (!Me.getElementsByTagName)
		return;

	var mylis = Me.parentNode.getElementsByTagName('li');

	if (!mylis)
		return;

	for (j = 0; j < mylis.length; j++)
		mylis[j].style.display = (mylis[j].style.display == 'block') ? 'none' : 'block';
}


und als Beispiel Liste in dem das <a> Element das onclick besitzt.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
<li class="mshow"><a href="../Showprogramme/Showprogramme.htm"  onclick="mShow(this);" target="mainFrame"><strong>Showprogramme </strong></a>   
    <ul>
      <li><a href="../Showprogramme/Feuerreiter/Feuerreiter.htm" target="mainFrame">Feuerreiter</a></li>
      <li><a href="../Showprogramme/Cowgirl/Cowgirl.htm" target="mainFrame">Cowgirl</a></li>
      <li><a href="../Showprogramme/Springquadrille/Springquadrille.htm" target="mainFrame">Springquadrille</a></li>
      <li><a href="../Showprogramme/KlassischeQuadrille/KlassischeQuadrille.htm" target="mainFrame">klassische Quadrille</a></li>

	  <li><a href="../Showprogramme/PippiLangstrumpf/PippiLangstrumpf.htm" target="mainFrame">Pippi Langstrumpf</a></li>
      <li><a href="../Showprogramme/WerWirdGewinnen/WerWirdGewinnen.htm" target="mainFrame">Wer wird gewinnen?</a></li>
      <li><a href="../Showprogramme/BaenderReiten/BaenderReiten.htm" target="mainFrame">Bänder reiten</a></li>
      <li><a href="../Showprogramme/DerDummeAugust/DerDummeAugust.htm" target="mainFrame">der dumme August</a></li>
	  <li><a href="../Showprogramme/BlackAndWhithe/BlackAndWhite.htm" target="mainFrame">Black & White</a></li>
      <li><a href="../Showprogramme/GalaShow/GalaShow.htm" target="mainFrame">Gala-Show</a></li>

      <li><a href="../Showprogramme/SpanischeImpressionen/SpanischeImpressionen.htm" target="mainFrame">spanische Impressionen</a></li>
      <li><a href="../Showprogramme/ReitendesFahren/ReitendesFahren.htm" target="mainFrame">reitendes Fahren & Zirzensik</a></li>
    </ul>
  </li>


Gruß Danny

geschrieben von Gast am 12.01.2010 - 02:03
Hallo Danny!

Ganz großen und herzlichen Dank an Dich, es funzt! Es mag banal für Dich sein aber mich kostete es (erfolglose) Stunden des rumprobierens. Bin total erleichtert und kann jetzt beruhigt schlafen gehen.
Hast Du vielleicht einen Tip für mich, wo ich mich bisschen in die Materie einlesen kann? Es nervt, nix zu wissen. Sollte erstmal was für Dummys sein, ich hab echt kein Schimmer von.

Ach, wie bist Du eigentlich an den Quelltext rangekommen? Ganz schön tricky :0))

Wünsch Dir noch eine schöne Zeit und werd mich hier mal sicherheithalber anmelden. Hab noch sooo viele Fragen. Falls Du mal in der Gegend bist und Lust auf Cappuchino hast, findest mich hier: don-nico.de

Lieben Dank nochmal und vielleicht bis demnächst,
Christine

geschrieben von Danny am 13.01.2010 - 13:03
Hallo,
das mit dem studenlangen erfolglosen rumprobieren kann ich dir gut nachfühlen ;) Aber ich finde es gut wenn jemand dazulernen und es verstehen möchte und nicht einfach fertige Lösungen zusammenkopiert :-)

Ich denke eiine der besten kostenlosen Resourcen ist Selfhtml ( http://de.selfhtml.org/ ). Kommt natürlich immer auf deine Anforderungen an was du umsetzten möchtest, aber wenn du mit dem HTML,CSS und Javascript Teil beginnst, machst du nichts verkehrt.

Da HTML vom Browser interpretiert und angezeigt wird, wird also der gesamte Quelltext an diesen geschickt. Deswegen kann man sich den im Browser (zb. Firefox Ansicht -> Seitenquelltext anzeigen) darstellen.

Wenn du eine Frage hast meld dich ruhig ;)

Lustigerweise wohnt mein Bruder bei euch in der Gegend, hat letztes Jahr in Rottenbuch auf einem Pferdehof gearbeitet und kennt zumindest die Sandra auch. So klein ist die Welt .. ;)

Gruß Danny

geschrieben von Gast am 22.01.2010 - 21:51
Hallo Danny,

ist ja witzig!!! Komm grad von einer Reitstunde auf Sandra`s Seniorito :o) Vielleicht war Dein Bruder ja sogar an dem Stall wo Sandra ihr Jungs stehen hat (Mayr). Wenn Du Dein Bruderherz besuchst, schnei doch mal bei uns rein!

Weil Du grad von Firefox schreibst... hab den eben installiert um nachzuprüfen ob die Site überall ordentlich läuft. Leider klappt das dort - im Gegensatz zum Explorer - mit den sich auf Klick öffnenden und schließenden Hauptmenues nicht. Nur beim ersten Menuepunkt funzt es obwohl ales sonst identisch ist. Weißt Du Abhilfe?

Bin grad dabei, ein Anmeldeformular für Sandra zu installieren aber hab kein Schimmer von Datenbankanbindung. Irgendwie scheint mir der Hoster hosteurope auch sehr kompliziert zu sein, jedenfalls kann ich die verdammte, neu eingerichtete Datenbank nicht verwalten weil permanent eine Fehlermeldung trotz richtiger Benutzer-& Passwortkennung kommt. Meinst ich soll zu Stratio wechseln? Bin selbst dort und hab da noch nie Stress gehabt.

Ohja, bei Selfhtml hab ich schon sehr oft gestöbert und auch einiges davon mit genommen. Aber bezüglich Mysql, Datenbank und so steig ich irgendwie aus, ich check das nicht wirklich um ehrlich zu sein. Vielleicht muß ich mich da durch die Praxis durchkämpfen um das nachvollziehen zu können wie es wirklich funzt.

Ich wünsch Dir einen schönen Abend und meld mich jetzt umgehend hier an,
Ciao, Christine

geschrieben von Danny am 23.01.2010 - 15:08
Hallo Christine,

ja er war im Reitstall Mayr

Mit dem Fehler bei den Menüpunkten. Du meinst das z.B. der Punkt "Bildergalerie" immer offen ist ?

Schau dir den Code an der Stelle genauer an:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
<li class="mshow">
    <a target="mainFrame" onclick="mShow(this);" href="../Bildergalerie/Bildergalerie.htm"><strong>Bildgalerie</strong></a>
</li>
<ul>
    <li>
        <a target="mainFrame" href="../Bildergalerie/Shows/index.htm">Shows</a>
    </li>
    ...
</ul>


Das <ul> ist ausserhalb von dem <li> der Bildergalerie. Deswegen sind die Punkte Shows, Auftritte I, ... auch keine Unterliste.
Wenn du dir im Vergleich dazu den ersten Menüpunkt ansiehst hat dieser folgende Struktur

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
<li class="mshow">
    <a target="mainFrame" onclick="mShow(this);" href="../Showprogramme/Showprogramme.htm"><strong>Showprogramme</strong></a>  
    <ul>
        <li style="display: none;">
            <a target="mainFrame" href="../Showprogramme/Feuerreiter/Feuerreiter.htm">Feuerreiter</a>
        </li>
    </ul>
</li>


Das <ul> ist hier im <li> und somit auch eine Unterliste. Das Javascript sucht zum öffnen / schließen nur in der Unterliste des angeklickten Elementes, daher tut sich auch nichts im FF.
Manche Browser nehmen solche kleinen Fehler nicht so ernst, andere schon ..

Wegen dem Datenbankproblem, da weiß ich nicht wie Hosteurope das genau handhabt, aber gehen sollte das bei denen auch. Wa kommt denn für eine Fehlermeldung? Strato ist einer der größten Provider in Deutschland .. und wie das so ist, wo viele Kunden sind wird auch viel geschimpft.. ist bei der Telekom ja nicht anders ;) Wenn du aber zufrieden bist, warum nicht .. und wenn du wegen der Mindestvertragslaufzeit aus dem Hosteurope Vertrag rauskommst...

Alternativ könnte ich dir selbst Hosting anbieten. Zur Zeit biete ich das zwar nur meinen Webdesign Kunden an, aber ich stecke in den Planungen und Vorbereitungen das auch Jedermann zugänglich zu machen. Natürlich nicht so groß wie Strato und Co , aber häufig können die kleinen auch besser und individueller auf die Wünsche der Kunden eingehen
Kannst du dir ja mal überlegen, dann finden wir auch bestimmt einen guten Preis

Zitat
 
Ohja, bei Selfhtml hab ich schon sehr oft gestöbert und auch einiges davon mit genommen. Aber bezüglich Mysql, Datenbank und so steig ich irgendwie aus, ich check das nicht wirklich um ehrlich zu sein. Vielleicht muß ich mich da durch die Praxis durchkämpfen um das nachvollziehen zu können wie es wirklich funzt.


Braucht alles seine Zeit ;)

Viele Grüße
Danny

geschrieben von Gast am 25.01.2010 - 09:19
Hallo Danny,

dank Dir für Deine Antwort. Mir lässt sowas ja keine Ruhe und ich hab es selbst durch Vergleich rausgefunden: Den </li> jeweils entfernt und Firefox arbeitete anständig.

Dank Dir!

Mir hängt der Ar... zu tief um das mit den Datenbanken hin zu bekommen. Habe nun alle Formulare schicht in PHP. Geht auch.

Wg. Wechsel: Das kann ich nicht selbst entscheiden und bei Hosteurope gibt es auch Kündigungsfristen.

Meld mich bei Bedarf zurück, ja?

Schönen Tag und liebe Grüße, Christine

geschrieben von fraukausi am 29.01.2010 - 20:11
Hallo Danny, ich hab schon wieder paar Problemchen:

1. Ich kann mich hier nicht einloggen obwohl ich Bestätigungsmail erhalten hab.
2. Sandra möchte gern, daß das mit dem Menü folgendermaßen funzt und ich weiß nicht, wie ich das umsetzen soll. Also:
Klicke ich auf "Showprogramme", öffnet sich das Untermenü. Klicke ich auf "Bildgalerien", öffnet sich das Untermenü, ... Irgendwann rutscht das ganze Menü so tief, daß man die unteren Punkte nicht mehr ansteuern kann. Am einfachsten wäre es, wenn "Showprogramme" sich automatisch schließt sobald ich "Bildgalerien" anklicke. Sag, weißt Du da einen Trick?
3. Woher und wie krieg ich Steuerleisten unter Filme womit der Nutzer vor- und zurückspulen, stoppen und Pause machen kann?

Hier der Link zu Sandras Seite damit Du nicht suchen mußt: http://www.spassmitpferd.de

Hab langsam schon ein schlechtes Gewissen weil ich Dich immer nur brauche - wie kann ich mich für Deine Hilfe revanchieren? Gibt`s hier sowas wie eine Kaffekasse?

Lieben Dank im voraus,
Christine

geschrieben von Danny am 30.01.2010 - 22:37
Hallo Christine,

zu 1. versuche dir mal ein neues Passwort zuzuschicken. Vielleicht ist da etwas schief gegangen.
zu 2. Du hast die Funktion hideSub() die auch bei onload aufgerufen wird damit nach dem Laden der Seite erst einmal alle Menüpunkte geschlossen sind. Das einfachste ist also diese Funktion vor dem öffnen eines Menüpunktes aufzurufen, dann werden immer erst alle Punkte geschlossen und im Anschluss der angeklickte geöffnet.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
function mShow(Me)
{
    hideSub();

    if (!Me.getElementsByTagName)
		return;

    .. weiterer code ..


zu 3. Habe zwar keinen Link zu Filmen gefunden, aber das ist immer ein etwas schwieriges Thema. Wenn man es mit dem Mediaplayer einbindet funktioniert das spulen nicht oder nur schlecht. Es gibt Flashvideoplayer, wie sie youtube, myvideo und Co einsetzen. Dafür ist es meines Wissens aber erforderlich deine Videos mpg, avi, etc. in ein Flashvideo .flv zu konvertieren.
Ich würde aber um dir Aufwand zu ersparen empfehlen, nutze Youtube.
Erstelle dort einen Account, lade die Videos hoch und binde sie auf deiner Seite ein. Funktioniert super. Klar hast du ein Youtube Logo mit dabei, aber du sparst dir den Speicherplatz und den Traffic der bei Videos schnell überhand nehmen kann.

Auch wenn die Javarea mit den letzten Jahren keine einfachen Zeiten hatte und zunehmen ruhiger geworden ist und deshalb nur noch eine Hand voll User hier aktiv ist um Fragen zu beantworten, machen wir das alles aus Spaß und Freude. Deshalb brauchst du auch kein schlechtes Gewissen zu haben.

Gruß Danny

geschrieben von fraukausi am 31.01.2010 - 11:47
Hallo Danny und lieben Dank für Deine so schnelle Hilfe!

Ich bewundere Deine Logik schon sehr und so wie Du es erklärst kommt es so simpel rüber. Es ist von entscheidendem Vorteil zu wissen, welcher Code was macht

Mir persönlich gefiel die vorherige Variante ja besser weil man als User selbst entscheiden kann was man auf und zu macht aber wenn es so gewünscht ist, dann halt nicht. Optimal wäre es, wenn es automatisch zuklappt, sobald man zum nächsten Menüpunkt clickt - außer natürlich auf das Untermenü. Die Frage ist nur, wie lange das Menue nun entgültig so bestehen kann, wenn immer mehr Links dazu kommen. Aus Platzgründen werde ich dann vermutlich zu einem Popupmenü wechseln müssen, wo die Unterpunkte neben dran aufgelistet werden.

Hab mir gestern vormittag das "Tree Menu" von Sothink zugelegt, ein neues Menue gebastelt alles in Dreamweaver gepackt und bin ganz enttäuscht weil jedes Mal eine Fehlermeldung von Zeile 14 kommt und gar nichts sichtbar ist. Habe dann die Template-Vorlagen des Programmes getestet ohne was daran manipuliert zu haben aber immer kommt die gleiche Meldung des Browsers. Hatte gehofft, daß ich damit problemlos zurecht komme und jetzt sowas. Woran könnte das denn liegen? Stimmt da was an der Einbindung in Dreamweaver nicht obwohl das Implementieren reibungslos klappte? Ich häng die Dateien mal an.

Das mit den Filmen werde ich so handhaben wie Du vorgeschlagen hast, danke. Die Filme hab ich z.B. auf den Seiten Showprogramme, Gelassenheitstraining, Führungskräftetraing verlinkt.

Ich wünsch Dir ein schönes Restwochenende und dank Dir nochmal ganz herzlich,
Christine


geschrieben von fraukausi am 16.02.2010 - 11:16
Hallo Danny,

kannst Du mir mal wieder helfen? Es geht um den Menüpunkt Bildergalerie. Ich möchte, daß die ersten Listenpunkte (Auftritte & Shows, Zirkuskurse, Sonstiges) als Listenpunkte sichtbar sind und erst beim anklicken ebenfalls auf- und zuklappen. Ist das überhaupt möglich, so eine Unterlistung funktionell zu machen?

Lieben Dank schon mal und herzliche Grüße,
Christine

geschrieben von Danny am 16.02.2010 - 12:23
Hallo Christine,

hatte deinen letzten Beitrag gar nicht mitbekommen.. sorry.
Zu dem aktuellen:
Wie meinst du das genau, wenn man auf die Seite kommt. Dann sollen Alle Hauptmenüpunkte geschlossen sein, bei Bildergalerie sieht man auch nur "Bildergalerie". Wenn man auf Bildergalerie klickt sieht man Auftritte & Shows, Zirkuskurse und Sonstiges. Wenn man dann auf Auftritte & Shows klickt sieht man dann: Auftritte I, Auftritte I und Shows ? Richtig ?


Gruß Danny


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.