■
<!doctype html><!doctype html><html lang="ja"><head> <link rel="stylesheet" type="text/css" href="css/1.css"> <link rel="stylesheet" type="text/css" href="css/menu.css"> <link rel="stylesheet" type="text/css" href="css/popup.css"> <meta charset="UTF-8"> <title>花屋</title></head><body> <input type="checkbox" class="check" id="checked"> <label class="menu-btn" for="checked"> <span class="bar top"></span> <span class="bar middle"></span> <span class="bar bottom"></span> <span class="menu-btn__text">MENU</span> </label> <label class="close-menu" for="checked"></label> <nav class="drawer-menu"> <ul> <li><a href="#">商品リスト</a></li> <li><a href="#">会員メニュー</a></li> <li><a href="#">連絡</a></li> <li><a href="#">ログイン</a></li> </ul> </nav>
<!-- メインコンテンツ --><div class="contents">
<!-- ここはコンテンツ --> <header id="header">
</header>
<center id="main"><h1 class="title"><h1> <br><br><br><br><br>B</h1></center> <center id="side"><br><br><br><br><br><br><br><br><br>B</center> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <center>
<div class="box_1"> <div class="mask"> <div class="caption"><label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label> </div> </div></div>
<div class="box_1"> <div class="mask"> <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label> </div> </div></div><div class="box_1"> <div class="mask"> <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label> </div> </div></div><div class="box_1"> <div class="mask"> <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label> </div> </div></div><div class="box_1"> <div class="mask"> <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label> </div> </div></div><div class="box_1"> <div class="mask"> <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label> </div> </div></div><div class="box_1"> <div class="mask"> <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label> </div> </div></div><div class="box_1"> <div class="mask"> <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label> </div> </div></div><div class="box_1"> <div class="mask"> <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label> </div> </div></div>
<div class="modal_wrap"><input id="trigger" type="checkbox"> <div class="modal_overlay"> <label for="trigger" class="modal_trigger"></label> <div class="modal_content"> <label for="trigger" class="close_button">✖️</label> <h2>Califlower</h2> <p>aaa</p><a href="#" class="btn-square">カートに入れる</a>
</div> </div></div></center>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"></div></body></html>
--------------------1.css
.title{.title{ position: fixed; width : calc(100% / 1) ;}#header{ width: 480px;}#main{ width: calc(100% / 3) ;
float: left;}#side{ width: calc(100% * 0.6) ;
float: right;
}.box_1 { position: relative; display: inline-block; vertical-align: middle; color: #FFF; width : -webkit-calc(100% / 3) ; width : calc(100% / 4) ; margin: calc(100% / 60); height:160px; background-color: red; text-align: center;}.box_1 .caption { font-size: 130%; color: #fff; padding-top: calc(100% / 4); padding-left: 100px;}.box_1 .mask { width : 100%; height: 100%; position: absolute; top: -100%; /* 枠の上に置いて表示させない */ left: 0; -webkit-transform: scale(0); /* 大きさを０にして表示しない */transform: scale(0); background-color: rgba(0,0,0,0.4); -webkit-transition: all 0.6s ease; transition: all 0.6s ease;}.box_1:hover .mask { -webkit-transform: scale(1); /* 大きさを１にして表示する */transform: scale(1); top: 0; /* 下に降りてくるように見せる */}
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px;}.btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/}
----------------------popup.css
.modal_wrap input {
display: none;
}
.modal_overlay {
display: flex;
justify-content: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.5s, transform 0s 0.5s;
transform: scale(0);
}
.modal_trigger {
position: absolute;
width: 100%;
height: 100%;
}
.modal_content {
align-self: center;
width: 60%;
max-width: 800px;
padding: 30px 30px 15px;
box-sizing: border-box;
background: #fff;
line-height: 1.4em;
transform: scale(1.2);
transition: 0.5s;
}
.close_button {
position: absolute;
top: 14px;
right: 16px;
font-size: 24px;
cursor: pointer;
}
.modal_wrap input:checked ~ .modal_overlay {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s;
}
.modal_wrap input:checked ~ .modal_overlay .modal_content {
transform: scale(1);
}
.open_button {
}
--------------------------menu.css
/* common *//* common */body { margin: 0; padding: 0;}
ul { margin: 0; padding: 0; list-style: none;}
/* contents */.contents { display: table; width: 100%; height: 100vh; padding: 0; margin: 0; /*background: #f6bc60;*/ box-shadow: 0 0 50px 0 rgba(0,0,0,.8); -webkit-transition-property: all; transition-property: all; -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-transition-duration: .5s; transition-duration: .5s;}
.contents__inner { display: table-cell; vertical-align: middle; text-align: center;}
.contents__inner h1 { margin: 0; padding: 0; color: #fff; font-size: 40px; font-family: Futura, "Century Gothic", "helvetica neue", arial, sans-serif !important; font-style: italic;}
.contents__inner p { margin-top: 20px; color: #fff; font-size: 20px;}
.contents__inner p span { border-bottom: 1px solid #fff;}
/* drawer menu */.drawer-menu { box-sizing: border-box; position: fixed; top: 0; right: 0; width: 300px; height: 100%; padding: 120px 0; background: #222; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; -webkit-transform: perspective(500px) rotateY(-90deg); transform: perspective(500px) rotateY(-90deg); opacity: 0;}
.drawer-menu li { text-align: center;}
.drawer-menu li a { display: block; height: 50px; line-height: 50px; font-size: 14px; color: #fff; -webkit-transition: all .8s; transition: all .8s;}
.drawer-menu li a:hover { color: #1a1e24; background: #fff;}
/* checkbox */.check { display: none;}
/* menu button - label tag */.menu-btn { position: fixed; display: block; top: 40px; right: 40px; display: block; width: 40px; height: 40px; font-size: 10px; text-align: center; cursor: pointer; z-index: 3;}
.bar { position: absolute; top: 0; left: 0; display: block; width: 40px; height: 1px; background: #666666; -webkit-transition: all .5s; transition: all .5s; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top;}
.bar.middle { top: 15px; opacity: 1;}
.bar.bottom { top: 30px; -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom;}
.menu-btn__text { position: absolute; bottom: -15px; left: 0; right: 0; margin: auto; color: #fff; -webkit-transition: all .5s; transition: all .5s; display: block; visibility: visible; opacity: 1;}
.menu-btn:hover .bar { background: #999;}
.menu-btn:hover .menu-btn__text { color: #999;}
.close-menu { position: fixed; top: 0; right: 300px; width: 100%; height: 100vh; background: rgba(0,0,0,0); cursor: url(http://theorthodoxworks.com/demo/images/cross.svg),auto; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-delay: 0s; transition-delay: 0s; visibility: hidden; opacity: 0;}
/* checked */.check:checked ~ .drawer-menu { -webkit-transition-delay: .3s; transition-delay: .3s; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; z-index: 2;}
.check:checked ~ .contents { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px);}
.check:checked ~ .menu-btn .menu-btn__text { visibility: hidden; opacity: 0;}
.check:checked ~ .menu-btn .bar.top { width: 56px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.check:checked ~ .menu-btn .bar.middle { opacity: 0;}
.check:checked ~ .menu-btn .bar.bottom { width: 56px; top: 40px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
.check:checked ~ .close-menu { -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: .3s; transition-delay: .3s; background: rgba(0,0,0,.5); visibility: visible; opacity: 1; z-index: 3;}
