Dynamisches Menü mit Unterstützung für Touch Move und Mouse Move auf RevolveR

Sicherlich möchten viele von Ihnen lernen, wie man schöne und flüssige Menüs im Geiste von Android Java- und Kotlin-Anwendungen erstellt. Höchstwahrscheinlich blieben sogar viele von Ihnen aus diesem Grund im Bereich der Programmierung einzelner Anwendungen und mussten einen fremden Stapel beherrschen.



In diesem Artikel werde ich Ihnen erklären, wie einfach und unkompliziert Sie lineare dynamische Menüs erstellen können, die nicht nur Mausereignisse, sondern auch Zeiger für mobile Versionen unterstützen.



Und so: Einfaches dynamisches Menü von RevolveR Labs.

Alles beginnt mit dem Layout. Es sollte semantisch, leicht und modern sein.

<nav class="dynamic-menu">

	<ul>
		<li><a href="https://revolvercmf.ru">RevolveR Labs</a></li>
		<li><a href="#">Ultra newest solutions</a></li>
		<li><a href="#">The way of incredible</a></li>
		<li><a href="#">In search of the best</a></li>
		<li><a href="#">Progressive RevolveR frontends</a></li>
		<li><a href="#">Developing of new era</a></li>
	</ul>
</nav>

Wir verwenden eine Standardliste mit Aufzählungszeichen und HTML 5 als Wrapper-Element. Um das Menü schweben zu lassen, schreiben wir sofort CSS-Stile, die das Menü auf die volle Breite der Liste der Elemente aus dem Bildschirm ziehen und alles ausblenden, was für den Bereich nicht erforderlich ist:

.dynamic-menu {

	display: inline-block;
	text-align: center;
	overflow: hidden;
	margin: 0 auto;
	height: 3vw;
	width: 80%;

}

	.dynamic-menu ul {

		transition: all 2.5s ease-in-out;
		position: relative;
		list-style: none;
		width: 900vw;
		padding: 0;
		margin: 0;
		left: 0vw;

	}

		.dynamic-menu ul li {

			box-shadow: 0 0 0.1vw #333;
			border: .1vw dashed #fff;
			background: #a2a2a2;
			margin-bottom: 1vw;
			display: inline-block;
			border-radius: .2vw;
			margin-right: .5vw;
			padding: .2vw 1vw;
			background: #888;
			float: left;

		}

			.dynamic-menu ul li a {

				text-shadow: 0 0 0.2vw #fff;
				font: normal 2vw Helvetica;
				text-decoration: none;
				color: #006400;

			}

			.dynamic-menu ul li a:hover {

				text-decoration: underline;
				color: #674c2be0;

			}

CSS . . , touch.

Handler desktop

RevolveR API :

let launch = RR.browser;

RR.menuMove = null;

if( !RR.isM ) {

	RR.event('.dynamic-menu ul', 'mousedown', (e) => {

		e.preventDefault();

		if( !RR.menuMove ) {

			RR.menuLeft = RR.curxy[0];

			RR.MenuMoveObserver = RR.event('body', 'mousemove', (e) => {

				e.preventDefault();

				RR.styleApply('.dynamic-menu ul', ['transition: all 0s ease']);

				RR.menuMove = true;

				RR.menuPosition = ( RR.menuLeft - RR.curxy[0] ) *-1;

				RR.styleApply('.dynamic-menu ul', ['left:'+ RR.menuPosition +'px']);

				RR.event('body', 'mouseup', (e) => {

					e.preventDefault();

					if( e.target.tagName === 'A' && !RR.touchFreeze ) {

						//R.loadURI(target.href, target.title);

						console.log(e.target.href);

						RR.touchFreeze = true;

						RR.menuMove = null;

					}

					void setTimeout(() => { 

						RR.menuMove = null;

					}, 50);

					void setTimeout(() => {

						if( !RR.menuMove ) {

							RR.styleApply('.dynamic-menu ul', ['left: 0px', 'transition: all 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)']);

						}

					}, 2500);

				});

			});

		}

	});

}

event RR.browser(). RR.curxy.

, , , , .

RR.MenuMoveObserver event , MD5 hash , X. mouseup.

. , X, left .

handler

, .

, , touch .

if( RR.isM ) {

	RR.event('.dynamic-menu ul', 'touchstart', (e) => {

		e.preventDefault();

		RR.menuMove = null;

		RR.event('body', 'touchend', (e) => {

			e.preventDefault();

			if( !RR.menuMove ) {

				RR.touchFreeze = null;

				let target = e.changedTouches[0].target;

				if( RR.isO(RR.MenuMoveObserver) ) {

					for( i of RR.MenuMoveObserver ) {

						RR.detachEvent( i[ 2 ] );

					}

				}

				if( target.tagName === 'A' && !RR.touchFreeze ) {

					//R.loadURI(target.href, target.title);

					console.log(e.target.href);

					RR.touchFreeze = true;

					RR.menuMove = null;

				}

				void setTimeout(() => {

					if( !RR.menuMove ) {

						RR.styleApply('.dynamic-menu ul', ['left: 0px', 'transition: all 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)']);
						//RR.animate('.dynamic-menu ul', ['left:0px:1000:wobble']);

					}

				}, 2500);

			}

		});

		if( !RR.menuMove ) {

			RR.menuLeft = e.changedTouches[0].screenX;

			RR.MenuMoveObserver = RR.event('body', 'touchmove', (e) => {

				e.preventDefault();

				RR.styleApply('.dynamic-menu ul', ['transition: all 0s ease']);

				RR.menuMove = true;

				RR.menuPosition = ( RR.menuLeft - e.changedTouches[0].screenX ) *-1; 

				RR.styleApply('.dynamic-menu ul', ['left:'+ RR.menuPosition +'px']);

					RR.event('body', 'touchend', (e) => {

						RR.menuMove = null;

					});

			});

		}

	});

}

. event.target touch. easing :

void setTimeout(() => {

	if( !RR.menuMove ) {

		RR.styleApply('.dynamic-menu ul', ['left: 0px', 'transition: all 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)']);

	}

}, 2500);

Demo

Dynamic Menu RevolveR .

Viele von Ihnen verwenden vorgefertigte Plugins oder binden Layoutblöcke mit Hamburgermenüs ein, aber dynamische lineare Menüs sind genauso gut und sparen Platz in den Schnittstellen. Viele von Ihnen würden es wahrscheinlich schwierig finden, solche Menüs zu implementieren, da sich die Ereignis-Listener unterscheiden und keine Flags verwendet werden können. Dieses Beispiel sollte zeigen, dass es mit normalem JavaScript möglich ist, ohne unverschämte Qualifikationen dieselben Dinge wie in praktischen Android-Anwendungen zu implementieren. Durch meisterhafte Arbeit mit Animationen können Sie fantastische Übergangseffekte und verschiedene Ereignis-Hooks für jede Auslösung erstellen.