Re: Ein "funktionierendes" Dropdown-Menü?!
Posted: Sun Apr 02, 2017 3:09 pm
Wäre es sehr herausfordernd, Ludwigs funktionierendes Menü mit den Burgern auf in dem Template unterzubringen? Kann das jemand einschätzen?
Welcome to the CMSimple_XH–Community!
https://cmsimpleforum.com/
Das kommt darauf an was genau Du mit "Ludwigs funktionierendes Menü" meinst, und vor allem in welchem Template es eingebaut werden soll. Ganz trivial ist es auch im einfachsten Fall nicht, aber super aufwendig oder gar unmöglich wohl auch im unglücklichsten Fall nicht.wbs wrote:Wäre es sehr herausfordernd, Ludwigs funktionierendes Menü mit den Burgern auf in dem Template unterzubringen? Kann das jemand einschätzen?
Nicht ganz, denn CMSimple_XH wird noch immer unabhängig von CMSimple weiter entwickelt.Na schade, hatte das so in erinnerung, dass alle an XH gearbeitet haben und es dann umbenannt wurde...
Das grundsätzliche Problem bei Touch-Eingabe sind links (<a> Elemente) die bei :hover aufklappen. Das funktioniert halt super bei Mauseingabe, aber eben nur sehr mäßig bei Touch-Eingabe (bei mir geht's wenn ich lange auf einen solchen Link tippe bis das Menü erscheint, und dann einfach kurz neben das Menü tippe; aber das ist natürlich nicht intuitiv, und sowieso zu umständlich). Ludwig hat das wohl so gelöst, dass es zusätzlich zu den eigentlichen Links eben noch kleine "Schalter" gibt, die nur dem Aufklappen dienen. Ein bestehendes Menü so anzupassen, ist wohl nicht ohne, zumal viele von Torstens Templates ein ganz eigenes Menüsystem verwenden.wbs wrote:Ich meine, dass das bestehende Menü so verwendet werden kann, dass Dropdown auch auf Touchgeräten funktioniert.
Wenn es insgesamt nicht allzu viele Seiten gibt, dann könnte man einfach alle Seiten aufgeklappt anzeigen, was leicht machbar wäre. Einfach in style.responsive.css Zeile 376 auskommentieren:wbs wrote:In der Version für schmale Breiten funktioniert das Menü ja auch nicht schön, das Menü wird trotz Unterseiten eingeklappt...
Code: Select all
/*display: none !important;*/
Hallo wbs,wbs wrote:Ich meine, dass das bestehende Menü so verwendet werden kann, dass Dropdown auch auf Touchgeräten funktioniert.
Ja, denke ich auch. Es kann aber sein, dass ein Designer auf Geräten testet, die dieses Problem bereits gelöst haben, und das ist wohl bei iOS Safari ab Version 5 der Fall.wbs wrote:Allerdings verstehe ich nicht, was der Hintergedanke ist, Untermenüs auf Touchscreens und kleinen Bildschirmen dafür nicht einzubeziehen. Genau dafür sind doch responsive Templates (auch) da.
Dieses oder ein vergleichbares wurde hier im Forum auch schon angesprochen (von Ludwig?) Soweit ich es überblicke kann das auch mit ein wenig JavaScript "gelöst" werden. Das ist, wie auch im letzten Abschnitt des Artikels beschrieben, zwar nur ein Workaround, aber ich denke, schon ein recht passabler, da zumindest auf Mobiles JavaScript in der Regel aktiviert sein dürfte.wbs wrote:Das Problem haben sehr viele Wordpresstemplates auch, da gibt's allerdings ein Plugin, das Abhilfe schafft: https://wordpress.org/plugins/black-stu ... down-menu/
Code: Select all
<script type="text/javascript">
// see whether device supports touch events (a bit simplistic, but...)
var hasTouch = ("ontouchstart" in window);
var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;
// hook touch events for drop-down menus
// NB: if has touch events, then has standards event handling too
// but we don't want to run this code on iOS5+
if (hasTouch && document.querySelectorAll && !iOS5) {
var i, len, element,
dropdowns = document.querySelectorAll("nav.tbis-nav a");
function menuTouch(event) {
// toggle flag for preventing click for this link
var i, len, noclick = !(this.dataNoclick);
// reset flag on all links
for (i = 0, len = dropdowns.length; i < len; ++i) {
dropdowns[i].dataNoclick = false;
}
// set new flag value and focus on dropdown menu
this.dataNoclick = noclick;
this.focus();
}
function menuClick(event) {
// if click isn't wanted, prevent it
if (this.dataNoclick) {
event.preventDefault();
}
}
for (i = 0, len = dropdowns.length; i < len; ++i) {
element = dropdowns[i];
element.dataNoclick = false;
element.addEventListener("touchstart", menuTouch, false);
element.addEventListener("click", menuClick, false);
}
}
</script>
Ah, danke! Beim Anschauen von simplecrazy ist mir übrigens aufgefallen, dass Chrome diese Seite aus dem Walisischen übersetzen will. Dem könnte abgeholfen werden, wenn man im Template <html lang> fixiert:lck wrote:Das ist aber nicht der neueste Stand, das aktuelle Menü findest du in meinen Templates SimpleCrazyX02, UnderTheBridge und DontPlayGames.
Code: Select all
<html lang="de">
Ich bin nicht sicher, da Torstens Templates ja ein ganz anderes Menüsystem verwenden als Ludwigs. Da könnte einiges nachzuarbeiten sein (vermutlich nicht nur CSS).wbs wrote:Das CSS ist wirklich sehr kurz im Vergleich zu anderen Templates. Ich schätze, das Menü kleiner zu machen, den Hintergrund beim Content auszuschalten und die Punkte zum Ausklappen von Subemüs mit den Strichen von SimpleCrazyX02 auszutauschen und die Schriftarten und Farben zu verändert würde wahrscheinlich schneller gehen, als die Auseinandersetzung mit anderen Templates auf Touchscreens.
Ja, ich weiß. Ich wüsste aber nicht, wie man das beheben kann. Da ist wohl schon anderes JS im Spiel (script.responsive.js?), das nicht angezeigte Menüpunkte temporär aus dem DOM entfernt, und anscheinend gibt es auch kleine Klasse wie .sdocs bzw. .docs, die genutzt werden könnte.wbs wrote:Wenn ich das Skript einbinde, muss ich auf alle Menüeinträge zweimal tippen. Auf H1 ebenso wie auf H2 (und vermutlich auch H3)