6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Hallo Ludwig,
danke für den css-Schnipsel. Habs eingestellt, funktioniert und gefällt mir ganz gut, so dass ich's erstmal so lassen werde. Auch auf nem Smartphone und Tablet unter Android mit Firefox tut's das, nachdem ich erstmal herausgefunden hatte, wo ich wielange drücken/ halten muss.
Zwei Dinge sind mir aufgefallen:
1. Im HTML-Tag wird ein margin-top von von 75 px eingestellt, so dass sich die Seite im eingeloggten Zustand weiter hochscrollen lässt als normal.
2. wenn man mit der Maus das Adminmenü nach unten an einer Stelle verlässt, an der es kein Untermenü gibt, dann flackert es (unterschiedlich stark, je nach Mauszeigergeschwindigkeit), bis der transparente Bereich an der richtigen Stelle ist.
Aber wie gesagt, das ist nur im eingeloggten Zustand.
Danke!
danke für den css-Schnipsel. Habs eingestellt, funktioniert und gefällt mir ganz gut, so dass ich's erstmal so lassen werde. Auch auf nem Smartphone und Tablet unter Android mit Firefox tut's das, nachdem ich erstmal herausgefunden hatte, wo ich wielange drücken/ halten muss.
Zwei Dinge sind mir aufgefallen:
1. Im HTML-Tag wird ein margin-top von von 75 px eingestellt, so dass sich die Seite im eingeloggten Zustand weiter hochscrollen lässt als normal.
2. wenn man mit der Maus das Adminmenü nach unten an einer Stelle verlässt, an der es kein Untermenü gibt, dann flackert es (unterschiedlich stark, je nach Mauszeigergeschwindigkeit), bis der transparente Bereich an der richtigen Stelle ist.
Aber wie gesagt, das ist nur im eingeloggten Zustand.
Danke!
Viele Grüße
Michael
Michael
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Ja, auf Touchscreens ist das :hover meist ein Problem. Das Menü öffnen geht natürlich auch anders in CSS, z.B. per :target (das war mein erster Entwurf), per checkbox oder dann gleich per Javascript, aber dazu ist auch ein Änderung in der template.htm notwendig. Ich wollte erstmal etwas simples, ohne große Eingriffe.
Das könnte man ändern.
Code: Select all
html {
margin-top: 0 !important;
}
Ja das ist so, weil man mit der Maus dann wieder über dem hover-Bereich ist. Ich kann dir ja mal noch den anderen Entwurf mit :target zukommen lassen.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Hieße das, dass das Menü dann per Klick und nicht per Hover-Effekt eingeblendet wird? Müsste man ausprobieren, was sich "besser anfühlt", ist sicherlich Geschmackssache. Schließen müsste es sich dann nach einem Klick auf einen Menüeintrag, oder?
Am Desktop finde ich die Hover-Lösung ganz gut und intuitiv bedienbar, auf dem Smartphone könnte ich mir vorstellen, dass eine Klicklösung praktischer ist, ähnlich den meisten mobilen Menüs, die ja häufig auch per Klick auf z.B. den Hamburger geöffnet werden.
Für eine "one-fits-all"-Lösung wäre wahrscheinlich eine Klick-Lösung besser.
Viele Grüße
Michael
Michael
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Hier Version 2 zum Adminmenü.
Template fhs-sectionsOP.
Änderungen müssen im Template CSS und der template.htm gemacht werden. Mach am besten vorher eine Kopie/Sicherung deines jetzigen Templates.
stylesheet.css am Ende einfügen
template.htm - body-Tag erweitern mit einer ID und darunter den weiteren Code.
Dann bedarf es noch 2 Änderungen im <head> Bereich:
Hier das "margin",
und hier den header, sichtbar lassen zwecks Template-Menü
Ich glaube das war's. Viel Spaß beim umsetzen und testen.
Template fhs-sectionsOP.
Änderungen müssen im Template CSS und der template.htm gemacht werden. Mach am besten vorher eine Kopie/Sicherung deines jetzigen Templates.
stylesheet.css am Ende einfügen
Code: Select all
/*** Adminmenu show/hide per :target ***/
/* Template fix for Backend */
#header {
z-index: 2; /* original = z-index: 1; damit überlagert das Menü des TinyMCE5 das mobile Template-Menü */
}
html {
margin-top: 0 !important;
}
#xh_adminmenu_fixed {
visibility: hidden;
}
#lck-body:target #xh_adminmenu_fixed {
visibility: visible;
}
.showHideAdminmenu {
position: fixed;
top: 100px;
left: 0;
z-index: 9999;
}
a.showAdminmenu, a.hideAdminmenu {
background-color: #cc3300;
border-radius: 0 5px 5px 0;
color: #fff !important;
display: flex;
align-content: center;
justify-content: center;
font-size: 1em;
margin: 0.25em 0;
padding: 0.25em 0.5em;
width: 3em;
}
#lck-body:not(:target) #xh_adminmenu_fixed ~ .showHideAdminmenu a.hideAdminmenu,
#lck-body:target #xh_adminmenu_fixed ~ .showHideAdminmenu a.showAdminmenu {
display: none;
}
template.htm - body-Tag erweitern mit einer ID und darunter den weiteren Code.
Code: Select all
<body id="lck-body" <?=onload();?>>
<?php if (XH_ADM):?>
<div class="showHideAdminmenu">
<a href="#lck-body" class="showAdminmenu" title="Adminmenü öffnen">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</a>
<a href="#0" class="hideAdminmenu"title="Adminmenü schließen">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</a>
</div>
<?php endif ?>
Dann bedarf es noch 2 Änderungen im <head> Bereich:
Hier das "margin",
Code: Select all
.mainContent {
max-width: 1200px;
/* margin: 0 auto; */
margin: 100px auto 0;
padding: 2em;
}
Code: Select all
/* #header, */
#footer{
display: none !important;
}
Last edited by lck on Fri Nov 11, 2022 7:59 pm, edited 3 times in total.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Ja genau und desweiteren erscheint dann ein Close-Button anstatt des Open-Buttons, falls man es direkt wieder schließen will ohne im Adminmenü einen Link zu klicken.
Am Desktop, ja da finde ich die hover-Lösung auch praktischer/einfacher/schneller. Nach oben muss man mit der Maus sowieso und gleichzeitig öffnet sich dann das Adminmenü.
Je nachdem. Wenn man viel am Smartphone arbeitet, dann ja.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
So, ich habe es eingestellt, und soweit ich das bis jetzt gesehen habe, funktioniert auch alles. Ich werde mal mit beiden Varianten ne zeitlang testen um herauszufinden, was mir besser gefällt
Vielen Dank!
Vielen Dank!
Viele Grüße
Michael
Michael
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Okay, gut. Danke für die Rückmeldung.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Mir gefällt die :target-Lösung besser.
@lck
Du hast auch überlegt, wohin mit dem Hamburger – stimmts?
Das Ergebnis ist eigentlich ganz gut. Zwar mit anderer (einfacherer) Technik, als beim abgetrennten Admin-Template, aber im Prinzip ähnlich: ein- und ausblenden je nach Situation.
Ganz private Meinung: Das Hovern nach Menüpunkten gefällt mir eigentlich ganz und gar nicht. Wir sind nur seit Urzeiten daran gewöhnt. Das gibt es kaum anderswo so. Deshalb finde ich das in fhs-adminmenu eigentlich besser und übersichtlicher, wenn auch mit mehr Klicks verbunden.
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Danke für's Testen!
Geschmacks- und Gerätesache. Am Desktop ist mir das schnellere persönlich lieber, das wäre das mit hover. Kann ja noch verbessert werden. Mir ging es erst mal um die Funktion und simple Lösungen sind mir persönlich lieber als Komplizierte.
Eigentlich nicht, auf Anhieb gut platziert. Nur mit der Größe habe ich noch gespielt. Na ja, ist halt je nach Template nicht unbedingt immer an der richtigen Stelle, ist ja speziell für dein Template fhs-sectionOP. Aber ich glaube weitgehend sollte die Position passen, auch bei kleineren Bildschirmen/mobilen Geräten.
Ja und, es soll auch kein Ersatz dafür sein. Aber wer will kann diese simple Alternative jetzt schon einbauen und nutzen.
Auf Touchscreens ja. Aber das ist noch nicht alles zu Ende gedacht.frase wrote: ↑Sat Nov 12, 2022 8:32 amGanz private Meinung: Das Hovern nach Menüpunkten gefällt mir eigentlich ganz und gar nicht. Wir sind nur seit Urzeiten daran gewöhnt. Das gibt es kaum anderswo so. Deshalb finde ich das in fhs-adminmenu eigentlich besser und übersichtlicher, wenn auch mit mehr Klicks verbunden.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: 6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit
Ja, und so richtig schlecht kann ich das gar nicht finden
Zumindest, solange wir nichts anderes haben, ist das für bestimmte Templates eine ganz gute Lösung.
Noch etwas „geschmeidiger“:
Code: Select all
#xh_adminmenu_fixed {
top: -70px;
transition: top .5s;
}
#lck-body:target #xh_adminmenu_fixed {
top: 0;
}