Mobile Material Menu Style

Developer
Izzy Skye
Size
5,189 Kb
Views
12,144
  1. Mobile Material Menu Style Previews
  2. Mobile Material Menu Style HTML Codes
  3. Mobile Material Menu Style CSS Codes
  4. Mobile Material Menu Style JS Codes

How do I make an mobile material menu style?

Material menu style transition (with my jquery material button click for link animation). What is a mobile material menu style? How do you make a mobile material menu style? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Mobile Material Menu Style Previews
IQ Test

Mobile Material Menu Style - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Material Menu Style</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Material menu style transition (with my jquery material button click for link animation)">
<link href='https://fonts.googleapis.com/css?family=Raleway:300,400,600,700' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='http://cdn.zekken.rocks/css/burger-v1.0.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" name="mobile-nav" id="mobile-nav" class="burger-check">
<label for="mobile-nav" class="burger black" tabindex=0><span></span></label>
<nav role='navigation' class="header-nav">	<div class="fixed-nav">	<h1 class="nav-title">Click the burger!</h1>	<ul>	<li><a href="#" class="clickhere">Home</a></li>	<li>	<a href="#" class="clickhere">About</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a></li>	<li><a href="#" class="clickhere">Aliquam</a></li>	<li><a href="#" class="clickhere">Vestibulum aliquam lorem</a></li>	</ul>	</li>	<li><a href="#" class="clickhere">Aliquam</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a></li>	<li><a href="#" class="clickhere">Aliquam</a></li>	<li><a href="#" class="clickhere">Vestibulum</a></li>	</ul>	</li>	<li><a href="#" class="clickhere">Vestibulum</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a></li>	<li><a href="#" class="clickhere">Aliquam</a></li>	<li><a href="#" class="clickhere">Vestibulum</a></li>	</ul>	</li>	</ul>	</li>	<li><a href="#" class="clickhere">Clients</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a></li>	<li><a href="#" class="clickhere">Aliquam</a></li>	<li><a href="#" class="clickhere">Vestibulum</a></li>	</ul>	</li>	<li><a href="#" class="clickhere">Aliquam</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a></li>	<li><a href="#" class="clickhere">Aliquam</a></li>	<li><a href="#" class="clickhere">Vestibulum</a></li>	</ul>	</li>	<li><a href="#" class="clickhere">Vestibulum</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a></li>	<li><a href="#" class="clickhere">Aliquam</a></li>	<li><a href="#" class="clickhere">Vestibulum</a></li>	</ul>	</li>	</ul>	</li>	<li><a href="#" class="clickhere">Contact Us</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a></li>	<li><a href="#" class="clickhere">Aliquam</a></li>	<li><a href="#" class="clickhere">Vestibulum</a></li>	</ul>	</li>	<li><a href="#" class="clickhere">Aliquam</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a></li>	<li><a href="#" class="clickhere">Aliquam</a></li>	<li><a href="#" class="clickhere">Vestibulum</a></li>	</ul>	</li>	<li><a href="#" class="clickhere">Vestibulum</a>	<ul class="child">	<li><a href="#" class="clickhere">Lorem</a></li>	<li><a href="#" class="clickhere">Aliquam</a></li>	<li><a href="#" class="clickhere">Vestibulum</a></li>	</ul>	</li>	</ul>	</li>	</ul>	</div>
</nav>
<div class="content-wrap">	<section>	<h2>Support</h2>	<p>As far as I can figure out, this will work on most browsers except for ie 8 and below as well as opera mini as it uses the checked property, transform for the menu, as well as the calc function for widths and heights in some places. Feel free to leave	a comment if you find a bug.</p>
<!--	<p>NOTE: Now supports accessibility via tabbing through the links (and pressing space to open or close the menu icon)</p> -->	</section>	<section>	<h2>Default Behaviour</h2>	<p>Click on the burger to make something happen to these paragraphs. In this paragraph, the mobile menu will 'overlap' which is the default behaviour for the menu so no additional classes will be needed for the individual sections. I personally prefer	this style a lot more.</p>	</section>	<section class="fit-width">	<h2>fit-width Behaviour</h2>	<p>In this paragraph, the content will fit the remaining space on the page creating a more 'squished' content column. This isn't very good for small devices but can be useful for landscape orientation with a small amount of important content. Use the	class fit-width on the section to make this one work.</p>	</section>	<section class="off-page">	<h2>off-page Behaviour</h2>	<p>In this paragraph, the content will partially 'slide off' the page relative to the width of the menu and will also become less opaque to bring focus to the menu. This is ok but I would rather use the overlap as the content won't be fully readable	for the user when the menu is open. Use the class off-page for this.</p>	</section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.zekken.rocks/js/plugins/mbclicker-v1.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mobile Material Menu Style - Script Codes CSS Codes

html,
body {	font-family: 'Raleway', 'Arial', sans-serif;	height: 100%;	margin: 0;	overflow: hidden;	width: 100%;
}
.content-wrap {	background: url(https://cdn.zekken.rocks/img/cubes.svg);	height: calc(100% - 60px);	float: left;	overflow-x: hidden;	overflow-y: auto;	padding-top: 16px;	padding-bottom: 8px;	position: relative;
}
*,
*:before,
*:after {	box-sizing: border-box;	/* No animations on ie9 or below */	-webkit-transition: all 0.3s;	transition: all 0.3s;
}
#mobile-nav {	display: block;	position: absolute;
}
#mobile-nav:focus + .burger {	background: #eee;
}
.burger {	left: 0;	overflow: hidden;	position: fixed;	top: 0;
}
/* NAV STYLES */
.header-nav {	float: left;	height: 60px;	position: relative;	width: 100%;
}
.fixed-nav {	background: #fff;	height: 60px;	position: fixed;	width: 100%;	z-index: 9000;
}
.header-nav .nav-title {	box-shadow: 0 1px 3px #bbb;	font-weight: 600;	height: 100%;	margin: 0;	line-height: 60px;	padding: 0 60px;	text-align: center;	white-space: nowrap;	width: 100%;
}
.header-nav ul {	background: #fff;	list-style: none;	margin: 0;	padding: 10px 0 0 0;	position: absolute;	top: 100%;	-webkit-transform: translateX(-110%);	transform: translateX(-110%);	-webkit-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);	-o-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);	-moz-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);	transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);	width: 200px;	z-index: -1;
}
.header-nav ul:not(.child) {	box-shadow: 1px 2px 3px #bbb;	height: calc(100vh - 60px);	overflow-y: auto;
}
.burger-check:checked ~ .header-nav ul {	-webkit-transform: translateX(0);	transform: translateX(0);
}
.header-nav ul li {	float: left;	position: relative;	width: 100%;
}
.header-nav ul li a {	color: #333;	display: block;	float: left;	font-size: 14px;	font-weight: 700;	line-height: 24px;	overflow: hidden;	position: relative;	padding: 12px 60px 12px 12px;	text-decoration: none;	width: 100%;
}
.header-nav ul li a.with-child { padding-bottom: 0; padding-left: 0; padding-top: 0;
}
.header-nav ul li a.with-child span:not(.has-child) {	color: #333; display: block;	overflow: hidden; padding-bottom: 12px; padding-left: 12px; padding-top: 12px;	z-index: 9001;
}
.header-nav ul li a.active {	background: #f5f5f5;
}
.header-nav ul li a:active,
.header-nav ul li a:focus,
.header-nav ul li a:hover {	background: #eee;	outline: none;
}
.header-nav ul li .has-child {	background: #fff;	height: 100%;	overflow: hidden;	position: absolute;	right: 0;	top: 0;	width: 60px;	z-index: 9001;
}
.header-nav ul li .active .has-child,
.header-nav ul li .has-child:hover {	background: rgba(0,0,0,0.02);
}
.header-nav ul li .has-child:after {	border: 5px solid transparent;	border-top-width: 8px;	border-top-color: rgba(0, 0, 0, 0.15);	content: '';	height: 0;	right: 26px;	position: absolute;	top: 20px;	width: 0;
}
.header-nav ul li .active .has-child:after {	top: 15px;	-webkit-transform: rotate(180deg);	transform: rotate(180deg);
}
.header-nav ul li .child {	box-shadow: none;	float: left;	height: auto;	overflow: hidden;	padding: 0;	position: relative;	width: 100%;	z-index: 1;
}
.header-nav ul li .child li a {	color: #fff;	font-weight: 600;	max-height: 0;	padding: 0 60px 0 0;
}
.header-nav .child li .child li a {	font-weight: 400;	padding: 0 60px 0 0;
}
.header-nav ul li .active ~ .child > li > a {	color: #333;	max-height: 102px;	/* THREE LINES ONLY */
}
.header-nav .child li .child li a:not(.with-child) {	padding-left: 36px;
}
.header-nav ul li .active ~ .child > li > a:not(.with-child) {	padding-bottom: 12px;	padding-left: 36px;	padding-top: 12px;
}
.header-nav ul li .active ~ .child > li > a span:not(.has-child) {	padding-left: 24px;
}
section {	background: #fbfbfb;	border-radius: 0.1em;	box-shadow: 0 1px 3px #ccc;	float: left;	margin: 0 7.5% 8px 7.5%;	padding: 24px 20px 12px 20px;	position: relative;	width: 85%;
}
#mobile-nav:not(:checked) ~ .content-wrap section:hover {	background: #fff;
}
.burger-check:checked ~ .content-wrap .fit-width {	margin-left: 200px;	width: calc(100% - 200px);
}
.burger-check:checked ~ .content-wrap .off-page {	opacity: 0.5;	margin-left: calc(7.5% + 200px);
}
section h2,
section p {	margin: 0 0 16px 0;
}
section h2 {	font-weight: 600;
}
@media (min-width: 768px) {	.burger-check:checked + .burger {	width: 30%;	}	.burger-check:checked + .burger:after {	bottom: 18px;	content: 'Close Menu';	font-size: 20px;	padding-left: 30px;	}	.burger-check:checked + .burger:hover {	background: #eee;	}	.header-nav .nav-title {	box-shadow: 0 3px 5px #bbb;	}	.header-nav ul {	box-shadow: 3px 3px 5px #bbb;	padding-top: 70px;	top: 0;	width: 30%;	z-index: 1;	}	.header-nav ul:not(.child) {	height: 100vh;	}	.header-nav ul:not(.child):before {	border-bottom: 1px solid #ddd;	content: '';	top: 60px;	position: absolute;	width: 100%;	}	section {	margin: 0 15% 8px 15%;	width: 70%;	}	.burger-check:checked ~ .content-wrap .fit-width {	margin-left: 30%;	width: 70%;	}	.burger-check:checked ~ .content-wrap .off-page {	opacity: 0.5;	margin-left: 37.5%;	}
}

Mobile Material Menu Style - Script Codes JS Codes

//Github Repo is here: https://github.com/lopeax/material-button-click
$(document).ready(function() {	if($(window).innerWidth() > 768)	$('#mobile-nav').attr('checked','checked');	var ua = navigator.userAgent;	var events = (ua.match(/iPad/i)) ? 'touchstart' : 'click';	var $nav = $('.header-nav');	/* Add child recognition */	var links = $nav.find('.child').prev();	links.each(function(){	var link = $(this);	var text = link.text();	link.removeClass('clickhere');	link.addClass('with-child');	link.html('<span class="clickhere">'+text+'</span><span class="has-child clickhere"></span>');	});	/* Circle = square in ie8 or below */	$('.clickhere').mbClicker({	size: 600, //Maximum size of circle	speed: 850, //Time of animation in miliseconds	colour: 'rgba(0,0,0,0.11)', //Colour of circle and shadow	shadow: false, //Whether or not to have a shadow on the circle	buttonAnimation: true //Only use if button doesn't have a style attribute	});	/* Adds accessibility for tabbing through the menu */	$nav.find('a').attr('tabindex', '-1');	$('#mobile-nav').on('change', function(e) {	var top = $nav.find('a');	if (top.attr('tabindex') == '-1') {	top.attr('tabindex', '0');	$('a').focus(function() {	$pressed = $(this);	$pressed.addClass('active');	$pressed.parents('li').children('a').addClass('active');	}).blur(function() {	$pressed = $(this);	$pressed.removeClass('active');	$pressed.parents('li').children('a').removeClass('active');	});	} else {	top.attr('tabindex', '-1');	}	});	/* Navigation active magic */	$nav.find('a .has-child').on(events, function(e) {	e.preventDefault();	var item = $(this).parent();	var li = item.parent();	if (item.parents('.child').length == 0) {	li.find('a').removeClass('active');	}	if (item.next().hasClass('child')) {	if(item.hasClass('active')){	item.removeClass('active');	} else {	li.parent().find('a').removeClass('active');	item.addClass('active');	}	}	});
});
Mobile Material Menu Style - Script Codes
Mobile Material Menu Style - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 3
Size 5,189 Kb
Views 12,144
Do you need developer help for Mobile Material Menu Style?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Izzy Skye (zephyr) Script Codes
Name
Pure CSS Tab Navigation
Pure CSS Menu Transition
Tab Menus
Material CSS Contact Popup
Aperture Science style loading
Pure CSS Social Widget
Pure CSS Spinning Cube
Vanilla JS Pattern Locker
Audio Player
Pure CSS Wordpress Fancyboxes
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!