Abstrakte Navigation (versetzte Linkpositionen mit Pop-Up-Funktion))

Moin,

ich möchte eine Navigation programmieren, welche ziemlich abstrakt ist. Die Gestaltung habe ich als Anhang mit reingestellt.
Das Problem ist, dass ich nicht genau weiß, wie ich da rangehen soll. Es lässt sich sicherlich irgendwie mit html und css programmieren,
aber ich habe die leise Ahnung, dass es sichelrich ein Modul dafür gibt, oder eine andere Möglichkeit, diese Sache einfacher umzusetzen.

Zur Beschreibung: Die Navigation ist als "Molekülverbindung" aufgebaut. Unterhalb ist eine Navigation, die mit den Punkten aus der, ich nenne sie mal: "Molekül-Navigation", verknüpft sein soll.
Also die Punkte aus der Molekül-Navi sollen jeweils, beim rüberfahren mit der Maus, das Symbol anzeigen, das für die jeweilige Handwerkskategorie angezeigt werden soll (siehe Anhang).

Hinzu kommt, das nach klicken auf diese Symbole und der verknüpften Navigation die dazugehörige Kategorie als Pop-Up geöffnet werden soll.

Ich hoffe ich habe das einigermasen auf den Punkt gebracht und ihr habt eine Idee wie ich das lösen kann.

Lieben Gruß
Ben

Den Hover Status kann man sicher mit css lösen. Fürs overlay beim Klicken fällt mir spontan eine Lightbox ein.
Eine Klassische Navigation ist das Ganze ja eher nicht.
Könnte man vielleicht auch mit jquery-tabs und css hinkriegen.

Wenn Du es nicht selbst machen willst oder kannst geht das aber m.E. eher in Richtung Kleinauftrag. Was fertiges fällt mir jedenfalls auf Anhieb nicht ein und das oben sind eher so ein paar spontane Ideen, die mir eingefallen - sicher nicht ganz ausgegoren. Musst ja auch noch Touch abfangen und für kleine Bildschirme aufbereiten.

Zitat:

---

Zitat von mlweb

Den Hover Status kann man sicher mit css lösen. Fürs overlay beim Klicken fällt mir spontan eine Lightbox ein.
Eine Klassische Navigation ist das Ganze ja eher nicht.
Könnte man vielleicht auch mit jquery-tabs und css hinkriegen.

Wenn Du es nicht selbst machen willst oder kannst geht das aber m.E. eher in Richtung Kleinauftrag. Was fertiges fällt mir jedenfalls auf Anhieb nicht ein und das oben sind eher so ein paar spontane Ideen, die mir eingefallen - sicher nicht ganz ausgegoren. Musst ja auch noch Touch abfangen und für kleine Bildschirme aufbereiten.

---

Mh den "Kleinauftrag" würde ich gerne vermeiden. Für Touch und kleine Bildschirme fällt diese Navigation weg.

Hat irgendwer noch ein Tipp? Vielleicht ein Modul mit dem ich das mal versuchen könnte?

Ein Modul wird es für so einen speziellen Fall nicht geben. Sieht für mich nach nem Auftrag aus, wenn du es selbst nicht umgesetzt bekommst.

Du benötigst ein Navigationsmodul. HTML-Elemente mit den Textinhalten die bei Hover angezeigt werden, eine Lightbox, welche Seiten in einem Iframe öffnet (Colorbox) und Hintergrundbilder (das große grüne und noch weitere in der gleichen Größe, welche transparent sind und die Symbole enthalten).

Wenn du das mal vorbereitest, auf einer kleinen sauberen Seite oder in einem jsfiddle oder auf codepen.io o.ä, dann kann man damit rumspielen und das weiter ausarbeiten.

Zitat:

---

Zitat von Andreas

Sieht für mich nach nem Auftrag aus, wenn du es selbst nicht umgesetzt bekommst.

---

Auftrag wollte er ja vermeiden.

Zitat:

---

Zitat von Andreas

Ein Modul wird es für so einen speziellen Fall nicht geben. Sieht für mich nach nem Auftrag aus, wenn du es selbst nicht umgesetzt bekommst.

Du benötigst ein Navigationsmodul. HTML-Elemente mit den Textinhalten die bei Hover angezeigt werden, eine Lightbox, welche Seiten in einem Iframe öffnet (Colorbox) und Hintergrundbilder (das große grüne und noch weitere in der gleichen Größe, welche transparent sind und die Symbole enthalten).

Wenn du das mal vorbereitest, auf einer kleinen sauberen Seite oder in einem jsfiddle oder auf codepen.io o.ä, dann kann man damit rumspielen und das weiter ausarbeiten.

---

Danke für die Antwort! Auftrag kommt nicht in Frage. Das Projekt wirft für mich selbst kaum was ab. Aber ich bekomm das schon irgendwie hin.

Gruß

Moin Leute,

ich habe die Seite soweit umgesetzt: http://test.oekobau-nord.de

Ich habe die Navigation auf verschiedene Bildschirmgrößen per Media-Query angepasst. Es fehlen noch ein paar Formate!
Die Seite ist derzeit für folgende Auflösungen aufrufbar: 1920px/1440px/1366px/1250px/1024px/980px/800px

Allerdings bin ich mit dieser Art von Umsetzung nur semi Zufrieden! Vielleicht hat ja noch jemand eine Anregung, oder eine Beispielseite, welche ihr mir empfehlen würdet um das besser hinzubekommen. Ansonsten werd ich diese Vorgehensweise beibehalten.

Gruß
Ben

Hallo,

die Idee dahinter gefällt mir - aber das ganze Konstrukt scheint mir trotzdem nicht so dazustehen, wie du es gerne wollen würdest ...
da verschieben sich Elemente übereinander - von einander weg
bei :hover überlappen sich Menüpunkte bzw. durch das 'bold' bei :hover wirkt mir das alles etwas zu "wackelig", da sich Zeilen umbrechen und damit Inhalt nach unter verschiebt bzw. dann nicht mehr im sichtbaren Bereich ist.

Browser: Mozilla Firefox.
Mein Tipp: schau dir, falls möglich, das mal auf anderen Bildschirmen, Browsern bzw. in beiderseitiger Komibination an - für mich wirkt das sehr sehr unruhig und auf nur deinem Schirm optimiert

Zitat:

---

Zitat von derRenner

Hallo,

die Idee dahinter gefällt mir - aber das ganze Konstrukt scheint mir trotzdem nicht so dazustehen, wie du es gerne wollen würdest ...
da verschieben sich Elemente übereinander - von einander weg
bei :hover überlappen sich Menüpunkte bzw. durch das 'bold' bei :hover wirkt mir das alles etwas zu "wackelig", da sich Zeilen umbrechen und damit Inhalt nach unter verschiebt bzw. dann nicht mehr im sichtbaren Bereich ist.

Browser: Mozilla Firefox.
Mein Tipp: schau dir, falls möglich, das mal auf anderen Bildschirmen, Browsern bzw. in beiderseitiger Komibination an - für mich wirkt das sehr sehr unruhig und auf nur deinem Schirm optimiert

---

Ich habe ja extra geschrieben auf welchen Bildschirm-Auflösungen die Seite angepasst ist. Das die Elemente beim aus- und einfahren des Browserfensters, sich komplett verschieben und falsch dargestellt werden, ist mir völlig klar. Deswegen bin ich damit auch noch unzufrieden. Allerdings fällt mir keine bessere Lösung bisher ein, welche ich mit meinen "Fähigkeiten" umsetzen könnte...und deswegen frage ich ja nach evt. Anregung für eine bessere Lösung!

Moin Leute,
es geht immer noch um diese Webseite hier: http://test.oekobau-nord.de/

Ich will für die "Molekül-Navigation" noch die aufpoppenden "Infoblasen" langsam transformieren lassen. Dafür habe ich dann z.b. die "#architekt a:hover span" dupliziert und habe den Selektor (z.b. zuletzt "#architekt a span") umgeschrieben und den Code platziert.
Das hat alles nicht fuktioniert und ich habe die duplizierten Styles wieder gelöscht (obwohl diese im Webtool immer noch angezeigt werden).

Nun passierte folgendes. Die Seite hat plötzlich einen kompletten "Drall" bekommen. Die Navigation ist verschoben und auch kleine Details haben sich geändert und ich habe null Ahnung woran das jetzt nun liegt.
Ich habe mir alle Styles, welche ich zuletzt bearbeitet hatte angeschaut und es waren wirklich nur die duplizierten, welche ich gelöscht habe (Cache gelöscht, neu eingeloggt, Browser neugestartet, habe sogar die styles wiederhergestellt und deaktiviert, trotzdem bleibt der Fehler)!

Das ist alles riesengroßer Mist! Ich stehe kurz vor der Fertigstellung dieser Webseite und nun das!
Wer mir einen Hinweis geben kann woran es liegt, der hat ein Stein im Brett.
Ansonsten werde ich Contao wohl für die Zukunft auf Eis legen, weil das ist mir dann doch zu heikel und instabil.

Frohes Neues und Gruß
Ben

EDIT: Browser stand auf 110% Zoom :O Alles wieder gut. Wenn mir jemand evt. noch sagen könnte wie ich die "Infoblasen" trotzdem noch langsam transformieren lassen kann, wäre das sehr hilfreich.

Ich finde die Idee dieser Navigation zwar ganz witzig. Es bleibt aber das Problem, dass es nur an den von Dir ausgewählten Punkten korrekt aussieht. Wer sagt Dir das es nicht auch Leute gibt, die andere Bildschrirmgrößen haben oder den Browser nicht komplett aufziehen?

Für so einen Konstrukt würde ich dann doch eher auf adaptive und nicht auf responsive setzen.

Wobei Du Dein aktuelles Problem ja gefunden hattest.

Zitat:

---

Zitat von mlweb

Es bleibt aber das Problem, dass es nur an den von Dir ausgewählten Punkten korrekt aussieht. Wer sagt Dir das es nicht auch Leute gibt, die andere Bildschrirmgrößen haben oder den Browser nicht komplett aufziehen?

---

Das ist mit Sicherheit ein Problem, welches mir völlig bewusst ist und was ich ja gleich Anfangs in Frage gestellt hatte bzw. in meinem vorletzten Post hier im Thread schon thematisiert wurde.
Ich habe das jetzt als Notlösung umgesetzt und auf die gängigen Bildschirmformate angepasst, welche momentan im Umlauf sind.
Für die Browser, welche nicht komplett aufgezogen sind, habe ich keine Lösung gefunden.

Zitat:

---

Zitat von mlweb

Für so einen Konstrukt würde ich dann doch eher auf adaptive und nicht auf responsive setzen.

---

Ich wäre natürlich immer noch daran interessiert, wie ich das technisch besser umsetzen kann, so dass es quasi einheitlich skaliert werden kann.
Oder das die auf ein Format abgestimmte Ansicht quasi statisch angezeigt wird, bis zu dem Punkt wo das nächste Bildschirmformat aktiviert wird.
Meinst du das mit "adaptive"?

So ich habe die Breite in den jeweilig bestimmten Formaten per px fest definiert. so das beim auf- einziehen des Browsers das Format statisch angezeigt wird.
Das war jetzt für mich die einfachste Lösung und damit wäre ich auch weitestgehend zufrieden!

Adaptive bedeutet feste Breiten, ggf. abhängig von der Schriftgröße für jeweils einen bestimmten Bildschirmbreitenbereich (mediaqueries).

Nachtrag: Ist jetzt viel viel besser.