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

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

Eingetragen von DrupalFan (1646)
am 05.09.2016 - 21: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 (3845)
am 05.09.2016 - 22: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 (1646)
am 05.09.2016 - 22: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 (9215)
am 06.09.2016 - 00: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-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

jQuery

Eingetragen von DrupalFan (1646)
am 06.09.2016 - 11: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 (3845)
am 06.09.2016 - 12: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 (9215)
am 06.09.2016 - 13: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-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Hast Du schon das Modul Meagmenu

Eingetragen von maria-rita (504)
am 07.09.2016 - 11: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

  • DDEV: Website vom lokalen Server auf Webspace übertragen
  • MariaDB 10.6
  • Wie kann man die Ansicht der Benutzer erweitern?
  • (Gelöst) SIMPLE XML SITEMAP liefert die Sitemap für das Menü nicht aus
  • Entity Reference - Title Felder werden als Link angezeigt
  • PHP 8.1 - Deprecated function: rtrim()
  • Preloader / Spnner entfernen Menu Link Modal-Modul
  • Schriftgröße standard einstellen
  • Drupal Website gestalten
  • Tokens werden in Viev als Link angezeigt
  • [bug entdeckt & workaround gefunden] benutzerdefinierte Felder vom Userprofil tauchen ungefragt auch in den Forumtopics auf...
  • [gelöst] Mass contact Empfängerliste nach Taxonomy Term statt Rolle
Weiter

Neue Kommentare

  • Hallo Werner, super, vielen
    vor 6 Stunden 11 Minuten
  • Du mußt die Struktur
    vor 12 Stunden 58 Minuten
  • Ergebnis des upgrade
    vor 1 Tag 6 Stunden
  • Danke, funktioniert einwandfrei!
    vor 1 Tag 7 Stunden
  • Bei Drupal 7 war diese Seite
    vor 1 Tag 8 Stunden
  • Es ist ein Paragraph
    vor 2 Tagen 10 Stunden
  • Danke fürs Feedback. Gut dass
    vor 5 Tagen 2 Stunden
  • Patch angewandt
    vor 5 Tagen 5 Stunden
  • core_version_requirement: ^8
    vor 1 Woche 7 Stunden
  • core_version_requirement: ^8
    vor 1 Woche 7 Stunden

Statistik

Beiträge im Forum: 247875
Registrierte User: 19594

Neue User:

  • Davidsnins
  • kudes
  • Tkakah

» Alle User anzeigen

User nach Punkten sortiert:
wla9215
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3845
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 5 Gäste online.

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