[해피CGI][cgimall] Alpine.js ( Restaurant Menu Accordion )

Alpine.js를 사용한 메뉴판 입니다.
각 항목을 누르면 숨겨진 메뉴가 출력되는 형식입니다.
자세한 내용은 데모를 확인해 주시기 바랍니다.

 

 

 

HTML

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script> <scipt defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <div class='wrapper'>   <div class='logo'></div>   <ul x-data='accordion' class='accordion'>     <template x-for='(items,category) in menu'>       <li>         <button @click='toggle(category)'>           <span x-text='category'></span>         </button>         <div x-show='activeItem === category && open' x-collapse.duration.800ms >           <ul class='accordion-list' >             <template x-for='item in items'>               <li>                 <span x-text='item.name'></span>                 <span x-text='item.price'></span>               </li>             </template>           </ul>         </div>       </li>     </template>   </ul> </div>

 

CSS

* {   margin: 0;   padding: 0;   box-sizing: border-box; }    body {   height: 100vh;   display: grid;   place-items: center;   font: 1rem helvetica,sans-serif;   background-image: url('https://images.unsplash.com/photo-1616410731303-6affae095a0a?q=80&w=2501&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');   background-size: cover;   background-repeat: no-repeat;   background-position: center;     & h1 {     font: 600 2.5rem helvetica,san-serif;     text-align: center;     margin-bottom: 1rem;   }     & ul { list-style-type: none; }     & .logo {     width: 40vmin;     height: 30vmin;     background: url('https://gist.githubusercontent.com/mondenoir/d6da82e3f052e43222a2a82848b7dd26/raw/fcca3c50abb242d7cd57f598c84a91c70a5e1b74/logo.svg') no-repeat center;     background-size: cover;     margin: 0 auto;     mix-blend-mode: multiply;   } }   .accordion {   width: min(300px,90vw);     & > li:first-of-type  { margin-top: 0; }   & > li                { margin-top: -2px; }     & button {     width: 100%;     background-color: transparent;     font-size: 0.9rem;     line-height: 3.5;     text-transform: uppercase;     letter-spacing: 3px;     border: none;     border-top: 2px solid #000;     border-bottom: 2px solid #000;     outline: none;     cursor: pointer;   }     & .accordion-list {     display: grid;     grid-template-columns: repeat(2,1fr);     font-size: 0.7rem;     gap: 0.5rem 1.5rem;     padding: 1rem 0;       & li {       display: flex;       justify-content: space-between;     }   } }

JS

function registerComponent() {   Alpine.data('accordion',function() {     return {       activeItem: 'appetizers',       open: true,       menu: {         appetizers: [           { name: 'Caesar Salad', price: 8 },           { name: 'Spring Rolls', price: 6 },           { name: 'Stuffed Mushrooms', price: 9 },           { name: 'Zuchini Fritters', price: 12 },           { name: 'Coconut Shrimps', price: 15 },           { name: 'Clam Bruschetta', price: 7 },           { name: 'Crab Cake', price: 10 },           { name: 'Clam Chowder', price: 6 },           { name: 'Beef Stew', price: 6 },         ],         main: [           { name: 'Cedar-Plank Salmon', price: 18 },           { name: 'Lobster Gnocchi', price: 25 },           { name: 'Chicken Lasagna', price: 15 },           { name: 'Grilled Spareribs', price: 30 },           { name: 'Scallops Risotto', price: 20 },           { name: 'New York Steak', price: 18 },           { name: 'Jambalaya', price: 15 },           { name: 'Seafood Pasta', price: 18 },           { name: 'Beef Stroganoff', price: 18 },           { name: 'Thai Green Curry', price: 20 },         ],         desserts: [           { name: 'Caramel Flan', price: 5 },           { name: 'Old English Trifle', price: 8 },           { name: 'Budapest Roll', price: 6 },           { name: 'Nanimo Bar', price: 5 },           { name: 'Lemon Drizzle Cake', price: 4 },         ],         drinks: [           { name: 'Martini', price: 7 },           { name: 'Manhattan', price: 8 },           { name: 'Cosmopolitan', price: 8 },           { name: 'Whiskey Sour', price: 6 },           { name: 'Mojito', price: 6 },           { name: 'Margaria', price: 7 },           { name: 'Old Fashion', price: 6 },           { name: 'Bloody Mary', price: 9 },           { name: 'White Russian', price: 7 },           { name: 'Coffee', price: 3 },           { name: 'Soda', price: 2 },         ],       },       toggle(item) {         this.activeItem = (this.activeItem === item ? null : item);         this.open = true;       },     }   }); }   document.addEventListener('alpine:init',registerComponent,false);