Android 自定义View绘制汉堡菜单

Posted 2023-04-18

参考技术A 汉堡菜单，其实就是三条横杠，Google Material Design中一般用来做侧边栏开关，微软的UWP也是同样的做法。

将画布中心移动到控件中心，先绘制中间那一条横线，再计算上面和下面的横线的位置，如果不计算，也可以使用Canvas.translate()，移动2次画布中心去画。

javascript 启动自定义菜单汉堡包

<script>
	var hamburger = document.querySelector(".hamburger"),
		menuToggle = document.querySelector( '.menu-toggle' ),
		menuItems = document.querySelectorAll( 'nav ul a' );

	menuToggle.addEventListener("click", function() {
		hamburger.classList.toggle("is-active");
	} );

	for ( var i = 0; i < menuItems.length; i++ ) {
		menuItems[i].addEventListener( 'click', function( e ) {
			var closest_nav = this.closest( 'nav' );
			if ( closest_nav.classList.contains( 'toggled' ) || htmlEl.classList.contains( 'slide-opened' ) ) {
				var url = this.getAttribute( 'href' );
				var hash = url.split('#')[1];

				// Open the sub-menu if the link has no destination
				if ( hash ) {
					e.preventDefault();
					hamburger.classList.toggle("is-active");
				}
			}
		}, false );
	}
</script>