zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS DropDown-Menü Hilfe für Profis

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.04.2015, 19:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 9
HaPe befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.04.2015, 00:42
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo!

Alle deine Menüs haben dieselbe ID. Das ist einerseits nicht erlaubt, andererseits ändert dein Skript dadurch die Klassen fehlerhaft.
__________________
Gruß schatzi
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.04.2015, 16:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 9
HaPe befindet sich auf einem aufstrebenden Ast
Standard

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 );
Mit Zitat antworten
  #4 (permalink)  
Alt 04.04.2015, 10:36
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von HaPe Beitrag anzeigen
Danke, ja, aber das ist nicht das eigentliche Problem.
Was wäre denn dann das eigentliche Problem?

Zitat:
Zitat von HaPe Beitrag anzeigen
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 anzeigen
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 …
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #5 (permalink)  
Alt 04.04.2015, 14:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 9
HaPe befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
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 …
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 .
Mit Zitat antworten
  #6 (permalink)  
Alt 04.04.2015, 14:47
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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/
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #7 (permalink)  
Alt 04.04.2015, 15:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 9
HaPe befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
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
Mit Zitat antworten
  #8 (permalink)  
Alt 04.04.2015, 16:24
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (04.04.2015 um 16:32 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 04.04.2015, 17:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2015
Beiträge: 9
HaPe befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.04.2015, 17:11
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von HaPe Beitrag anzeigen
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.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, dreamweaver, javascript, webseite

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Dropdown Menü: Hover-Effekt auch wenn Maus im Untermenü ist Sp33dy G0nz4l3s CSS 2 12.06.2010 18:38
CSS Menü MadBall CSS 3 21.03.2010 04:04
css dropdown menue / abstände designWerker CSS 0 03.11.2008 19:23
Popdown Menü mit CSS Nohma CSS 0 08.10.2007 21:58
CSS Dropdown Menü Mit Grafiken watermanFFM CSS 2 14.03.2006 12:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:21 Uhr.