Ein "funktionierendes" Dropdown-Menü?!

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by lck » Mon Jun 22, 2015 7:19 pm

Hallo Lemon,
Lemon wrote:Wie kann ich die 3. Ebene nach links anstelle von recht bekommen?
Beim ausklappen mit hover geht das Menü nach links, ick hätte es aber gerne nach rechts.
Das widerspricht sich ;)

Machbar ist das, aber damit ist es nicht getan.
Template stylesheet.css ca. Zeile 396

Code: Select all

.tpllck_nav ul ul ul {
  left: 15em; /* das ändern, -15em zu 15em */
  top: -1px;
  margin-left: 0;
  z-index: 300;
} 
Nachteil: beim letzten rechten Link ist menulevel3 nicht mehr ganz sichtbar, da ja alles rechts floatet.

Das Menü könntest du natürlich auch links floaten lassen und rechts einen Abstand zum Bildshirmrand definieren, dann passt das wieder, z.B.:

Code: Select all

.tpllck_nav ul {
  display: table;
  list-style: none;
  margin: 1em 15em 1em 0; /* das ändern */
  padding: 0;
  text-align: center;
  z-index: 100;
}
Auch die Dreiecke und deren Ausrichtung müsste man anpassen - oder man löscht sie komplett aus dem css.
Last edited by lck on Tue Jun 23, 2015 8:10 pm, edited 1 time in total.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Lemon
Posts: 167
Joined: Mon Dec 08, 2008 4:24 pm

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by Lemon » Tue Jun 23, 2015 6:57 am

Vielen Dank für die Hilfe, ich werde es mal testen.

Und auch vielen Dank, für ein tolles und funktionierendes Dropdown Menü, an alle Beteiligten.
Die Funktionen und Möglichkeiten werden immer besser. Super!
:D

wsim123
Posts: 63
Joined: Thu Feb 19, 2015 4:44 pm

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by wsim123 » Tue Sep 15, 2015 11:41 pm

cmb wrote:
Holger wrote:Sehe ich es richtig, dass man dann lediglich auf st == 'sitemaplevel' prüfen müsste? Dann kann man einfach die Überschrift der Seite ohne Link in die Sitemap schreiben...
Ja, so sollte das funktionieren.

Beim Überfliegen des Codes ist mir übrigens aufgefallen, dass XH_Li noch immer 'search' als Argument für $st auswertet. Das ist allerdings seit XH 1.5 hinfällig, weil die Suche seither die Suchergebnisliste gar nicht mehr per li() anzeigt. Das 'search' könnte in XH_Li also entfallen, oder wird das evtl. von Plugins (AdvancedSearch) genutzt?
Holger wrote:Dann wäre die Suche aber trotzdem noch ein Problem, weil sie ja einen Link zur Seite erzeugen könnte... Oder übersehe ich da etwas?
Ein Suchtreffer ist bei einer leeren Seite nur durch die Überschrift möglich. Diese könnte man zur Not manuell per page_params aber auch noch leeren – aber dann wird die Seite trotzdem gefunden! :o Eigentlich nicht korrekt, würde ich meinen. Wenn wir dieses Problem allgemein lösen, dann wäre das wohl ein gangbarer Weg; ggf. könnten solche Oberseiten auch automatisiert die Page-Data ändern lassen. Ansonsten müsste wohl die Suchfunktion individuell angepasst werden.
Holger wrote:Das wäre gut. Dann könnte man immer über $f oder $function eingreifen und die Ausgabe abfangen. Das sollte IMO überall so sein. Zuweisung an $o erst ganz zum Schluß in der cms.php -- wenn möglich.
Eigentlich eine gute Idee. Ich bin aber auch nicht sicher, ob es möglich ist. Traditionell wurden in cms.php (und adm.php) die diversen $f und $function an sehr unterschiedlichen Stellen verarbeitet. Ich weiß nicht, ob das ganz bewusst so gemacht wurde, oder ob es im Lauf der Zeit so gewachsen ist. Beim Refactoring für XH 1.6 und auch später (v.a. XH_Controller) habe ich diese Abfolge daher beibehalten. Es wäre auf jeden Fall wünschenswert, das alles mal zu vereinheitlichen, was den Überblick doch deutlich erleichtern dürfte.
Zum Abfangen der Ausgabe habe ich eine Frage : Ich sehe immer die Ergebnisliste der Suchfuntion . Wenn ich anklicke bleibe ich in der Seite.

Wie kann ich target=_blank - funktionsmässig durch patchen herbeiführen ?

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by lck » Tue Sep 22, 2015 9:21 am

wsim123 wrote:Zum Abfangen der Ausgabe habe ich eine Frage : Ich sehe immer die Ergebnisliste der Suchfuntion . Wenn ich anklicke bleibe ich in der Seite.

Wie kann ich target=_blank - funktionsmässig durch patchen herbeiführen ?
Wie ich das sehe, wäre das sehr einfach durch eine Änderung in cmsimple/classes/Search.php (CMSimple_XH 1.6.7) möglich. (Bitte korrigiert mich php-cracks, wenn ich falsch liege)
Zeile 230

Code: Select all

$o .= '    <li><a href="' . $url . '">' . $title . '</a>'; 
 ändern zu:

Code: Select all

$o .= '    <li><a target="_blank" href="' . $url . '">' . $title . '</a>';
Nachteil: Bei zukünftigen Updates kann diese Datei überschrieben werden und du musst es wieder einfügen. Eine Lösung per userfuncs.php wäre dem vorzuziehen, aber da kann ich nicht weiterhelfen.
Ich denke aber, die Entwickler von CMSimple_XH können das.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Lemon
Posts: 167
Joined: Mon Dec 08, 2008 4:24 pm

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by Lemon » Tue Sep 22, 2015 10:09 am

Ludwig wrote:Hallo Lemon,
Lemon wrote:Wie kann ich die 3. Ebene nach links anstelle von recht bekommen?
Beim ausklappen mit hover geht das Menü nach links, ick hätte es aber gerne nach rechts.
Das widerspricht sich ;)

Machbar ist das, aber damit ist es nicht getan.
Template stylesheet.css ca. Zeile 396

Code: Select all

.tpllck_nav ul ul ul {
  left: 15em; /* das ändern, -15em zu 15em */
  top: -1px;
  margin-left: 0;
  z-index: 300;
}




Das Menü könntest du natürlich auch links floaten lassen und rechts einen Abstand zum Bildshirmrand definieren, dann passt das wieder, z.B.:

Code: Select all

.tpllck_nav ul {
  display: table;
  list-style: none;
  margin: 1em 15em 1em 0; /* das ändern */
  padding: 0;
  text-align: center;
  z-index: 100;
} 
Auch die Dreiecke und deren Ausrichtung müsste man anpassen - oder man löscht sie komplett aus dem css.


Kann ich das Menü anstatt in der Mitte (center) auch nach links ausrichten? Was muss ich dafür ändern?

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by lck » Tue Sep 22, 2015 11:17 am

Lemon wrote:Kann ich das Menü anstatt in der Mitte (center) auch nach links ausrichten? Was muss ich dafür ändern?
Wie oben erwähnt, das margin in .tpllck_nav ul ändern:

Code: Select all

.tpllck_nav ul {
    display: table;
    list-style: none;
    margin: 1em 15em 1em 1em; /* diese Angaben ändern. War vorher margin: 1em auto; */
    padding: 0;
    text-align: center;
    z-index: 100;
} 
Ich bin gerade dabei, das Menü zu überarbeiten, wie von Holger angeregt. Die Nachfrage nach einem responsiven, horizontalem, touch-friendly, Multilevel Drop-down Menü scheint ja sehr groß zu sein.
In der nächsten Version ist das Menü links ausgerichtet und die Menulevel 2+3 floaten auch wieder rechts. Eine Testversion werde ich die Tage online stellen.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Lemon
Posts: 167
Joined: Mon Dec 08, 2008 4:24 pm

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by Lemon » Tue Sep 22, 2015 11:28 am

Das ist ja SUPER.

Vielen Dank und auch für die Arbeit vorab :D

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by lck » Tue Sep 22, 2015 4:46 pm

Ludwig wrote:Ich bin gerade dabei, das Menü zu überarbeiten, wie von Holger angeregt. Die Nachfrage nach einem responsiven, horizontalem, touch-friendly, Multilevel Drop-down Menü scheint ja sehr groß zu sein.
In der nächsten Version ist das Menü links ausgerichtet und die Menulevel 2+3 floaten auch wieder rechts. Eine Testversion werde ich die Tage online stellen.
Testversion ist online. Danke an Holger, für die Vorarbeit und vorab für die Tester.

Bitte mal testen, vor allem mit euren mobilen Geräten. Die Auflösung sollte größer 800px sein, ab da erscheint das mobile Menü.
Das Untermenü (Menulevel2+3) sollte nur bei hover bzw. touch auf das Hamburgersymbol erscheinen. Bei Klick auf den Link wird die Seite aufgerufen.

Mir geht es momentan nur um die Bedienbarkeit. Ist es wirklich Touch-friendly?
Last edited by lck on Wed Nov 25, 2015 7:36 pm, edited 1 time in total.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by Holger » Sun Sep 27, 2015 10:10 pm

Ludwig wrote: Bitte mal testen, vor allem mit euren mobilen Geräten.
Klasse! Es funktioniert genau so, wie ich mir das vorgestellt habe :D .
Auf den Desktop Browsern, Win 8.1: IE11, FF, Chrome und auch mit dem neuesten Safari unter OS X konnte ich keine Probleme feststellen und man merkt auch gleich intuitiv wie das Menü funktioniert.
Auf dem iPad / iOS 8.4.1 mit jeweils neuestem Safari, Chrome und FF, wie auch mit Android 4.4.4 (aktuellster Android-Browser, Chrome und FF) lässt sich die Seite nun endlich wie gewünscht navigieren.
Falls hier ein User nicht gleich auf die Idee kommt auf das Hamburger-Symbol zu klicken, ist als Fallback noch submenu() enthalten. Aber IMO ist das Symbol hinlänglich bekannt und der größte Teil der Touch-User wird einen "Tap" wagen.

Die gleiche Funktionalität wäre jetzt noch für die Mobile-Ansicht schön - eben nur als vertikale Version.
Denn DropDowns sind gut geeignet für Projekte mit vielen Unterseiten. Die Ausgabe von sitemap() erzeugt aber eine ewig lange Liste die auf einem kleinen Phone dann nicht mehr akzeptabel ist.
Auch die toc() - Funktion ist nicht ganz so ideal, weil man an Unterseiten nur durch öffnen der Elternseite heran kommt.
Nur einen kleinen Nachteil sehe ich dann noch: die einmal geöffneten Äste lassen sich nur durch Auswahl einer Seite oder eines anderen Untermenüs schließen. Aber das wäre wirklich nur ein kleines Problem.

Bleibst Du dran?

LG
Holger

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Ein "funktionierendes" Dropdown-Menü?!

Post by lck » Mon Sep 28, 2015 10:06 am

Hallo Holger,

danke fürs Testen und die Rückmeldung.
Holger wrote:Die gleiche Funktionalität wäre jetzt noch für die Mobile-Ansicht schön - eben nur als vertikale Version.
Denn DropDowns sind gut geeignet für Projekte mit vielen Unterseiten. Die Ausgabe von sitemap() erzeugt aber eine ewig lange Liste die auf einem kleinen Phone dann nicht mehr akzeptabel ist.
Auch die toc() - Funktion ist nicht ganz so ideal, weil man an Unterseiten nur durch öffnen der Elternseite heran kommt.
An die toc() - Funktion hab ich auch schon gedacht, im Endeffekt ist dies ja das Gleiche wie ein Akkordeon-Menü und der Vorteil, es ist eine CMSimple_XH-Funktion.
Habe mir auch schon andere Möglichkeiten angeschaut, ist nur die Frage ob das mit der Menü-Struktur von CMSimple_XH umsetzbar ist. Aber zum Glück gibt es ja MyLi.
Holger wrote:Nur einen kleinen Nachteil sehe ich dann noch: die einmal geöffneten Äste lassen sich nur durch Auswahl einer Seite oder eines anderen Untermenüs schließen. Aber das wäre wirklich nur ein kleines Problem.
Oder durch einen Tap außerhalb des Menüs, irgendwo in der Seite. Ich sehe da auch kein großes Problem.

Ich bleib dran.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply