很棒的响应式酒店网站3D菜单打开动画

可用于饭店/酒店/餐馆的在线订单应用或菜品展示页面。在大屏幕尺寸下，点击合着的菜单，将出现菜单向两边打开的三维动画，然后出现菜品列表。高大上的作品！

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1916
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/3DRestaurantMenu/css/style.css" />
    <link href='https://fonts.googleapis.com/css?family=Raleway:300,500|Arvo:700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/3DRestaurantMenu/js/modernizr.custom.79639.js"></script>
    
</head>

<h1>3D Restaurant Menu Concept</h1>
            <h2>
					A responsive folded flyer-like restaurant menu with some 3D, featuring recipes from Michael Natkin from <a href="#">herbivoracious.com</a>
					<span class="demo-note">您当前的窗口尺寸将显示平面简化版，请尝试在全屏模式下查看3D效果。</span>
				</h2>

<div class="support-note">
                
                <span class="no-cssanimations">CSS animations are not supported in your browser</span>
                <span class="no-csstransforms">CSS transforms are not supported in your browser</span>
                <span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
                <span class="no-csstransitions">CSS transitions are not supported in your browser</span>
                <span class="note-ie">Sorry, only modern browsers.</span>
            </div>

</header>

<div class="rm-logo"></div>
                                <h2>Gourmet Castle</h2>
                                <h3>Fine Dining &amp; Gourmet Takeaway</h3>

<a href="#" class="rm-button-open">View the Menu</a>
                                <div class="rm-info">
                                    <p>
                                        <strong>Gourmet Castle Restaurant</strong>
                                        <br> 246 Wonderful Paradise Ln.
                                        <br> Pasadena, CA 91101
                                        <br>
                                        <strong>Phone</strong> 626.511.1170
                                        <br>
                                        <strong>Fax</strong> 626.992.1020</p>
                                </div>

</div>
                            
                        </div>

<div class="rm-back">
                            <div class="rm-content">
                                <h4>Appetizers</h4>
                                <dl>
                                    <dt>Bella's Artichokes</dt>
                                    <dd>Roasted artichokes with chipotle aioli and cream cheese</dd>

<dt>Bruschetta Blue Delight</dt>
                                    <dd>Blue cheese and citrus bruschetta</dd>

<dt>Pomme Dulse</dt>
                                    <dd>Baked potatoes with crisped dulse</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/1.jpg">Green Love Crostini</a></dt>
                                    <dd>Crostini with young pecorino, grilled figs and arugula &amp; mint pesto</dd>

<dt>Focaccia di Carciofi</dt>
                                    <dd>Artichoke focaccia with fresh thyme</dd>
                                </dl>

<h4>Salads &amp; More</h4>
                                <dl>
                                    <dt>Green Delight</dt>
                                    <dd>Watercress, frisee and avocado salad</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/13.jpg">Gourmet Yam Taohu</a></dt>
                                    <dd>Thai tofu salad yam taohu</dd>

<dt>Panini Deluxe</dt>
                                    <dd>Buffalo mozzarella basil panini</dd>
                                </dl>
                            </div>
                            
                            <div class="rm-overlay"></div>

</div>

</div>

<div class="rm-middle">
                        <div class="rm-inner">
                            <div class="rm-content">
                                <h4>Main Courses</h4>
                                <dl>
                                    <dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/11.jpg">Crispy Gnocchi with Arugula</a></dt>
                                    <dd>Pan-fried potato gnocchi with arugula salad</dd>

<dt>Sea Palm Spicy Peanut Curry</dt>
                                    <dd>Tender sea palm noodles, seasoned vegetables, spicy peanut curry and tempeh fenel croquettes</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/8.jpg">Lentil Caviar &amp; Arugula</a></dt>
                                    <dd>Black lentil curry with arugula salad, caramelized shallots and roasted garlic</dd>

<dt>Tamari-Maple Glazed Tofu</dt>
                                    <dd>Wasabi emulsion, sesame seeds and scallions</dd>

<dt>Maple Barbeque Tofu</dt>
                                    <dd>Grilled marinated tofu, maple barbeque sauce, tahini slaw, grilled seasonal vegetables and mashed potatoes</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/4.jpg">Luxur Oyster</a></dt>
                                    <dd>King oyster mushroom with roasted cherries and sage</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/3.jpg">Rigatoni di Cavolfiore</a></dt>
                                    <dd>Rigatoni with roasted cauliflower and spicy tomato sauce</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/14.jpg">Saffron Chana Secret</a></dt>
                                    <dd>Saffron chickpea stew with grilled porcini mushrooms</dd>
                                </dl>
                            </div>
                            
                            <div class="rm-overlay"></div>
                        </div>
                        
                    </div>

</div>

<div class="rm-back">
                            <span class="rm-close">Close</span>
                            <div class="rm-content">
                                <h4>Desserts</h4>
                                <dl>
                                    <dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/5.jpg">French Plum Crepes</a></dt>
                                    <dd>Crepes with roasted french plums, yogurt &amp; honey</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/6.jpg">Butterscotch Pudding</a></dt>
                                    <dd>Butterscotch pudding with bittersweet ganache and caramelize white chocolate crispies</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/12.jpg">Chocolate Gâteau de Crêpes</a></dt>
                                    <dd>Gâteau de crêpes with chocolate pastry cream and dulce de leche</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/10.jpg">Dutch Baby With Sauteed Apples</a></dt>
                                    <dd>Dutch ginat oven-baked pancakes with sauteed apples</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/7.jpg">Blueberry Napoleon</a></dt>
                                    <dd>Blueberry Napoleon with crème fraîche and raspberry powder</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/2.jpg">Rings of Saturn</a></dt>
                                    <dd>Saturn peach on challah french toast</dd>

<dt><a href="#" class="rm-viewdetails" data-thumb="https://tympanus.net/Tutorials/3DRestaurantMenu/images/9.jpg">Classic Atayef</a></dt>
                                    <dd>Syrian ricotta-filled dessert pancakes</dd>
                                </dl>
                                <div class="rm-order">
                                    <p><strong>Would you like us to cater your event?</strong> Call us &amp; we'll help you find a venue and organize the event: <strong>626.511.1170</strong>
                                    </p>
                                </div>
                            </div>
                            
                        </div>

</div>
                    
                </div>

</div>

</section>

</div>
    
    <script type="text/javascript" src="https://wow.techbrood.com/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/3DRestaurantMenu/js/menu.js"></script>
    <script type="text/javascript">
        $(function() {

Menu.init();

});
    </script>
</body>

</html>

可用于饭店/酒店/餐馆的在线订单应用或菜品展示页面。在大屏幕尺寸下，点击合着的菜单，将出现菜单向两边打开的三维动画，然后出现菜品列表。高大上的作品！

模板，教程

编辑器支持Emmet

快捷键

可用于饭店/酒店/餐馆的在线订单应用或菜品展示页面。 在大屏幕尺寸下，点击合着的菜单，将出现菜单向两边打开的三维动画，然后出现菜品列表。 高大上的作品！

模板，教程

很棒的响应式全屏竖向轮播滚动商品展览

全屏挂帘式网站导航菜单栏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

可用于饭店/酒店/餐馆的在线订单应用或菜品展示页面。在大屏幕尺寸下，点击合着的菜单，将出现菜单向两边打开的三维动画，然后出现菜品列表。高大上的作品！