<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/shehab-eltawel/pen/xVvPdq?depth=everything&order=popularity&page=18&q=shop&show_forks=false" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style class="cp-pen-styles">body {
background-color: #101010;
font-family: 'Roboto', sans-serif;
}
ul {
padding: 0;
margin: 0;
}
.yellow {
background: #FFEB3B;
}
.orange {
background: #FF9800;
}
.pink {
background: #FF4081;
}
.lightblue {
background: #03A9F4;
}
.purple {
background: #9C27B0;
}
.green {
background: #4CAF50;
}
.app {
margin: 25px auto 0;
width: 350px;
background: #363f45;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
color: #fff;
height: 580px;
position: relative;
overflow: hidden;
}
svg {
position: relative;
width: 18px;
height: 18px;
}
header {
background: #3F51B5;
margin: 0;
position: relative;
z-index: 3;
}
header h3 {
padding: 30px 0;
margin: 0 0 0 20px;
display: inline-block;
font-weight: 300;
}
header .icon {
margin-left: 15px;
position: relative;
top: auto;
left: auto;
background: transparent;
}
.bar {
height: 32px;
background: #303F9F;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
z-index: 3;
}
.bar svg {
padding-left: 5px;
}
h5 {
display: inline-block;
margin: 0 0 0 60px;
font-size: 16px;
font-weight: 300;
}
.panel {
border-bottom: 1px solid #515c64;
-webkit-transition: all 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) 0.1s;
transition: all 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) 0.1s;
overflow: hidden;
position: relative;
}
.panel:last-child {
border-bottom: none;
}
.panel-body {
visibility: hidden;
overflow: hidden;
max-height: 0;
margin-left: 60px;
-webkit-transition: max-height 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) 0.1s;
transition: max-height 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) 0.1s;
}
.head {
height: 75px;
line-height: 75px;
padding-left: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.icon {
position: absolute;
height: 36px;
width: 36px;
border-radius: 25px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 20px;
left: 15px;
-webkit-transition: height 0.7s cubic-bezier(0.65, 0.05, 0.36, 1);
transition: height 0.7s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.icon svg {
top: 6px;
}
li {
list-style: none;
margin-bottom: 30px;
position: relative;
font-size: 14px;
padding: 0 15px;
}
li span {
display: block;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
-webkit-transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
li:nth-child(1) span,
li:nth-child(1):after {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
li:nth-child(2) span,
li:nth-child(2):after {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
li:nth-child(3) span,
li:nth-child(3):after {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
li:nth-child(4) span,
li:nth-child(4):after {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
li:nth-child(5) span,
li:nth-child(5):after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
li:after {
content: '+';
position: absolute;
top: 0;
right: -100px;
opacity: 0;
color: #fff;
-webkit-transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.active .icon {
height: 85%;
-webkit-transition: height 0.7s cubic-bezier(0.65, 0.05, 0.36, 1);
transition: height 0.7s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.active .panel-body {
visibility: visible;
max-height: 15em;
margin-bottom: 15px;
-webkit-transition: max-height 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) 0.1s;
transition: max-height 0.7s cubic-bezier(0.65, 0.05, 0.36, 1) 0.1s;
}
.active li span {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.active li:nth-child(1) span,
.active li:nth-child(1):after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.active li:nth-child(2) span,
.active li:nth-child(2):after {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.active li:nth-child(3) span,
.active li:nth-child(3):after {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.active li:nth-child(4) span,
.active li:nth-child(4):after {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.active li:nth-child(5) span,
.active li:nth-child(5):after {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.active li:after {
right: 15px;
opacity: 1;
-webkit-transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}</style></head><body>
<div class="app">
<header>
<div class="bar">
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/>
</svg>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24">
<path d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z" fill-opacity=".3"/>
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3.53 10.95l8.46 10.54.01.01.01-.01 8.46-10.54C20.04 10.62 16.81 8 12 8c-4.81 0-8.04 2.62-8.47 2.95z"/>
</svg>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24">
<path d="M2 22h20V2z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
<span class="icon">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#fff" d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
</svg>
</span>
<h3>Shopping List</h3>
</header>
<div class="panel">
<div class="head">
<span class="icon pink">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#fff" d="M11.5,0.5C12,0.75 13,2.4 13,3.5C13,4.6 12.33,5 11.5,5C10.67,5 10,4.85 10,3.75C10,2.65 11,2 11.5,0.5M18.5,9C21,9 23,11 23,13.5C23,15.06 22.21,16.43 21,17.24V23H12L3,23V17.24C1.79,16.43 1,15.06 1,13.5C1,11 3,9 5.5,9H10V6H13V9H18.5M12,16A2.5,2.5 0 0,0 14.5,13.5H16A2.5,2.5 0 0,0 18.5,16A2.5,2.5 0 0,0 21,13.5A2.5,2.5 0 0,0 18.5,11H5.5A2.5,2.5 0 0,0 3,13.5A2.5,2.5 0 0,0 5.5,16A2.5,2.5 0 0,0 8,13.5H9.5A2.5,2.5 0 0,0 12,16Z" />
</svg>
</span>
<h5>Cakes</h5>
</div>
<div class="panel-body">
<ul>
<li><span>Grain Bread</span></li>
<li><span>Rolls</span></li>
<li><span>Cookies</span></li>
<li><span>Chocolate cake</span></li>
<li><span>Fruit cake</span></li>
</ul>
</div>
</div>
<div class="panel">
<div class="head">
<span class="icon orange">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#fff" d="M7.5,7L5.5,5H18.5L16.5,7M11,13V19H6V21H18V19H13V13L21,5V3H3V5L11,13Z" />
</svg>
</span>
<h5>Wine</h5>
</div>
<div class="panel-body">
<ul>
<li><span>Grain Bread</span></li>
<li><span>Rolls</span></li>
<li><span>Cookies</span></li>
<li><span>Chocolate cake</span></li>
<li><span>Fruit cake</span></li>
</ul>
</div>
</div>
<div class="panel">
<div class="head">
<span class="icon yellow">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#fff" d="M12,15A2,2 0 0,1 10,13C10,11.89 10.9,11 12,11A2,2 0 0,1 14,13A2,2 0 0,1 12,15M7,7C7,5.89 7.89,5 9,5A2,2 0 0,1 11,7A2,2 0 0,1 9,9C7.89,9 7,8.1 7,7M12,2C8.43,2 5.23,3.54 3,6L12,22L21,6C18.78,3.54 15.57,2 12,2Z" />
</svg>
</span>
<h5>Pizza</h5>
</div>
<div class="panel-body">
<ul>
<li><span>Grain Bread</span></li>
<li><span>Rolls</span></li>
<li><span>Cookies</span></li>
<li><span>Chocolate cake</span></li>
<li><span>Fruit cake</span></li>
</ul>
</div>
</div>
<div class="panel">
<div class="head">
<span class="icon lightblue">
<svg height="24px" width="24px" viewBox="0 0 24 24">
<path fill="#ffffff" d="M20,10C22,13 17,22 15,22C13,22 13,21 12,21C11,21 11,22 9,22C7,22 2,13 4,10C6,7 9,7 11,8V5C5.38,8.07 4.11,3.78 4.11,3.78C4.11,3.78 6.77,0.19 11,5V3H13V8C15,7 18,7 20,10Z" />
</svg>
</span>
<h5>Fruits</h5>
</div>
<div class="panel-body">
<ul>
<li><span>Grain Bread</span></li>
<li><span>Rolls</span></li>
<li><span>Cookies</span></li>
<li><span>Chocolate cake</span></li>
<li><span>Fruit cake</span></li>
</ul>
</div>
</div>
<div class="panel">
<div class="head">
<span class="icon purple">
<svg fill="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM2 21h18v-2H2v2z"/>
</svg>
</span>
<h5>Hot drinks</h5>
</div>
<div class="panel-body">
<ul>
<li><span>Grain Bread</span></li>
<li><span>Rolls</span></li>
<li><span>Cookies</span></li>
<li><span>Chocolate cake</span></li>
<li><span>Fruit cake</span></li>
</ul>
</div>
</div>
<div class="panel">
<div class="head">
<span class="icon green">
<svg fill="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
<path d="M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</span>
<h5>Dinner</h5>
</div>
<div class="panel-body">
<ul>
<li><span>Grain Bread</span></li>
<li><span>Rolls</span></li>
<li><span>Cookies</span></li>
<li><span>Chocolate cake</span></li>
<li><span>Fruit cake</span></li>
</ul>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >"use strict";
var panel = document.querySelectorAll('.panel');
var itemsSlice = Array.prototype.slice.call(panel);
var fPan = itemsSlice[0];
var panelHead = document.querySelectorAll('.head');
for (var i = 0; i < panelHead.length; i++) {if (window.CP.shouldStopExecution(2)){break;}
var panelHeight = panelHead[i].offsetHeight;
panelHead[i].addEventListener('click', function(e) {
e.preventDefault();
var parent = this.parentElement;
parent.classList.toggle('active');
var parentIndex = itemsSlice.indexOf(parent);
for (var x = 0; x < panel.length; x++) {if (window.CP.shouldStopExecution(1)){break;}
var panelBorder = parseInt(getComputedStyle(panel[x]).borderBottomWidth);
var panelMargin = -((panelHeight + panelBorder) * (x + 1)) + 'px';
panel[x] != parent ? panel[x].classList.remove('active') : null;
panel[x].classList.contains('active') != true && x < parentIndex ? fPan.style.marginTop = panelMargin : parent.classList.contains('active') != true ? fPan.style.marginTop = '0' : null;
}
window.CP.exitedLoop(1);
;
});
}
window.CP.exitedLoop(2);
;
//# sourceURL=pen.js
</script>
</body></html>
