XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS DropDown-Menü Hilfe für Profis (http://xhtmlforum.de/showthread.php?t=71885)

HaPe 01.04.2015 19:45

CSS DropDown-Menü Hilfe für Profis
 
Hallo, ich bin CSS Anfänger und habe mir durch mühsame Web-Inspiration ein Dropdown-Menü zusammengebaut.

Das Menü habe ich auf der Webseite 8x platziert, aber nur das erste funktioniert so wie es sollte. (Beim Aufklappen eines 2ten Menüs, sollte das offene Menü wieder schliessen. Wahrscheinlich eine Kleinigkeit, aber ich kann den Fehler nicht finden.)
Ich habe das Menü online gestellt wo man es einsehen kann. Für jede Hilfe bin ich sehr dankbar.
ADRESSE: Web-Start

schatzi 02.04.2015 00:42

Hallo!

Alle deine Menüs haben dieselbe ID. Das ist einerseits nicht erlaubt, andererseits ändert dein Skript dadurch die Klassen fehlerhaft.

HaPe 03.04.2015 16:07

Danke, ja, aber das ist nicht das eigentliche Problem. Ich habe die IDs auf HTML und CSS angepasst. Vielleicht so nicht üblich, aber Fehlerlos.

Von JS habe ich aber keine Ahnung. Auf der Webseite gibt es 8 Dropdown Menüs mit der ID cssmenu "1-8"
Mit der Datei script2.js ist aber nur das erste Dropdown Menü aktiviert.
Welche Änderungen muss ich jetzt noch auf dem Script vornehmen, damit alle Menüs aktiv werden?
Kann mir da wer helfen?

Web-Start

script2.js

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu ul ul lidd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().len gth == 0) {
return true;
} else {
return false;
}
});
});
} )( jQuery );

etux 04.04.2015 10:36

Zitat:

Zitat von HaPe (Beitrag 544007)
Danke, ja, aber das ist nicht das eigentliche Problem.

Was wäre denn dann das eigentliche Problem? ;)

Zitat:

Zitat von HaPe (Beitrag 544007)
Ich habe die IDs auf HTML und CSS angepasst. Vielleicht so nicht üblich, aber Fehlerlos.

Keine Ahnung, was Du damit meinst. Aber fehlerlos ist es keineswegs. Denn:
Zitat:

Zitat von schatzi (Beitrag 543946)
Alle deine Menüs haben dieselbe ID. Das ist einerseits nicht erlaubt, andererseits ändert dein Skript dadurch die Klassen fehlerhaft.

Ist Dir das nicht Hilfe genug?
Statt es grundlos zu widersprechen, hättest Du besser die ID (id=“cssmenu“, bzw. #cssmenu) überall (html, css, JavaScript) mit der Klasse (class=“cssmenu“, bzw. .cssmenu) ausgetauscht und getestet. Aber wenn Du es eh besser weißt … :D

HaPe 04.04.2015 14:36

Zitat:

Zitat von etux (Beitrag 544014)
Was wäre denn dann das eigentliche Problem? ;)


Keine Ahnung, was Du damit meinst. Aber fehlerlos ist es keineswegs. Denn:

Ist Dir das nicht Hilfe genug?
Statt es grundlos zu widersprechen, hättest Du besser die ID (id=“cssmenu“, bzw. #cssmenu) überall (html, css, JavaScript) mit der Klasse (class=“cssmenu“, bzw. .cssmenu) ausgetauscht und getestet. Aber wenn Du es eh besser weißt … :D

Vielleicht ist ja mein Schweizerdeutsch unverständlich, aber widersprochen hat eigentlich niemand, ausser Dir :)
Der Tipp von Schatzi war mir sehr willkommen, und die IDs habe ich angepasst, mit meinen Anfängerkenntnissen.
(2ter Link, wie beschrieben, wenn du es gelesen hättest.) Bei einem Validator-Test kommt ein Fehlerlos.

Das Problem liegt aber beim Java-Script, und davon versteh ich rein gar nichts.
Ich hab jetzt aber in einem anderen Forum Hilfe bekommen. Bei einem ersten Test funktionierts, ich muss jetzt nur noch die ganze Seite anpassen.

Ich danke dir trotzdem, auch wenn du nicht viel dazu beigetragen hast :).

etux 04.04.2015 14:47

Ja, den zweiten Link muss ich übersehen haben.
Trotzdem finde ich es einfacher, so wie ich es Dir vorgeschlagen habe, den Quelltext zu ändern. Habe es auch gerade selbst getestet:
Link: tests.emil-webdesign.net/HaPe/

HaPe 04.04.2015 15:39

Zitat:

Zitat von etux (Beitrag 544020)
Ja, den zweiten Link muss ich übersehen haben.
Trotzdem finde ich es einfacher, so wie ich es Dir vorgeschlagen habe, den Quelltext zu ändern. Habe es auch gerade selbst getestet:
Link: tests.emil-webdesign.net/HaPe/



OK, ich brauch die Seite nur für meine oft besuchten Links mit dem Browser, auf meinem Computer abgespeichert.
Farb Titel und Form werde ich noch anpassen.
Wenns dich interessiert wie es jetzt funktioniert, dann klick nochmal auf den 2ten Link.

Ich werde das Muster dann irgendwann löschen.

Grüssli aus der Schweiz
HaPe

etux 04.04.2015 16:24

Zwischen Deiner und meiner Variante gibt es einen Unterschied beim Schließen der Untermenüs – welche war die von Dir ursprünglich gewollte?
Ich fände es schon besser, wenn man wo anders klickt, dass die schon geöffnete Untermenüs wieder schließen (s. meine Testseite).

Nachtrag:
Mal ehrlich, jetzt hast Du für jedes Menü ein extra JavaScript – also 8 insgesamt.
Wäre es nicht einfacher bloß #cssmenu in .cssmenu zu ändern – s. html-Quellcode in meiner Testseite.

HaPe 04.04.2015 17:05

Zitat:

Zitat von etux (Beitrag 544022)
Zwischen Deiner und meiner Variante gibt es einen Unterschied beim Schließen der Untermenüs – welche war die von Dir ursprünglich gewollte?
Ich fände es schon besser, wenn man wo anders klickt, dass die schon geöffnete Untermenüs wieder schließen (s. meine Testseite).

Nachtrag:
Mal ehrlich, jetzt hast Du für jedes Menü ein extra JavaScript – also 8 insgesamt.
Wäre es nicht einfacher bloß #cssmenu in .cssmenu zu ändern – s. html-Quellcode in meiner Testseite.

Ja, leider noch etwas kompliziert, das ist meine erste CSS Webseite. Da kann man bestimmt noch so einiges besser machen. Ich werde noch viel üben und verbessern. Fürs erste funktionierts.

PS: Beim öffnen der Menüs, schliesst das bereits offene Menü. Wenn das bei dir nicht funktionierte, musst du vielleicht die Seite neu laden.

Grüssli
HaPe

etux 04.04.2015 17:11

Zitat:

Zitat von HaPe (Beitrag 544023)
PS: Beim öffnen der Menüs, schliesst das bereits offene Menü. Wenn das bei dir nicht funktionierte, musst du vielleicht die Seite neu laden.

Da schließt nichts. Nur wenn die Klicks unterhalb einer Gruppe sind – aber das meine ich nicht. Sondern, wenn man nach einander unter unterschiedlichen Gruppen klickt.


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:02 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020