Menu dinamis dengan dukungan untuk gerakan sentuh dan gerakan mouse di RevolveR

Pasti banyak dari Anda yang ingin mempelajari cara membuat menu yang indah dan mengalir dengan semangat aplikasi Java dan Kotlin Android. Kemungkinan besar, bahkan banyak dari Anda demi ini tertinggal di bidang pemrograman aplikasi individu dan dipaksa untuk menguasai tumpukan asing.



Pada artikel ini saya akan memberi tahu Anda betapa sederhananya dan mudahnya membuat menu dinamis linier yang tidak hanya mendukung peristiwa mouse, tetapi juga pointer untuk versi seluler.



Dan begitu: Menu Dinamis Sederhana oleh RevolveR Labs.

Semuanya dimulai dengan tata letak. Itu harus semantik, ringan dan modern.

<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>

Kami menggunakan daftar berpoin standar dan HTML 5 sebagai elemen pembungkus, dan untuk membuat menu mengambang, kami akan segera menulis gaya CSS yang menarik menu keluar dari layar ke lebar penuh dari daftar elemen dan menyembunyikan semua yang tidak perlu ke ruang lingkup:

.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 .

Banyak dari Anda menggunakan plugin siap pakai atau menyematkan blok tata letak dengan menu hamburger, tetapi menu linier dinamis sama baiknya dan menghemat ruang di antarmuka. Banyak dari Anda mungkin merasa sulit untuk mengimplementasikan menu seperti itu karena perbedaan pendengar acara dan ketidakmampuan untuk menggunakan flag. Contoh ini ditujukan untuk menunjukkan bahwa menggunakan JavaScript biasa dimungkinkan, tanpa memiliki kualifikasi penghalang, untuk mengimplementasikan hal-hal yang sama seperti dalam aplikasi Android yang nyaman, dan pekerjaan ahli dengan animasi memungkinkan Anda untuk membuat efek transisi yang mengagumkan dan berbagai event hook untuk pemicu apa pun.