elex/css-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2024-06-21

Browse Source
This commit is contained in:
Elex
2024-06-21 13:36:10 +09:00
parent 35490d1c24
commit 9b8584413a
1 changed files with 188 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/grid-layout.html Normal file
View File

@@ -0,0 +1,188 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>App Layout</title>
<style>
* {
box-sizing: border-box;
}
html, body {
width: 100%; height: 100%;
margin:0; border:0; padding: 0;
}
main {
margin: 0;
}
#app-layout{
width: 100%; height: 100%;
margin:0; border:0; padding: 0;
display: grid;
grid-template-areas: "header header"
"sidebar main-content";
grid-template-columns: 280px 1fr;
grid-template-rows: 64px 1fr;
transition-property: all;
transition-duration: .5s;
}
#app-layout.closed{
grid-template-columns: 0px 1fr;
}
#header{
height: 64px;
grid-area: header;
background-color: teal;
box-shadow: 0 1px 2px 1px rgb(0, 0, 0, .2);
display: flex;
align-items: center;
justify-content: flex-start;
}
#sidebar{
width: 280px;
grid-area: sidebar;
overflow-y: scroll;
transition-property: all;
transition-duration: .5s;
background-color: gray;
}
.closed #sidebar{
margin-left: -280px;
}
#sidebar ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
list-style-position: inside;
list-style-type: none;
margin: 0; padding: 0;
}
#sidebar li {
height: 48px;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: start;
}
#sidebar li:hover {
background-color: aliceblue;
}
#sidebar li a {
overflow: hidden;
}
#main-content {
grid-area: main-content;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
#main-content .page-layout {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
flex-grow: 1;
box-shadow: 2px 0 2px 1px rgb(0,0,0, .4),
-2px 0 2px 1px rgb(0,0,0, .4);;
}
#main-content main{
background-color: lightgray;
min-height: 300px;
flex-grow: 1;
}
#main-content footer{
background-color: darkslategray;
flex-grow: 0;
}
#mob-menu {
display: block;
width: 100%; height: 100%;
margin: 0; padding: 0; border: 0;
background-color: rgb(0, 0, 0, .2);
position: absolute;
top: 0; left: 0;
}
#mob-menu ul {
background-color: wheat;
width: 85%; height: 100%;
list-style-type: none;
margin: 0; padding: 0;
}
</style>
<script>
let toggle = function(){
document.querySelector("#app-layout").classList.toggle("closed");
};
let toggle2 = function(){
let elem = document.querySelector("#mob-menu");
if (null == elem){
let mnu = document.createElement("div");
mnu.setAttribute("id", "mob-menu");
mnu.onclick = function(){
toggle2();
};
mnu.appendChild(document.querySelector("#sidebar ul").cloneNode(true));
document.querySelector("body").append(mnu);
} else {
document.querySelector("body").removeChild(elem);
}
};
</script>
</head>
<body>
<div id="app-layout">
<header id="header">
<button onclick="toggle();">Toggle</button> <button onclick="toggle2();">Mobile</button><span>Header</span>
</header>
<aside id="sidebar">
<ul>
<li><a href="">Menu 1</a></li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
<li>Menu 1</li>
</ul>
</aside>
<div id="main-content">
<div class="page-layout">
<main>
<article>
<p>Main</p>
<p>
...
</p>
</article>
</main>
<footer>
Footer
</footer>
</section>
</div>
</div>
</body>
</html>