Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Module ›

Flyout-Menü mit Content, Submenü hover wechselt Content

Eingetragen von DrupalFan (1640)
am 05.09.2016 - 20:07 Uhr in
  • Module
  • Drupal 7.x

Ich möchte folgende Flyout-Menü Funktionalität realisieren:

- Gegeben ist ein waagrechtes Hauptmenü oben
- Eines der Menüpunkt ist ein Flyout-Menüpunkt
- Bei mouseover öffnet sich das "Flyout-Overlay", welches folgendes enthält:
--- links ein Subemnü, senkrecht angeordnet
--- rechts den Content des jeweils aktiven Submenü-Punktes
--- beim Öffnen des Flyout-Menüs ist der erste Menüpunkt des Submenüs aktiv und daneben wird der dazugehörige Content angezeigt
--- beim mouseover über einen der anderen senktrecht angeordneten Submenü-Punkt wird rechts sofort der zugehörige Content angezeigt
--- klicken ist also nicht nötig, denn dann würde die Seite ja neu laden und das geöffnet Flyout-Overlay schließen.

Wie kann man das in Drupal 7 realisieren?
Das Modul "ultimenu" könnte geeignet sein. Wie realisiert man aber das senkrechte Submenü, welches mittels mouseover die jeweiligen Inhalte der einzelnen Menüpunkte sofort anzeigt, ohne das je das Flyout-Menü geschlossen wird? Danke.

Es soll ähnlich sein wie beim WhiteHouse der Menüpunkt "ISSUES" mit Flyout, nur dass beim mouseover über die Untermenüpunkte "Popular topics" sich der gesamte rechte Content-Bereich jeweils sofort ändert und der Inhalt des überfahrenen Submenüpunktes angezeigt werden.
--> Siehe Anhang unten

AnhangGröße
wh-flyout.png196.74 KB
‹ Simplenews + Content-Selection Output rendering und styling - Views? Flyout-Menü mit Content, Submenü hover wechselt Content ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

wenn du solche Dinge machen möchtest,

Eingetragen von ronald (3832)
am 05.09.2016 - 21:45 Uhr

hat dies relativ wenig mit Drupal selbst zu tun.

Drupal muss ALLE Daten liefern (views), die aber per JavaScript teilweise ausgeblendet sind (JQUERY im Template).

Grüße
Ronald

  • Anmelden oder Registrieren um Kommentare zu schreiben

Details

Eingetragen von DrupalFan (1640)
am 05.09.2016 - 21:57 Uhr

Das "Flyout" selbst kann man bestimmt mit einem der Drupal-Module realisieren, wie schon oben angesprochen, Welches wäre dafür am besten geeignet?

Der Content im "Flyout" muss, wie Du schreibst, vollständig vorhanden sein, aber ausgeblendet. Nur der Content des ersten Menüpunktes ist sichtbar, der Content eines anderen Menüpunktes wird sichtbar, wenn man mit der Maus über den Menüpunkt fährt.

Das Ausblenden könnte man ja mit "display:none" machen oder gibt es dafür eine andere Methode, die besser ist?

Stellt man sich die Funktion der Untermenüpunkte ohne Flyout-Menü vor (also wie auf einer normalen Seite oder Views-Ansicht), dann ist das ähnlich den sogenannten Vertical Tabs von Drupal (nur dass der Inhaltswechsel mit mouseover anstatt mit click ausgelöst werden soll).

So gesehen könnte es auch hier vielleicht ein Drupal-Modul geben, dass ähnlich den vertical tabs dieses Submenü wie oben beschrieben realisieren kann. Danke für weitere Tipps.

  • Anmelden oder Registrieren um Kommentare zu schreiben

In jQuery gibt es dafür die

Eingetragen von wla (9016)
am 05.09.2016 - 23:20 Uhr

In jQuery gibt es dafür die Methoden .hide() und .show(). Du solltest Dich dann aber ein bißchen mit der Materie befassen. Was Du möchtest gibt es meist nicht fertig, bestenfalls etwas ähnliches als Ausgangspunkt. Also muß man selbst entwickeln oder mindestens anpassen (in jQuery).

.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

jQuery

Eingetragen von DrupalFan (1640)
am 06.09.2016 - 10:34 Uhr

Danke. Es gibt in jQuery die Funktion tabs() und damit kann man angeblich auch vertikale Tabs realisieren. Vielleicht klappt es damit.

Würdest Du das Flyout (für den einen Menüpunkt soll sich ein großer Bereich öffnen, in dem auch Content enthalten ist, welche mit Inhaltstypen erstellt wird) ebenfalls händisch machen oder ist hier ein Modul besser geeignet?

Wie kann man in Drupal eigentlich einen jQuery-Code so einbauen, dass er nur dann aufgerufen wird, wenn gerade die eine bestimmte Seite aufgerufen wird? Oder ist das in dem Fall wahrscheinlich gar nicht nötig ...

PS: Gratulation zu 8000 Punkten im Forum.

  • Anmelden oder Registrieren um Kommentare zu schreiben

denkbar ist

Eingetragen von ronald (3832)
am 06.09.2016 - 11:40 Uhr

dass du für diese spezielle Seite ein eigenes Templat baust, und darin den zugehörigen JQuery-Code unterbringst.
Dann wird dieser Code nur geladen, wenn das Template geladen wird.

Grüße
Ronald

  • Anmelden oder Registrieren um Kommentare zu schreiben

Für solche "megamenü"-

Eingetragen von wla (9016)
am 06.09.2016 - 12:34 Uhr

Für solche "megamenü"- Funktionalität kann man das Modul [do:menu_minipanels] einsetzen. Damit hast Du zumindest schon mal alle Bausteine, die Du benötigst grob platziert. Die Feinarbeit geschieht dann mit CSS und jQuery. Wenn das nur auf einer Seite so sein soll, kann man, wie von Ronald vorgeschlagen, dafür eine seitenspezifische Template-Datei schreiben. Ich nehme zum Einbinden von JavaScript auf speziellen Seiten gerne den Weg über template_preprocess_html oder template_preprocess_page in der template.php in meinem Theme. In einer Template-Datei mag ich das nicht, aber das ist Geschacksache.

.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hast Du schon das Modul Meagmenu

Eingetragen von maria-rita (501)
am 07.09.2016 - 10:05 Uhr

Hallo,

hier der Link: https://www.drupal.org/project/megamenu

Viele Grüße

Marita Betz

Barrierefreies Webdesign
Marita Betz
http://www.barrierefreies-webdesign-mb.de

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • [gelöst]Pflichtfeld vom User deaktivieren lassen
  • Konto löschen, wie? (Drupalorg/Drupalcenter)
  • Layout-Builder hängt
  • Drupal 8/9 SEO-Beratung/Coaching
  • Verschachtelte UND / ODER Abfrage mit hook_views_query_alter
  • Kartenansicht, Position des Users und Nodes anzeigen
  • Hilfe zu Views und Filter?
  • Views für 2 Kategorien
  • [gelöst]Probleme nach löschen eines Menüpunktes im Adminmenü
  • [gelöst]Zufallsausgabe von Inhalt
  • Variable aus dem inkludierten Partial Template auslesen
  • Probleme beim Versand von Mails via Drupal 9
Weiter

Neue Kommentare

  • Danke das ist die Lösung
    vor 16 Stunden 18 Minuten
  • Ah, das sind wertvolle Hinweise
    vor 19 Stunden 19 Minuten
  • Schau Dir mal folgenden
    vor 19 Stunden 31 Minuten
  • Du kannst die Eigenschaften
    vor 19 Stunden 36 Minuten
  • Bitte meinen Account auch löschen
    vor 19 Stunden 36 Minuten
  • Danke, den hook kannte ich natürlich
    vor 21 Stunden 6 Minuten
  • Ich würde das mit
    vor 22 Stunden 42 Minuten
  • php war es nicht
    vor 1 Tag 11 Stunden
  • Ich mache so Sachen:-)
    vor 1 Tag 13 Stunden
  • Bei Google musst Du erst ab
    vor 2 Tagen 23 Stunden

Statistik

Beiträge im Forum: 246097
Registrierte User: 18884

Neue User:

  • Stine_64
  • uniquename
  • xapizm

» Alle User anzeigen

User nach Punkten sortiert:
wla9016
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3917
ronald3832
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 1 Benutzer und 10 Gäste online.

Benutzer online

  • montviso

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association