Pure CSS - Menu App

Developer
Andy Tran
Size
5,566 Kb
Views
89,056
  1. Pure CSS - Menu App Previews
  2. Pure CSS - Menu App HTML Codes
  3. Pure CSS - Menu App CSS Codes

How do I make an pure css - menu app?

Menu ApplicationAlarm App design by http://www.materialup.com/posts/coffee-menu. What is a pure css - menu app? How do you make a pure css - menu app? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Pure CSS - Menu App Previews
IQ Test

Pure CSS - Menu App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS - Menu App</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Events-->
<input id="app-event-1" type="checkbox"/>
<input id="app-event-2" type="checkbox"/>
<input id="app-event-3" type="radio" name="app-event-3" checked="checked"/>
<input id="app-event-4" type="radio" name="app-event-3"/>
<div class="body"> <div class="app"> <div class="app-menu"> <div class="app-nav"> <label class="app-nav__icon" for="app-event-1"></label> <ul> <li><a href="#">Home</a></li> </ul> </div> <div class="app-menu__title">Menu</div> <div class="app-search"> <label class="app-search__icon" for="app-event-2"></label> <div class="app-search__field"> <input type="text" placeholder="Search..."/> </div> </div> </div> <div class="app-header"> <div class="app-header__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/coffee-cup-thin.png"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/donut-thin.png"/></div> <div class="app-tabs"> <label class="app-tabs__tab app-tabs__tab--one" for="app-event-3">Coffee</label> <label class="app-tabs__tab app-tabs__tab--two" for="app-event-4">Donuts</label> </div> </div> <div class="app-body"> <div class="app-panel app-panel--one"> <div class="app-panel__header"><span>Shots</span><span>Sml</span><span>Lrg</span></div> <div class="app-panel__content"> <div class="app-panel__column"> <ul> <li>Expresso</li> <li>Cappuccino</li> <li>Americano</li> <li>Cafe Latte</li> <li>Macchiato</li> </ul> </div> <div class="app-panel__column"> <ul> <li>2.30</li> <li>3.10</li> <li>1.90</li> <li>2.60</li> <li>2.20</li> </ul> </div> <div class="app-panel__column"> <ul> <li>2.90</li> <li>3.50</li> <li>2.20</li> <li>3.00</li> <li>2.70</li> </ul> </div> </div> </div> <div class="app-panel app-panel--two"> <div class="app-panel__header"><span>Shots</span><span>PR</span></div> <div class="app-panel__content"> <div class="app-panel__column"> <ul> <li>Regular</li> <li>Chocolate</li> <li>Glazed</li> <li>Sprinkles</li> <li>Coffee</li> </ul> </div> <div class="app-panel__column"> <ul> <li>0.80</li> <li>2.10</li> <li>1.90</li> <li>2.60</li> <li>1.20</li> </ul> </div> </div> </div> </div> </div>
</div> <script src='http://codepen.io/andytran/pen/vLmRVp.js'></script>
</body>
</html>

Pure CSS - Menu App - Script Codes CSS Codes

html,
body { width: 100%; height: 100%;
}
body { background: #FF8A8A; color: #444; font-family: 'Roboto'; font-weight: 300; padding: 80px 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.body { z-index: 1; position: relative; background: #FFF; width: 300px; height: 500px; border-radius: 6px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); margin: 0 auto; overflow: hidden;
}
.app { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%;
}
.app-menu { position: relative; 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: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 30px 30px 20px;
}
.app-menu__title { font-size: 16px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
}
.app-nav { display: inline-block;
}
.app-nav__icon { position: relative; display: block; width: 14px; height: 10px; cursor: pointer;
}
.app-nav__icon:before, .app-nav__icon:after { content: ""; position: absolute; top: 0; left: 0; display: block; background: #222; width: 100%; height: 1px; -webkit-transition: 0.3s cubic-bezier(0.28, 0.55, 0.36, 1.18); transition: 0.3s cubic-bezier(0.28, 0.55, 0.36, 1.18);
}
.app-nav__icon:after { top: auto; bottom: 0;
}
.app-nav ul { display: none;
}
.app-search__icon { z-index: 1; position: relative; display: block; width: 14px; height: 14px; cursor: pointer;
}
.app-search__icon:before, .app-search__icon:after { content: ""; position: absolute; display: block;
}
.app-search__icon:before { top: 0; left: 0; width: 12px; height: 12px; border: 1px solid #222; border-radius: 100%; box-sizing: border-box;
}
.app-search__icon:after { right: 0; bottom: 0; background: #222; width: 1px; height: 6px; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.app-search__field { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFF; border-bottom: 1px solid rgba(0, 0, 0, 0.1); visibility: hidden; opacity: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.app-search__field input { position: absolute; bottom: 0; width: 100%; height: 100%; border: 0; padding: 50px 20px 0; font-size: 14px;
}
.app-header__image { padding: 40px 0;
}
.app-header__image img { display: block; margin: 0 auto;
}
.app-header__image img:last-child { display: none;
}
.app-tabs { 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: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.app-tabs__tab { margin: 0 15px; padding: 10px 0; color: #999; font-size: 16px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.app-tabs__tab--one { color: #222; box-shadow: inset 0 -2px 0 0 #222;
}
.app-body { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; background: #EEF2F6; height: 100%;
}
.app-panel { position: absolute; top: 20px; left: calc(100% - 20px); background: #FFF; width: 240px; height: calc(100% - 20px); padding: 20px 5px 0; box-sizing: border-box; -webkit-transition: 0.6s cubic-bezier(0.28, 0.55, 0.36, 1.18); transition: 0.6s cubic-bezier(0.28, 0.55, 0.36, 1.18);
}
.app-panel--one { left: 20px;
}
.app-panel__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
.app-panel__header span { margin: 0 0 10px; padding: 0 15px; color: #999; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
}
.app-panel__header span:first-child { width: 100%;
}
.app-panel__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
.app-panel__column { padding: 0 15px; color: #222;
}
.app-panel__column:first-child { width: 100%; font-weight: 500;
}
.app-panel__column li { padding: 10px 0;
}
#app-event-1, #app-event-2, #app-event-3, #app-event-4 { display: none;
}
#app-event-1:checked ~ .body .app .app-menu .app-nav .app-nav__icon:before { -webkit-transform: translateY(-2px); transform: translateY(-2px);
}
#app-event-1:checked ~ .body .app .app-menu .app-nav .app-nav__icon:after { -webkit-transform: translateY(2px); transform: translateY(2px);
}
#app-event-2:checked ~ .body .app .app-menu .app-search .app-search__field { visibility: visible; opacity: 1;
}
#app-event-4:checked ~ .body .app .app-header .app-header__image img:first-child { display: none;
}
#app-event-4:checked ~ .body .app .app-header .app-header__image img:last-child { display: block;
}
#app-event-4:checked ~ .body .app .app-header .app-tabs .app-tabs__tab--one { color: #999; box-shadow: none;
}
#app-event-4:checked ~ .body .app .app-header .app-tabs .app-tabs__tab--two { color: #222; box-shadow: inset 0 -2px 0 0 #222;
}
#app-event-4:checked ~ .body .app .app-body .app-panel--one { left: calc(-100% + 80px);
}
#app-event-4:checked ~ .body .app .app-body .app-panel--two { left: 40px;
}
Pure CSS - Menu App - Script Codes
Pure CSS - Menu App - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 5,566 Kb
Views 89,056
Do you need developer help for Pure CSS - Menu App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Tran (andytran) Script Codes
Name
Interactive Location Modal
Code Module - About FAB
Flat Navigation
Draggable Chatbox
Material Playing Cards
Flat Payment Modal
The Team - Grid
Tabs Modal
Flat To-Do-List
Article News Card
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!