Custom responsive menu that appears in main navigation and slides from right and has sub nav that slides in over.

responsive-custom-menu.less

@media screen and (max-width: @media-mobile-break) {
	body.menu-opened .nav-container {
		-webkit-overflow-scrolling: touch;
	}
	.nav-container {
		margin: 0;
		position: relative;
		padding: 0 !important;
		height: 0;
		z-index: 200;

		// Triangle below menu icon
		&::before {
			.triangle-up(6px; @brand-grey);
			right: percentage(46 / @_current-width);
			top: -5px;

			.opacity(0);
			.translate3d(0, 100%, 0);
			.transition(all .2s ease-in-out);
		}
		&.shown {
			&::before {
				.opacity(1);
				.translate3d(0, 0, 0);
				.transition-delay(.2s);
			}
		}

		// Menu items contains the #nav (left of the desktop utilities)
		.menu-items {
			padding: 0;
		}
		&.transitionable .inner-container {
			.transition(~"all .6s ease-in-out");
		}
		.inner-container {
			background-color: #fff;
			border-top: 1px solid @brand-light-grey;
			overflow-y: scroll;
			overflow-x: hidden;
			position: absolute;
			right: -100%;
			top: -1px;
			padding: 0 !important;
			width: 100%;

			.box-shadow(3px 2px 4px rgba(0, 0, 0, 0.4));
			.translate3d(0, 0, 0);  // offset for the box shadow!
			//.transition(~"all .6s ease-in-out");

			// Sweet transitioning fade effect here
			&::after {
				background-color: #fff;
				content: ' ';
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				z-index: 100;

				.opacity(.2);
				.transition(~"opacity .5s linear");
			}
		}
		&.transitioning .inner-container {
			&::after {
				left: -100%;
			}
		}
		&.shown .inner-container {
			.translate3d(-100%, 0, 0);

			&::after {
				left: -100%;
				.opacity(.9);
			}
		}
		.nav-menu {
			width: 100%;
		}
	}

	#nav {
		padding: 0;
		float: none;
		display: block;

		li.level-top.show700 {
			display: block;
		}

		li.level-top {
			border-top: 1px solid @brand-light-grey;
			display: block;
			margin: 0;
			padding: 0;
			position: static;	// static b/c sub menus need to be absolute to nav el

			&::before,
			&::after {
				display: none !important;
			}
			&:first-child {
				border: 0;
			}
			a.level-top {
				padding: percentage(28 / @_current-width) percentage(30 / @_current-width);
			}
		}
		li.level-top {
			a.level-top::after {
				display: none;
			}
		}
		ul.level0 {
			display: none !important;
		}
	}

	#menu-pane {
		border: 0;
		overflow: visible;
		position: absolute;
	}
	#menu-pane ul.level0 {
		.box-shadow(-3px 2px 4px rgba(0, 0, 0, 0.1));
		background-color: #fff;
		display: block;
		margin-top: 0;
		top: 0;
		left: 100%;
		width: 100%;
		z-index: 40;

		.transition(all .4s ease-in-out);
		.translate3d(10%,0,0);

		// Sweet transitioning fade effect here
		&::before {
			background-color: #fff;
			content: ' ';
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 100%;

			.opacity(.2);
			.transition(~"opacity .3s linear");
		}
		&.transitioning {
			&::before {
				left: -110%;
				//.opacity(.8);
			}
		}
		&.shown {
			.translate3d(-100%,0,0);

			&::before {
				left: -110%;
				.opacity(.9);
			}
		}
		.level1 {
			border-top: 1px solid @brand-light-grey;
			display: block;
			margin: 4% auto 0;
			max-width: 400px;
			padding-top: 4%;
			width: 100%;

			&.first {
				border-top: 0;
			}

			& > a {
				padding-bottom: 0;

				&::before,
				&::after {
					display: none;
				}
			}
		}
		li.back-link {
			.inline-icon(-152px;-222px;30px;30px);;
			cursor: pointer;
			margin-top: 0;
			position: relative;
			margin-left: percentage(30 / @_current-width);
		}
	}

	// once the main menu is opened/exposed we can now show the sub menu
	.nav-container.shown & {
		#menu-pane ul.level0 {
			.opacity(1);
		}
	}
}