以下是 3D餐厅菜单折叠jQuery特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Restaurant Menu Concept</title>
<meta name="description" content="A responsive folded flyer-like restaurant menu with some 3D" />
<meta name="keywords" content="css3, perspective, 3d, jquery, transform3d, responsive, template, restaurant, menu, leaflet, folded, flyer, concept" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Raleway:300,500|Arvo:700' rel='stylesheet' type='text/css'>-->
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<!--[if lte IE 8]><style>.support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a></a>
<span class="right">
</span>
</div><!--/ Codrops top bar -->
<header>
<h2>适用浏览器：FireFox、Chrome、Safari、搜狗. 不支持IE浏览器。</h2>
<div class="support-note"><!-- let's check browser support with modernizr -->
<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>
<section class="main">
<div id="rm-container" class="rm-container">
<div class="rm-wrapper">
<div class="rm-cover">
<div class="rm-front">
<div class="rm-content">
<div class="rm-logo"></div>
<h2>Gourmet Castle</h2>
<h3>Fine Dining & 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><!-- /rm-content -->
</div><!-- /rm-front -->
<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="http://herbivoracious.com/2011/11/crostini-with-young-pecorino-grilled-figs-and-arugula-mint-pesto-recipe.html" class="rm-viewdetails" data-thumb="images/1.jpg">Green Love Crostini</a></dt>
<dd>Crostini with young pecorino, grilled figs and arugula & mint pesto</dd>
<dt>Focaccia di Carciofi</dt>
<dd>Artichoke focaccia with fresh thyme</dd>
</dl>
<h4>Salads & More</h4>
<dl>
<dt>Green Delight</dt>
<dd>Watercress, frisee and avocado salad</dd>
<dt><a href="http://herbivoracious.com/2010/02/thai-tofu-salad-recipe.html" class="rm-viewdetails" data-thumb="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><!-- /rm-content -->
<div class="rm-overlay"></div>
</div><!-- /rm-back -->
</div><!-- /rm-cover -->
<div class="rm-middle">
<div class="rm-inner">
<div class="rm-content">
<h4>Main Courses</h4>
<dl>
<dt><a href="http://herbivoracious.com/2009/03/panfried-gnocchi-with-arugula-recipe.html" class="rm-viewdetails" data-thumb="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="http://herbivoracious.com/2012/09/caviar-lentil-salad-with-arugula-crispy-shallots-and-roasted-garlic-recipe.html" class="rm-viewdetails" data-thumb="images/8.jpg">Lentil Caviar & 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="http://herbivoracious.com/2012/07/king-oyster-mushroom-with-roasted-cherries-and-sage-no-that-isnt-meat-recipe-and-thought-process.html" class="rm-viewdetails" data-thumb="images/4.jpg">Luxur Oyster</a></dt>
<dd>King oyster mushroom with roasted cherries and sage</dd>
<dt><a href="http://herbivoracious.com/2012/09/rigatoni-with-roasted-cauliflower-and-spicy-tomato-sauce-recipe.html" class="rm-viewdetails" data-thumb="images/3.jpg">Rigatoni di Cavolfiore</a></dt>
<dd>Rigatoni with roasted cauliflower and spicy tomato sauce</dd>
<dt><a href="http://herbivoracious.com/2012/06/saffron-chickpea-stew-with-grilled-porcini-mushroom-recipe.html" class="rm-viewdetails" data-thumb="images/14.jpg">Saffron Chana Secret</a></dt>
<dd>Saffron chickpea stew with grilled porcini mushrooms</dd>
</dl>
</div><!-- /rm-content -->
<div class="rm-overlay"></div>
</div><!-- /rm-inner -->
</div><!-- /rm-middle -->
<div class="rm-right">
<div class="rm-front">
</div>
<div class="rm-back">
<span class="rm-close">Close</span>
<div class="rm-content">
<h4>Desserts</h4>
<dl>
<dt><a href="http://herbivoracious.com/2012/08/crepes-with-roasted-french-plums-yogurt-and-honey.html" class="rm-viewdetails" data-thumb="images/5.jpg">French Plum Crepes</a></dt>
<dd>Crepes with roasted french plums, yogurt & honey</dd>
<dt><a href="http://herbivoracious.com/2012/05/butterscotch-pudding-with-bittersweet-ganache-and-caramelize-white-chocolate-crunchies-recipe.html" class="rm-viewdetails" data-thumb="images/6.jpg">Butterscotch Pudding</a></dt>
<dd>Butterscotch pudding with bittersweet ganache and caramelize white chocolate crispies</dd>
<dt><a href="http://herbivoracious.com/2009/12/gateaux-de-crepes-recipe.html" class="rm-viewdetails" data-thumb="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="http://herbivoracious.com/2009/05/dutch-baby-with-sauteed-apples-giant-ovenbaked-pancakes-recipe.html" class="rm-viewdetails" data-thumb="images/10.jpg">Dutch Baby With Sauteed Apples</a></dt>
<dd>Dutch ginat oven-baked pancakes with sauteed apples</dd>
<dt><a href="http://herbivoracious.com/2008/08/blueberry-napol.html" class="rm-viewdetails" data-thumb="images/7.jpg">Blueberry Napoleon</a></dt>
<dd>Blueberry Napoleon with crème fraîche and raspberry powder</dd>
<dt><a href="http://herbivoracious.com/2008/09/rings-of-saturn.html" class="rm-viewdetails" data-thumb="images/2.jpg">Rings of Saturn</a></dt>
<dd>Saturn peach on challah french toast</dd>
<dt><a href="http://herbivoracious.com/2008/04/recipe-atayef.html" class="rm-viewdetails" data-thumb="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 & we'll help you find a venue and organize the event: <strong>626.511.1170</strong></p>
</div>
</div><!-- /rm-content -->
</div><!-- /rm-back -->
</div><!-- /rm-right -->
</div><!-- /rm-wrapper -->
</div><!-- /rm-container -->
</section>
</div>
<!-- jQuery if needed -->
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
$(function() {
Menu.init();
});
</script>
</body>
</html>
JS代码(menu.js):
var Menu = (function(){
var $container = $( '#rm-container' ),$cover = $container.find( 'div.rm-cover' ),$middle = $container.find( 'div.rm-middle' ),$right = $container.find( 'div.rm-right' ),$open = $cover.find('a.rm-button-open'),$close = $right.find('span.rm-close'),$details = $container.find( 'a.rm-viewdetails' ),init = function(){
initEvents();
}
,initEvents = function(){
$open.on( 'click',function( event ){
openMenu();
return false;
}
);
$close.on( 'click',function( event ){
closeMenu();
return false;
}
);
$details.on( 'click',function( event ){
$container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove();
viewDetails( $( this ) );
return false;
}
);
}
,openMenu = function(){
$container.addClass( 'rm-open' );
}
,closeMenu = function(){
$container.removeClass( 'rm-open rm-nodelay rm-in' );
}
,viewDetails = function( recipe ){
var title = recipe.text(),img = recipe.data( 'thumb' ),description = recipe.parent().next().text(),url = recipe.attr( 'href' );
var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image:url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );
$modal.appendTo( $container );
var h = $modal.outerHeight( true );
$modal.css( 'margin-top',-h / 2 );
setTimeout( function(){
$container.addClass( 'rm-in rm-nodelay' );
$modal.find( 'span.rm-close-modal' ).on( 'click',function(){
$container.removeClass( 'rm-in' );
}
);
}
,0 );
}
;
return{
init:init}
;
}
)();
CSS代码(demo.css):
/* General Demo Style */
body{font-family:'Raleway','Arial',sans-serif;font-size:13px;background:#fff url(../images/bg.jpg);-webkit-font-smoothing:antialiased;overflow-y:scroll;overflow-x:hidden;font-weight:300;}
a{color:#555;text-decoration:none;}
strong{font-weight:500;}
.container{width:100%;position:relative;}
.clr{clear:both;padding:0;height:0;margin:0;}
.main{width:95%;margin:0 auto;position:relative;}
.container > header{margin-bottom:20px;padding:20px 10px 10px 10px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{font-size:28px;line-height:28px;margin:0;position:relative;font-weight:700;text-transform:uppercase;font-family:'Arvo',Arial,sans-serif;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.4);}
.container > header h2{font-size:14px;font-weight:500;margin:0;padding:15px 30px 10px;color:#f0f0f0;width:75%;margin:0 auto;}
.container > header h2 a{color:#fff;}
.container > header h2 a:hover{color:#e6b741;}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:#fff;background:rgba(255,255,255,0.8);text-transform:uppercase;z-index:9999;position:relative;font-family:Cambria,Georgia,serif;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.codrops-top:before,.codrops-top:after{content:" ";/* 1 */
display:table;/* 2 */
}
.codrops-top:after{clear:both}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.6)}
.codrops-top span.right{float:right}
.codrops-top span.right a{float:left;display:block;}
.support-note span,.demo-note{color:#e07870;font-size:16px;display:none;font-weight:500;text-align:center;padding:5px 0;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
.no-cssanimations .support-note span.no-cssanimations,.no-csstransforms .support-note span.no-csstransforms,.no-csstransforms3d .support-note span.no-csstransforms3d,.no-csstransitions .support-note span.no-csstransitions{display:block;}
@media screen and (max-width:960px){.demo-note{display:block;}
}
分享到QQ
分享到微博
微信扫一扫
