- Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
height: 100vh;
grid-template-columns: 200px auto;
grid-template-rows: 40px auto 100px;
grid-template-areas:
"navbar navbar"
"sidebar main-content"
"footer footer";
}
.grid-item-navbar {
background-color: rgb(189, 113, 113);
grid-area: navbar;
}
.grid-item-sidebar {
background-color: rgb(60, 221, 221);
grid-area: sidebar;
}
.grid-item-main-content {
background-color: rgb(216, 218, 119);
grid-area: main-content;
}
.grid-item-footer {
background-color: rgb(140, 87, 184);
grid-area: footer;
}
.grid-item-sidebar.enter {
opacity: 1;
left: 0;
}
@media only screen and (max-width: 1024px) {
.grid-item-sidebar {
width: 200px;
height: 100%;
top: 0;
left: -400px;
overflow: hidden;
background-color: rgb(60, 221, 221);
box-shadow: 5px 5px 10px grey;
position: absolute;
z-index: 11;
opacity: 0;
transition: all 0.25s;
-webkit-transition: all 0.25s;
}
.container {
grid-template-columns: auto;
grid-template-rows: 60px auto 150px;
grid-template-areas:
"navbar"
"main-content"
"footer";
}
}
@media only screen and (max-width: 768px) {
.container {
grid-template-columns: auto;
grid-template-rows: 60px auto 160px;
grid-template-areas:
"navbar"
"main-content"
"footer";
}
}
</style>
<script>
const handleSidebarOpen = () => {
document.getElementById("triggerSidebar").classList.add("enter")
}
const handleSidebarClose = () => {
document.getElementById("triggerSidebar").classList.remove("enter")
}
</script>
</head>
<body>
<div class="container">
<div class="grid-item-navbar" onclick="handleSidebarOpen()">navbar</div>
<div class="grid-item-sidebar" id="triggerSidebar" onclick="handleSidebarClose()">sidebar</div>
<div class="grid-item-main-content">main-content</div>
<div class="grid-item-footer">footer</div>
</div>
</body>
</html>
No comments:
Post a Comment