Material header and menu drawer

Developer
Anthony Young
Size
3,347 Kb
Views
18,216
  1. Material header and menu drawer Previews
  2. Material header and menu drawer HTML Codes
  3. Material header and menu drawer CSS Codes
  4. Material header and menu drawer JS Codes

How do I make an material header and menu drawer?

What is a material header and menu drawer? How do you make a material header and menu drawer? This script and codes were developed by Anthony Young on 31 October 2022, Monday.

Material header and menu drawer Previews
IQ Test

Material header and menu drawer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material header and menu drawer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header> <div class="inner"> <div class="burger-wrap"> <button class="burger"></button> </div> <div class="logo"> Anthony Young </div> </div> </header> <div class="menuDrawer"> <div class="logo"> Anthony Young </div> </div> <div class="content"> Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </div>
</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 header and menu drawer - Script Codes CSS Codes

.container { background-color: #eeeeee; width: 100%; height: 100%;
}
header { position: fixed; top: 0px; height: 60px; width: 100%; background: #ffffff; -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -o-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear;
}
header.red { background-color: #F44336; -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -o-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear;
}
.logo { line-height: 60px;
}
.content { text-align: center; width: 50%; margin: 10%;
}
/*Burger*/
.burger-wrap { padding: 20px; float: left;
}
.burger { border: 0; background: none; outline: 0; padding: 0; cursor: pointer; border-bottom: 4px solid currentColor; width: 28px; transition: border-bottom 1s ease-in-out; -webkit-transition: border-bottom 1s ease-in-out;
}
.burger::-moz-focus-inner { border: 0; padding: 0;
}
.burger:before { content: ""; display: block; border-bottom: 4px solid currentColor; width: 100%; margin-bottom: 5px; transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after { content: ""; display: block; border-bottom: 4px solid currentColor; width: 100%; margin-bottom: 5px; transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open { border-bottom: 4px solid transparent; transition: border-bottom 0.8s ease-in-out; -webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before { transform: rotate(-405deg) translateY(1px) translateX(-3px); -webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px); transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after { transform: rotate(405deg) translateY(-4px) translateX(-5px); -webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px); transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

Material header and menu drawer - Script Codes JS Codes

$(window).scroll(function() { var is_active = $('header').hasClass('red'); if ($(window).scrollTop() > 50 && !is_active) { $('header').addClass('red'); } else if ($(window).scrollTop() <= 50 && is_active) { $('header').removeClass('red'); }
});
$('.burger').click(function () { $(this).toggleClass('open');
});
Material header and menu drawer - Script Codes
Material header and menu drawer - Script Codes
Home Page Home
Developer Anthony Young
Username ayoungh
Uploaded October 31, 2022
Rating 3
Size 3,347 Kb
Views 18,216
Do you need developer help for Material header and menu drawer?

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!

Anthony Young (ayoungh) Script Codes
Name
Anthony Young - ayoungh.co.uk Material Design mashup
Particle.js play
Keypress check mobile
Tags and searching etc
UL scroll to
A Pen by Anthony Young
Exit Intention JS
Drop down sidebar
Yourorderhub.co.uk
Scroll Progress Indicator With jQuery and SVG
Create amazing sales emails 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!