Material Menu With Paging

Developer
Albert Miller
Size
3,526 Kb
Views
30,360
  1. Material Menu With Paging Previews
  2. Material Menu With Paging HTML Codes
  3. Material Menu With Paging CSS Codes
  4. Material Menu With Paging JS Codes

How do I make an material menu with paging?

What is a material menu with paging? How do you make a material menu with paging? This script and codes were developed by Albert Miller on 23 August 2022, Tuesday.

Material Menu With Paging Previews
IQ Test

Material Menu With Paging - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Menu With Paging</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="header">	<a class="header__menu-button"><i class="material-icons">menu</i></a>
</div>
<div class="menu">	<div class="menu__window menu__window--tier-1">	<div class="menu__section">	<ul class="menu__item-list">	<li class="menu__item">Page 1</li>	<li class="menu__item">Menu Item 1</li>	<li class="menu__item">Menu Item 2</li>	<li class="menu__item">Menu Item 3</li>	<li class="menu__item">Menu Item 4</li>	<li class="menu__item">Menu Item 5</li>	<li class="menu__item">Menu Item 6</li>	<li class="menu__item">Menu Item 7</li>	<li class="menu__item">Menu Item 8</li>	</ul>	</div><!--	--><div class="menu__section">	<ul class="menu__item-list">	<li class="menu__item">Page 2</li>	<li class="menu__item">Menu Item 1</li>	<li class="menu__item">Menu Item 2</li>	<li class="menu__item">Menu Item 3</li>	<li class="menu__item">Menu Item 4</li>	<li class="menu__item">Menu Item 5</li>	<li class="menu__item">Menu Item 6</li>	<li class="menu__item">Menu Item 7</li>	</ul>	</div><!--	--><div class="menu__section">	<ul class="menu__item-list">	<li class="menu__item">Page 3</li>	<li class="menu__item">Menu Item 1</li>	<li class="menu__item">Menu Item 2</li>	<li class="menu__item">Menu Item 3</li>	<li class="menu__item">Menu Item 4</li>	<li class="menu__item">Menu Item 5</li>	<li class="menu__item">Menu Item 6</li>	<li class="menu__item">Menu Item 7</li>	</ul>	</div><!--	--><div class="menu__section">	<ul class="menu__item-list">	<li class="menu__item">Page 4</li>	<li class="menu__item">Menu Item 1</li>	<li class="menu__item">Menu Item 2</li>	<li class="menu__item">Menu Item 3</li>	<li class="menu__item">Menu Item 4</li>	<li class="menu__item">Menu Item 5</li>	<li class="menu__item">Menu Item 6</li>	<li class="menu__item">Menu Item 7</li>	</ul>	</div>	</div>
</div>
<div class="card">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material Menu With Paging - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,600,700);
body { font-family: 'Roboto'; margin: 0;
}
.header { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); background-color: #1976d2; height: 3em; font-family: 'Roboto'; position: relative; width: 100%; z-index: 2;
}
.header__title { display: inline-block; color: #FFF; font-weight: 300; font-size: 2em; margin: .2em 0 0 .4em;
}
.header__menu-button { color: #fff; cursor: pointer; display: inline-block; padding: 12px;
}
.menu { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26); bottom: 0; left: -30em; overflow: hidden; position: fixed; top: 48px; transition: left .4s ease-in-out; width: 16em;
}
.menu--open { left: 0; transition: left .4s ease-in-out;
}
.menu__window { left: 0; position: relative; transition: left .4s ease-in-out; width: 80em;
}
.menu__window--tier-1 { left: 0; transition: left .4s ease-in-out;
}
.menu__window--tier-2 { left: -16em; transition: left .4s ease-in-out;
}
.menu__window--tier-3 { left: -32em; transition: left .4s ease-in-out;
}
.menu__window--tier-4 { left: -48em; transition: left .4s ease-in-out;
}
.menu__section { background-color: #fff; display: inline-block; height: 100%; overflow-y: auto; position: relative; width: 16em; white-space: nowrap; vertical-align: top; z-index: 1;
}
.menu__item-list { margin: 0; overflow: hidden; padding: 1em 0 0 2em;
}
.menu__item { list-style-type: none; margin-bottom: 1.5em; text-decoration: none;
}
.menu__item:first-of-type { font-weight: 600;
}
.menu__item:last-of-type { border-bottom: 0;
}

Material Menu With Paging - Script Codes JS Codes

var open = true;
var count = 1;
$('.header__menu-button').on('click', function(){	event.stopPropagation();	if (open) {	$('.menu').addClass('menu--open');	open = false;	} else {	$('.menu').removeClass('menu--open');	open = true;	}
});
$(document).on('click', function(){	$('.menu').removeClass('menu--open');	open = true;
});
$('.menu__section').on('click', function(){	event.stopPropagation();	switch (count) {	case 1:	$('.menu__window').attr('class', 'menu__window menu__window--tier-2');	count = 2;	break;	case 2:	$('.menu__window').attr('class', 'menu__window menu__window--tier-3');	count = 3;	break;	case 3:	$('.menu__window').attr('class', 'menu__window menu__window--tier-4');	count = 4;	break;	case 4:	$('.menu__window').attr('class', 'menu__window menu__window--tier-1');	count = 1;	break;	}
});
$(window).load(function(){	var menuHeight = $(window).height();	menuHeight = menuHeight - $('.header').height();	$('.menu__window').attr('style', 'height:'+menuHeight+'px;');
});
Material Menu With Paging - Script Codes
Material Menu With Paging - Script Codes
Home Page Home
Developer Albert Miller
Username SinceSidSlid
Uploaded August 23, 2022
Rating 3
Size 3,526 Kb
Views 30,360
Do you need developer help for Material Menu With Paging?

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!

Albert Miller (SinceSidSlid) Script Codes
Name
Work Day Clock
Loading State
Order Redesign
Dynamic Image Cover
Material Toggle Box Thing
Expert Help
Loading State 2
Chart Loading Animation
Material Week Calendar
Scroll Lock
Create amazing blog posts 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!