<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/JaguarDev/pen/BooXJw?depth=everything&order=popularity&page=44&q=box&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Ubuntu+Condensed'>
<style class="cp-pen-styles">/* I'm using Ubuntu Condensed font
/* instead of the original shot font,
/* I think Ubuntu font is a better fit,
/* What do you think?
/* **************************** */
* {box-sizing:border-box}
html,body {height:100%}
body {
background: #d3e2d4;
background: linear-gradient(135deg, #d3e2d4,#819083) top left fixed;
font: 14px 'Ubuntu Condensed', sans-serif;
line-height:1;
min-height:580px;
-webkit-font-smoothing: antialiased;
}
.paper {
width:280px;
height:480px;
border-radius:4px;
box-shadow: 0 5px 25px rgba(0,0,0,.15);
position:absolute;
top:50px;
right:50%
}
.box {width:100%;height:100%;overflow:hidden;border-radius:4px}
.bar {
height:80px;
background: #f7ffce;
background:linear-gradient(135deg,#f7ffce,#e2e4b8);
border-radius:4px 4px 0 0;
color:#af9a50;
padding:20px;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
position:relative;
z-index:5
}
.menu {float:left;width:12px}
.menu span {
height:1px;
background:#af9a50;
display:block;
margin-bottom:3px;
}
.bar p {
float:left;
margin-left:10px;
margin-top:-3px;
}
.bar .action {
float:right;
margin-top:-13px
}
.bar>span {
float:left;
width:100%;
margin-top:22px
}
.item {
height:100px;
padding:20px;
box-shadow: 0 4px 5px rgba(0,0,0,.3);
position:relative;
font-size:21px;
-webkit-transition:all 200ms ease;
transition:all 200ms ease;
}
.item>.box>p {
line-height:60px;
-webkit-transition:all 200ms ease;
transition:all 200ms ease;
}
.detail {
font-size:17px;
-webkit-transition:all 200ms ease;
transition:all 200ms ease;
opacity:0
}
.detail div {line-height:35px}
.detail .counter,.detail p {float:left;width:50%}
.detail>div {float:left;width:100%}
.detail .counter {text-align:right}
.detail .counter div {
width:29px;
height:20px;
float:right;
text-align:center;
line-height:20px;
margin-top:7px;
cursor: pointer
}
.detail .counter .plus {
margin-left:1px;
border-radius:0 30px 30px 0;
}
.detail .counter .minus {
margin-right:1px;
margin-left:11px;
border-radius:30px 0 0 30px;
}
.item.coffee {
background: #ffe26f;
background:linear-gradient(135deg,#ffe26f,#e8c962);
z-index:4;
color:#e07556;
}
.item.coffee .detail .counter div {background: #FFF2BE}
.item.sweet {
background: #f3825f;
background:linear-gradient(135deg,#f3825f,#f3825f);
z-index:3;
color:#9c3c53;
}
.item.sweet .detail .counter div {background: #FFC5B2}
.item.food {
background: #a7425c;
background:linear-gradient(135deg,#a7425c,#993950);
z-index:2;
color:#402344;
}
.item.food .detail .counter div {background: #ECA9BA}
.item.drink {
background: #563761;
background:linear-gradient(135deg,#563761,#502f55);
z-index:1;
color:#1c1730;
border-radius:0 0 4px 4px
}
.item.drink .detail .counter div {background: #8A7193}
.item-icon { background:url(https://image.ibb.co/b6zDSF/items_icons_t.png) no-repeat top left;
height:60px;
width:65px;
float:left;
margin-right:10px;
-webkit-transition:all 200ms ease;
transition:all 200ms ease;
-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);
}
.item-icon.coffee {background-position:0 0}
.item-icon.sweet {background-position:-70px 0}
.item-icon.food {background-position:-137px 0}
.item-icon.drink {background-position:-208px 0}
/** Active **/
.paper.item-active .item {height:60px;padding:0 20px}
.paper.item-active .item.active {height:260px;padding:20px;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);}
.item.active .item-icon {
-webkit-transform:scale(1.5) translateZ(0);
-ms-transform:scale(1.5) translateZ(0);
-moz-transform:scale(1.5) translateZ(0);
transform:scale(1.5) translateZ(0);
margin:0 auto;
float:none;
}
.item.active>.box>p {
font-size:31px;
text-align:center
}
.item.active .detail {opacity:1}
/** Extra For Previewing **/
.item .number,.paper.preview-1 .bar .action {
display:none
}
.paper.preview-1 {
margin-right:20px;
}
.paper.preview-2 {
margin-right:-300px;
}
/** making some things unselectable **/
.item>.box>p,.counter {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
.item>.box>p {
cursor: default
}
</style></head><body>
<!-- Menu App Interface
<!-- Based on a Dribbble shot
<!-- that caught my eye
<!-- http://drbl.in/pWyx
<!-- ---------------------------------- -->
<div class="paper preview-1">
<div class="box">
<div class="bar">
<div class="menu">
<span></span>
<span></span>
<span></span>
</div>
<p>Menu</p>
<span><span class="items-total">0</span> Items</span>
<div class="action">Done</div>
</div>
<div class="item coffee">
<div class="box">
<div class="item-icon coffee"></div>
<p>Coffee</p>
<div class="detail">
<div>
<p>Espresso</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Cappuccino</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Lato</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
</div>
</div>
</div>
<div class="item sweet">
<div class="box">
<div class="item-icon sweet"></div>
<p>Sweet</p>
<div class="detail">
<div>
<p>Baklava</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Kunafeh Nabulsia</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Basbousa</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
</div>
</div>
</div>
<div class="item food">
<div class="box">
<div class="item-icon food"></div>
<p>Food</p>
<div class="detail">
<div>
<p>Shawarma</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Foul Mudammes</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Falafel</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
</div>
</div>
</div>
<div class="item drink">
<div class="box">
<div class="item-icon drink"></div>
<p>Drink</p>
<div class="detail">
<div>
<p>Tamer Hindi</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Jalab</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="paper preview-2 item-active">
<div class="box">
<div class="bar">
<div class="menu">
<span></span>
<span></span>
<span></span>
</div>
<p>Menu</p>
<span><span class="items-total">2</span> Items</span>
<div class="action">Done</div>
</div>
<div class="item coffee active">
<div class="box">
<div class="item-icon coffee"></div>
<p>Coffee</p>
<div class="detail">
<div>
<p>Espresso</p>
<div class="counter">
<span class="number" style="display:inline">2</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Cappuccino</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Lato</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
</div>
</div>
</div>
<div class="item sweet">
<div class="box">
<div class="item-icon sweet"></div>
<p>Sweet</p>
<div class="detail">
<div>
<p>Baklava</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Kunafeh Nabulsia</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Basbousa</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
</div>
</div>
</div>
<div class="item food">
<div class="box">
<div class="item-icon food"></div>
<p>Food</p>
<div class="detail">
<div>
<p>Shawarma</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Foul Mudammes</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Falafel</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
</div>
</div>
</div>
<div class="item drink">
<div class="box">
<div class="item-icon drink"></div>
<p>Drink</p>
<div class="detail">
<div>
<p>Tamer Hindi</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
<div>
<p>Jalab</p>
<div class="counter">
<span class="number">0</span>
<div class="plus">+</div>
<div class="minus">-</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >// Items Magic [Preview-1]
$('.paper.preview-1 .item').click(function () {
$('.paper.preview-1 .item').not(this).removeClass('active');
$(this).toggleClass('active');
if ($('.paper.preview-1 .item').hasClass('active')) {
$('.paper.preview-1').addClass('item-active');
} else {
$('.paper.preview-1').removeClass('item-active')
};
});
// Preventing Closing when Click inside counter
$('.minus,.plus').click(function (a) {
a.stopPropagation();
});
// Adding Counter [Preview-1]
$('.paper.preview-1 .plus').click(function () {
$(this).parent().find('.number').html(function (y, val) {
return val * 1 + 1
});
});
$('.paper.preview-1 .minus').click(function () {
var increased = parseInt($(this).parent().find('.number').text());
if (isNaN(increased) || increased > 0) {
$(this).parent().find('.number').html(function (t, val) {
return val * 1 - 1
});
} else {
return false;
}
});
$('.paper.preview-1 .plus, .paper.preview-1 .minus').click(function () {
var increased = parseInt($(this).parent().find('.number').text());
var itemsTotal = 0;
$('.paper.preview-1 .number').each(function () {
itemsTotal += ($(this).html() * 1);
});
$('.paper.preview-1 .items-total').html(itemsTotal);
var itemsTotalAll = parseInt($('.paper.preview-1 .items-total').text());
if (isNaN(itemsTotalAll) || itemsTotalAll <= 0) {
$('.paper.preview-1 .action').hide();
} else {
$('.paper.preview-1 .action').show();
}
if (isNaN(increased) || increased <= 0) {
$(this).parent().find('.number').hide();
} else {
$(this).parent().find('.number').show();
}
});
// JavaScript code is done
// the rest are just repeating
// for Paper Preview-2 functionality
// Items Magic [Preview-2]
$('.paper.preview-2 .item').click(function () {
$('.paper.preview-2 .item').not(this).removeClass('active');
$(this).toggleClass('active');
if ($('.paper.preview-2 .item').hasClass('active')) {
$('.paper.preview-2').addClass('item-active');
} else {
$('.paper.preview-2').removeClass('item-active')
};
});
// Adding Counter [Preview-2]
$('.paper.preview-2 .plus').click(function () {
$(this).parent().find('.number').html(function (p, val) {
return val * 1 + 1
});
});
$('.paper.preview-2 .minus').click(function () {
var increased = parseInt($(this).parent().find('.number').text());
if (isNaN(increased) || increased > 0) {
$(this).parent().find('.number').html(function (k, val) {
return val * 1 - 1
});
} else {
}
});
$('.paper.preview-2 .plus, .paper.preview-2 .minus').click(function () {
var increased = parseInt($(this).parent().find('.number').text());
var itemsTotal = 0;
$('.paper.preview-2 .number').each(function () {
itemsTotal += ($(this).html() * 1);
});
$('.paper.preview-2 .items-total').html(itemsTotal);
var itemsTotalAll = parseInt($('.paper.preview-2 .items-total').text());
if (isNaN(itemsTotalAll) || itemsTotalAll <= 0) {
$('.paper.preview-2 .action').hide();
} else {
$('.paper.preview-2 .action').show();
}
if (isNaN(increased) || increased <= 0) {
$(this).parent().find('.number').hide();
} else {
$(this).parent().find('.number').show();
}
});
//# sourceURL=pen.js
</script>
</body></html>
