6 Wochen CMSimple_XH Wiedereinstieg: ein Fazit

[lck]

Noch etwas „geschmeidiger“:

Nix geschmeidiger. Zeit ist Geld.

Man müsste die aktuelle Menühöhe noch dynamisch berechnen – für schmale Viewports.

Warum? Die Position des Buttons kann man doch einfach im CSS ändern, falls es einem nicht passt.

[frase]

Warum? Die Position des Buttons kann man doch einfach im CSS ändern, falls es einem nicht passt.

Nein, ich meinte hier das „top: -70px;“ in der geschmeidigen Version.
Aber, gut is jetzt! Das war ja nur ’ne Spielerei.
Ich will ja deine ziemlich gute Idee nicht kaputt-CSSen

[lck]

Nein, ich meinte hier das „top: -70px;“ in der geschmeidigen Version.

Ah ja, ok.
Das könnte man aber auch so lösen. Das sollte dann unabhängig der Höhe des Menüs funktionieren. Siehe auch die hover-Version.

Code: Select all

transform: translateY(-100%);

Ich will ja deine ziemlich gute Idee nicht kaputt-CSSen

Ideen sind immer gut, da kannst du nichts kaputt machen.

[frase]

Das könnte man aber auch so lösen. Das sollte dann unabhängig der Höhe des Menüs funktionieren. Siehe auch die hover-Version.

Ah, jetzt, ja!
Dann könnte man folgendes verwenden:

Code: Select all

#xh_adminmenu_fixed {
    transform: translateY(-100%);
    transition: transform .5s;
}
#lck-body:target #xh_adminmenu_fixed {
    transform: translateY(0%);
}

Und die Zeit kann man ja auch anpassen. Ich muss mal ausrechnen, was 0,5 Sekunden bei meinem Stundenlohn ausmachen

[lck]

Und die Zeit kann man ja auch anpassen. Ich muss mal ausrechnen, was 0,5 Sekunden bei meinem Stundenlohn ausmachen

0,5s, das ist mehr als ein Augenblick und da kann viel passieren. Multipliziert x X = MultiVielFreizeit .

Übrigens, ich bin der Ansicht, dass das Untermenü des Adminmenüs bei Touchscreens gar nicht notwendig ist!
Die Links sind ja auch alle in den Seiten vorhanden, bei Einstellungen, Dateien und Plugins. In Verbindung mit dem Javaskript *Modernizr, das Touchgeräte erkennt und im html-Tag eine Klasse touchevents bzw. no-touchevents setzt, kann man dann per CSS das Untermenü deaktivieren und der Double-Tap ist gegessen.

Code: Select all

.touchevents #xh_adminmenu li:hover > ul {
  visibility: hidden !important;
}

------------------------------ *Edit ------------------------------
template.htm JS Skript Modernizr vor dem schließenden </body>-Tag einfügen

Code: Select all

<script>/* <![CDATA[ */
/*! modernizr 3.6.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-touchevents-setclasses !*/
!function(e,n,t){function o(e){var n=u.className,t=Modernizr._config.classPrefix||"";if(p&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),p?u.className.baseVal=n:u.className=n)}function s(e,n){return typeof e===n}function a(){var e,n,t,o,a,i,r;for(var l in c)if(c.hasOwnProperty(l)){if(e=[],n=c[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=s(n.fn,"function")?n.fn():n.fn,a=0;a<e.length;a++)i=e[a],r=i.split("."),1===r.length?Modernizr[r[0]]=o:(!Modernizr[r[0]]||Modernizr[r[0]]instanceof Boolean||(Modernizr[r[0]]=new Boolean(Modernizr[r[0]])),Modernizr[r[0]][r[1]]=o),f.push((o?"":"no-")+r.join("-"))}}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):p?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function r(){var e=n.body;return e||(e=i(p?"svg":"body"),e.fake=!0),e}function l(e,t,o,s){var a,l,f,c,d="modernizr",p=i("div"),h=r();if(parseInt(o,10))for(;o--;)f=i("div"),f.id=s?s[o]:d+(o+1),p.appendChild(f);return a=i("style"),a.type="text/css",a.id="s"+d,(h.fake?h:p).appendChild(a),h.appendChild(p),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(n.createTextNode(e)),p.id=d,h.fake&&(h.style.background="",h.style.overflow="hidden",c=u.style.overflow,u.style.overflow="hidden",u.appendChild(h)),l=t(p,e),h.fake?(h.parentNode.removeChild(h),u.style.overflow=c,u.offsetHeight):p.parentNode.removeChild(p),!!l}var f=[],c=[],d={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){c.push({name:e,fn:n,options:t})},addAsyncTest:function(e){c.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=d,Modernizr=new Modernizr;var u=n.documentElement,p="svg"===u.nodeName.toLowerCase(),h=d._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];d._prefixes=h;var m=d.testStyles=l;Modernizr.addTest("touchevents",function(){var t;if("ontouchstart"in e||e.DocumentTouch&&n instanceof DocumentTouch)t=!0;else{var o=["@media (",h.join("touch-enabled),("),"heartz",")","{#modernizr{top:9px;position:absolute}}"].join("");m(o,function(e){t=9===e.offsetTop})}return t}),a(),o(f),delete d.addTest,delete d.addAsyncTest;for(var v=0;v<Modernizr._q.length;v++)Modernizr._q[v]();e.Modernizr=Modernizr}(window,document);
/* ]]> */
</script>

Hier noch zwei animierte gifs um sich direkt ein Bild zu machen.

Adminmenu_show-hide.gif

Mit transition (geschmeidiger).

Adminmenu_show-hide_2.gif