Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created May 27, 2017 10:49
Show Gist options
  • Save CodeMyUI/b8b5f0edcaa477d39e2671d4900968aa to your computer and use it in GitHub Desktop.
Save CodeMyUI/b8b5f0edcaa477d39e2671d4900968aa to your computer and use it in GitHub Desktop.
Download ZIP
Menu App Interface
Raw
index.html
<!-- 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>
Raw
menu-app-interface.markdown
Raw
script.js
// 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();
}
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
/* 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://5daff37b9095076ff2c103b12ce1734d19bc7fd6.googledrive.com/host/0B4GtvQ-eEGw_bGZQVkt2SEdSdlU/Codepen/Menu%20App%20Interface/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
}
Raw
styles
<link href="//fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment