Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Dokumentation zum Thema "PullDown-Menü" mit der Extension "int_ypslideoutmenu"
#1
Ich bin seit längerem mit dem Thema PullDown-Menü beschäftigt und nutze dieses Thema auch ein wenig zum Lernen von CSS.
Jetzt hat Wolfgang dankenswerterweise ja ein neues Tut über ein JS-PullDown-Menü gemacht, aber nachdem ich mit dem Durcharbeiten des PullDown-Menü Themas fast fertig war habe ich es nun doch fertig dokumentiert und stelle es hier mal zur Verfügung.

Zu sehen ist das Ganze unter www.ai-logistics.de

Ich nutze in diesem Beispiel die Extension [int_ypslideoutmenu], die den Vorteil hat, keinerlei JS-Framework wie jQuery oder Mootools zu verwenden und somit auch keine Konflikte zu verursachen. Zudem ist es recht einfach zu installieren und im TypoScript zu konfigurieren. Dabei spielen die Menü-Zustände im TS eine wichtige Rolle und ich habe sie hier auch mal ausführlich dokumentiert.

Im CSS Bereich steckt hier auch eine Menge drin, allerdings konnte ich nicht alles so lösen, wie ich wollte.

Vielleicht findet ja von euch jemand heraus, wie man den vertikalen Versatz nach unten im Level 2 und Level 3 des Menüs verhindern bzw steuern kann. Wenn dies jeman weiß wäre ich für einen Hinweis recht froh, denn ich tüftle da jetzt schon ne ganze Weile dran rum und komme nicht drauf.


Angehängte Dateien
.pdf   PullDown-Menu mit [int_ypslideoutmenu].pdf (Größe: 98,91 KB / Downloads: 63)
Grüsse
Andi Angel
Zitieren
#2
Danke für die schöne Dokumentation! Smile
Zitieren
#3
Hy,
zu allererst möchte ich sagen, wie toll ich Wolfgangs Seite finde und bin begeistert Big Grin Danke Wolfgang für den guten support.
ich habe das tutorial mit der extension int_ypslideoutmenu von andi909 ausprobiert und muss sagen, ich bin begeistert. danke andi, dass du dir soviel mühe gegeben hast, das int_ypslideoutmenu den usern hier näher zu bringen. dennoch habe ich ein paar formatierungsproblem und hoffe ihr könnt mir dabei helfen. ich bekomme einfach die element style box, die bei mousehover ausgefahren wird größer, sodass der letzte punkt immer abgeschnitten ist. außerdem hägen die punkte zuweit unten und ich bekomme sie nicht höher.
was aber am schlimmsten ist, ist die darstellung in diversen browsern. Dodgy

ich habe mal von jeder ansicht ein screenshot gemacht und angehängt. es wäre toll, wenn ihr mir weiterhelfen könnten.Idea

danke schonmal im voraus
alexWink


Angehängte Dateien Thumbnail(s)
                   
Zitieren
#4
hier schicke ich auch noch die css datei!

danke


Angehängte Dateien
.txt   csslayout.txt (Größe: 3,5 KB / Downloads: 10)
Zitieren
#5
Hi Alex,
kann man das Menü irgendwo online sehen, oder bist du auf einer lokalen Umgebung?

Ich hab seinerzeit auch ziemlich mit dem CSS rumprobiert, und habe auch nicht alles zur Zufriedenheit lösen können, bin allerdings im CSS-Bereich noch Anfänger, aber mitlerweile wird immer mehr klar.

Ohne laufendes Beispiel jedoch ist es schwierig die CSS-Probleme zu finden. Ich schau mirs gerne mal an, wenn du einen Link hast.

VG
Andi

Grüsse
Andi Angel
Zitieren
#6
Hallo zusammen,

ich möchte jetzt nicht den Spielverderber spielen und finde die Arbeit von Andi auch sehr löblich, aber nach dem was ich gesehen habe, hält sich diese Lösung so gar nicht an irgendwelche Webstandards.

Es werden LI-Elemente in DIV-Elementen ohne ein UL verwendet. Außerdem liegen in LIs wiederum DIVs, was auch nicht dem Standard entspricht.

Fazit:
Auch ein PullDown-Menü sollte logisch verschachtelt sein.
Ein ordentlich verschachteltes Menü könnte dann so aussehen:
Code:
<ul class="ebene1">
  <li><a href="#">Startseite</li>
  <li><a href="#">Produkte</a>
    <ul class="ebene2">
      <li><a href="#">Produkt 1</a></li>
      <li><a href="#">Produkt 2</a></li>
      <li><a href="#">Produkt 3</a></li>
      <li><a href="#">Produkt 4</a>
        <ul class="ebene3">
          <li><a href="#">Produkt 4.1</a></li>
          <li><a href="#">Produkt 4.2</a></li>
          <li><a href="#">Produkt 4.3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Unternehmen</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Impressum</a></li>
</ul>

Das soll den Arbeitsaufwand von Andi keinesfalls schmälern, aber ich würde einen Aufbau nach Webstandards empfehlen. Andernfalls kann es immer zu Fehlern in Browsern kommen. Des weiteren interpretieren auch Crawler eine logisch und vor allem hierarchisch aufgebaute Menüstruktur besser (Stichwort Google Sitelinks in Verrbindung mit URL).

zu jQuery:
Man kann jQuery auch im noConflict-Mode laufen lassen. Dann können auch andere Frameworks wie beispielsweise mootools zum Einsatz kommen. Mehr dazu hier.

Viele Grüße
Micha
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren
#7
Hallo Micha,
danke für deinen Komentar und die Anregungen!!

Ich hatte seinerzeit das Problem ein PullDown-Menü umsetzen zu müssen. Das Tutorial von Wolfgang gab es da noch nicht und von JS habe ich (noch) zu wenig Ahnung. Da habe ich in den Extensions gesucht und dann das "ypslideoutmenu" gefunden.

Die Einbindung dieser Ext hatte dann auch ganz gut funktioniert, nur die Pfeile habe ich im ersten Moment nicht hinbekommen. Auch die Darstellung in den verschiedenen Browsern machte eigentlich keine Probleme.

Die CSS-Definitionen habe ich eigentlich (glaube ich) nur dort angepasst, wo ich wegen der Pfeil-Problematik die verschiedenen Menü-Zustände abprüfen muß.

Warum sollte in einem <li> kein <DIV> Container definiert werden ??
Ich dachte der <DIV> hat nur die Aufgabe die Verbindung zwischen HTML und der CSS-Datei herzustellen, damit man formatieren kann.

Könntest du die von mir falsch verwendeten CSS-Strukturen näher erläutern oder einen Link posten, wo man sich darüber genauer informieren kann?

Oder ist die Ext. an sich das Problem und man sollte diese gar nicht verwenden, weil sie sich nicht an die Standards hält.

Ich möchte keinesfalls in meinen Beschreibungen (noch dazu wenn sie öffentlich einsehbar sind) falsches Wissen verbreiten !!!

Da Du da ja anscheinend ziemlich tief drinsteckst, wäre es schön, wenn du mit deinem Wissen die falsch oder unzulänglich beschriebenen Punkte aufzeigen würdest. Damit hätte ich Gelegenheit das Ganze zu korrigieren und wir Anfänger hätten alle was gelernt.

viele Grüße
Andi
Grüsse
Andi Angel
Zitieren
#8
Hallo Andi,

zunächst möchte ich noch einmal betonen, dass ich dein Engagement sehr schätze. Kaum einer macht sich heute noch die Arbeit Wissen weiter zu geben - und dann noch in so detailliert beschriebener Form. Genau das schätze ich auch an Wolfgang sehr. Dies ist einer der Hauptgründe, warum auch ich mich hier einbringe.

So lange deine Lösung ja funktioniert, ist es auch nicht weiter tragisch. Es kann halt sein, dass es mal ein Browser geben wird, der das ganze nicht so leicht verdaut.

Zu deiner Frage:
DIV-Container benötige man nicht um eine wie du sagst Verbindung zur CSS-Datei herzustellen. Folgende Möglichkeiten hast du z.B., wenn ich von meinem ersten HTML-Beispiel ausgehe:
Code:
/* alle LI-Elemente im UL mit der Klasse ebene1 definieren (auch in tieferen Ebenen) */
ul.ebene1 li {
  color: #888;
}

/* nur die direkten Kind-LI-Elemente im UL mit der Klasse ebene1 definieren, nicht aber LI-Elemente in z.B. der ebene2 */
ul.ebene1 > li {
  color: #888;
}

/* alle LI-Elemente ab der 2. Ebene definieren */
ul.ebene2 li {
  color: #888;
}
/* gleiches Ergebnis wie oben */
ul.ebene1 > li > ul li {
  color: #888;
}

/* nur Kind-LI-Elemente in der 2. Ebene definieren */
ul.ebene2 > li {
  color: #000;
}
/* gleiches Ergebnis wie oben */
ul.ebene1 > li > ul > li {
  color: #000;
}

/* alle A-Elemente in einem LI definieren */
ul.ebene1 li a {
  display: block;
  padding: 5px 15px;
  color: #888;
}

Es gibt also viele Möglichkeiten auch ohne DIV-Container eine Auszeichnung mit CSS zu erreichen. Außerdem kannst du auch LI-Elementen Klassen zuweisen und so ein LI direkt ansprechen.

Du könntest dabei sogar auf JavaScript verzichten und das Menü nur mit CSS bauen.
Dazu findest du hier weitere Infos: Free CSS Drop Down Menu

Ich kombiniere meine Menüs meistens. So funktioniert mein DropDown bzw. PullDown Menü mit JavaScript (SlideDown-Effekte etc.) und gleichzeitig auch ohne JavaScript, falls dies ausgeschaltet sein sollte. Quasi als eine Fallback-Lösung.

Viele Grüße
Micha
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren
#9
Hallo Micha,
vielenDank für Deine Antwort und die Tips.

Neben dem Wunsch anderen zu helfen ist das einer der Gründe, dass ich die Dokus, die ursprünglich für mich selbst sind (dann muß ich nicht alles im Hirn behalten), auch anderen zugänglich mache. Denn ich hoffe immer darauf, dass einer der viel mehr weiß, wie ich solche Hinweise und Tips gibt; nur so kommt man an die Feinheiten ohne den manchmal utopischen Aufwand, sich alles selber suchen zu müssen.

Ich werd das mit den CSS-Pull-Downs bei Gelegenheit mal ausprobieren, denn ich bin auch nicht so richtig begeistert von den JS - Lsungen.

Auch deine Hinweise CSS sind für mich als CSS-Anfänger sehr hilfreich!! Jetzt hab ich nen Hinweis nach dem ich forschen kann, denn mir war in der Zuordnung noch einiges unklar.

Danke nochmals !

Grüsse
Andi Angel
Zitieren
#10
Danke euch Beiden für die nette, kompetente und vorallem schnelle Lösung. werde mir das mit den css nochmal genauer anschauen. melde mich dann nochmal wenn es geklappt oder nicht geklappt hat Wink

Danke nochmal Smile
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste