jquery 内容切换动画_带有jQuery的动画内容菜单

最新推荐文章于 2023-02-16 15:45:14 发布

culiao9310

最新推荐文章于 2023-02-16 15:45:14 发布

阅读量255

点赞数

文章标签：列表 css html js css3 ViewUI

原文链接：https://tympanus.net/codrops/2011/03/09/animated-content-menu/

版权

jquery 内容切换动画

View demo 查看演示 Download Source 下载源

Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.

今天，我们将使用jQuery为餐厅主题创建漂亮的动画内容菜单。菜单项将被设置为动画，并且在单击时将显示一个包含更多信息的内容区域。而且，背景图像将根据单击的菜单项而改变。

The main idea is to have a restaurant menu with the different menu categories displayed. Each content are will have some foods/drinks listed. Once a content box is shown, the menu items are going to disappear. If we click on the close button to close the box, the menu items will be shown again.

主要思想是拥有显示不同菜单类别的餐厅菜单。每个内容都会列出一些食品/饮料。显示内容框后，菜单项将消失。如果单击关闭按钮以关闭该框，则菜单项将再次显示。

So, let’s get started.

因此，让我们开始吧。

标记 (The Markup)

The HTML structure is going to contain some elements for the background image, the grid overlay, the loading icon and the main menu. The Markup for the background is going to look like this:

HTML结构将包含一些用于背景图像，网格覆盖，加载图标和主菜单的元素。背景的标记如下所示：


<div id="ac_background" class="ac_background">
	<img class="ac_bgimage" src="images/Default.jpg" alt="Background"/>
	<div class="ac_overlay"></div>
	<div class="ac_loading"></div>
</div>

As a default background image when the page loads, we will have the image Default.jpg. Whenever we click on a menu item, we are going to change that image by adding another one and making the current one disappear.

作为页面加载时的默认背景图像，我们将使用图像Default.jpg。每当我们单击菜单项时，我们都将通过添加另一幅图像并使当前图像消失来更改该图像。

The menu content will be wrapped by a div with the class “ac_content”. There will be a title and an unordered list for the items wrapped by a div with the class “ac_menu”:

菜单内容将由具有“ ac_content”类的div包装。 div包装的类“ ac_menu”将有一个标题和一个无序列表：


<div id="ac_content" class="ac_content">
	<h1><span>Cafe + Bar</span>Dhalia</h1>
	<div class="ac_menu">
		<ul>
			<li>
				<a href="images/Appetizers.jpg">Appetizers</a>
				<div class="ac_subitem">
					<span class="ac_close"></span>
					<h2>Appetizers</h2>
					<ul>
						<li>
							A wonderful serenity has taken possession 
							of my entire soul, like these sweet mornings 
							of spring which I enjoy with my whole heart.
						</li>
						<li>Lobster Bisque</li>
						<li>Smoked Salmon Terrine</li>
						<li>Tuna Ceviche</li>
						<li>Wild Mushroom Flan</li>
						<li>Almond Bruschetta</li>
						<li>Green Chilli Canapee</li>
						<li>Artichoke Rucula Salad</li>
					</ul>
				</div><!-- ac_subitem-->
			</li>
			...
		</ul>
	</div><!-- ac_menu -->
</div><!-- ac_content -->

For each menu item, we will have a div “ac_subitem” which will contain the submenu content box. Inside of that box we will place another list (but it can be any other kind of content).

对于每个菜单项，我们将有一个div“ ac_subitem”，其中将包含子菜单内容框。在该框内，我们将放置另一个列表(但可以是任何其他种类的内容)。

The link element in the main menu will have a href attribute pointing to the image that we will make appear in the background then.

主菜单中的link元素将具有href属性，该属性指向我们随后将在背景中显示的图像。

Let’s take a look at the style.

让我们看一下样式。

CSS (The CSS)

In the beginning of our CSS we will import a reset.css:

在CSS的开头，我们将导入reset.css：


@import url('reset.css');

We will make the body black since we want to fade out the background images and make them appear darker while we do that:

因为我们要淡出背景图像并使它们显得更暗，所以我们将使主体变黑：


body{
	background:#000;
	color:#fff;
	font-family: 'PT Sans Narrow', Arial, sans-serif;
	text-transform:uppercase;
}

The links are going to be white:

链接将变为白色：


a{
	color:#fff;
	text-decoration:none;
}

The background image is going to be fixed and we don’t want to show it in the beginning – we want to take care of the appearance using JavaScript. The positioning and the size of the image is also going to be done dynamically, since we want to place it regarding to the size of the user’s window:

背景图像将被修复，我们不想一开始就显示它–我们想使用JavaScript来照顾外观。图像的位置和大小也将动态地进行，因为我们要根据用户窗口的大小来放置它：


img.ac_bgimage{
	position:fixed;
	left:0px;
	top:0px;
	opacity:0.8;
	display:none;
}

The overlay is going to be placed on top of the image. It’s a repeated pattern that will give the image a neat look:

叠加层将放置在图像顶部。这是一种重复的模式，可以使图像看起来整洁：


.ac_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/pattern.png) repeat top left;
}

We will place the loading icon in the top right corner of the page and it will appear in the beginning while we load the images:

我们将加载图标放置在页面的右上角，并在加载图像时显示在开头：


.ac_loading{
	position:fixed;
	top:10px;
	right:10px;
	background:#000 url(../images/loader.gif) no-repeat center center;
	width:50px;
	height:50px;
	border-radius:10px 10px 10px 10px;
	z-index:999;
	opacity:0.7;
	display:none;
}

The main content div will also be fixed and placed in the middle of the screen. We set the top value to 50% and subtract half of its height from that position by setting the margin to -65 pixel. Like that we place it exactly in the middle of the webpage:

主要内容div也将固定并放置在屏幕中间。我们将上限值设置为50％，并通过将页边距设置为-65像素从该位置减去其一半高度。这样，我们将其准确地放置在网页的中间：


.ac_content{
	position:fixed;
	height:90px;
	width:100%;
	top:50%;
	left:0px;
	margin-top:-65px;
}

The heading to the left will have a black semi-transparent background and we will style the h1 and the span differently. We will also add a 1 pixel margin to the right in order to separate it a bit from the menu wrapper:

左侧的标题将具有黑色的半透明背景，我们将为h1和跨度设置不同的样式。我们还将在右边添加一个1像素的边距，以将其与菜单包装分开一点：


.ac_content h1{
	background:transparent url(../images/bg_menu.png) repeat top left;
	display:block;
	float:left;
	width:90px;
	height:50px;
	padding:20px;
	font-size:36px;
	font-weight:bold;
	line-height:20px;
	margin-right:1px;
}
.ac_content h1 span{
	display:block;
	font-weight:normal;
	font-size:14px;
}

The main menu wrapper will have the same background like the heading and we will give it an initial width of 0 pixel. In the JavaScript we will then animate the width when we load the page to fit the width of the window:

主菜单包装器将具有与标题相同的背景，并且我们将其初始宽度设置为0像素。在JavaScript中，当我们加载页面以适合窗口宽度时，我们将对其宽度进行动画处理：


.ac_menu{
	background:transparent url(../images/bg_menu.png) repeat top left;
	float:left;
	position:relative;
	height:90px;
	width:0px; 
}

The unordered list which will contain the menu items will float right:

包含菜单项的无序列表将向右浮动：


.ac_menu > ul{
	float:right;
}

The list items will have a specified height and the overflow will be set to hidden since we want to animate the link elements to appear from the bottom. If we wouldn’t set the overflow to hidden, we would be able to see the link elements under the menu.

列表项将具有指定的高度，并且由于我们希望对链接元素进行动画处理以使其从底部显示，因此溢出项将设置为隐藏。如果我们不将溢出设置为隐藏，则可以在菜单下看到链接元素。


.ac_menu > ul > li{
	float:left;
	position:relative;
	height:90px;
	overflow:hidden;
}

The link elements will initially be hidden by setting the margin top to 60 pixel and the opacity to 0. We will animate that margin to 0 pixel and make them opaque, in order for the items to appear, each one with a little delay, creating an interesting effect.

首先将边距顶部设置为60像素，将不透明度设置为0，以隐藏链接元素。我们将边距设置为0像素，并将它们设置为不透明，以使各项显示，每个项都稍有延迟，以创建一个有趣的效果。


.ac_menu > ul > li a{
	margin-top:60px;
	opacity:0;
	display:block;
	height:90px;
	padding:0px 10px;
	text-align:center;
	line-height:90px;
	outline:none;
	font-size:18px;
	font-weight:bold;
	text-shadow:1px 1px 1px #000;
}

The subitem boxes will have a width of 400 pixel and an initial height of 0 pixel. We will animate that height and the top margin in order for each box to appear from the middle:

子项目框的宽度为400像素，初始高度为0像素。我们将对该高度和顶部边缘进行动画处理，以使每个框从中间出现：


.ac_subitem{
	width:400px;
	height:0px; /* animate to 400px */
	top:50%;
	right:0px;
	margin-top:0px; /* animate to -200px */
	position:fixed;
	z-index:99;
	overflow:hidden;
	background:transparent url(../images/bg_menu.png) repeat top left;
}

Let’s give some styling to the content of the subitems:

让我们对子项的内容进行一些样式设置：


.ac_subitem h2{
	font-size:22px;
	font-weight:bold;
	color:#fff;
	padding: 40px 0px 0px 40px;
	text-shadow:0px 0px 1px #000;
}
.ac_subitem ul{
	padding:0px 40px;
}
.ac_subitem ul li{
	margin:10px 0px;
}
.ac_subitem ul li:first-child{
	font-size:14px;
	text-transform:none;
	border-bottom:1px dotted #333;
	padding-bottom:15px;
	margin-bottom:15px;
}

And let’s place the little closing cross at the top right corner:

让我们在右上角放置一个小十字：


span.ac_close{
	float:right;
	margin:10px;
	width:11px;
	height:12px;
	cursor:pointer;
	background:transparent url(../images/close.png) no-repeat top left;
	opacity:0.4;
}
span.ac_close:hover{
	opacity:1.0;
}

And that’s all the style. Let’s add the magic!

这就是所有样式。让我们添加魔法！

JavaScript (The JavaScript)

For the effects will will be using some easing, so we will need to include the jQuery Easing Plugin after including the jQuery script.

因为效果将使用一些缓动，所以我们需要在包含jQuery脚本之后包含jQuery Easing Plugin 。

Let’s first cache some elements:

让我们首先缓存一些元素：


var $ac_background	= $('#ac_background'),
$ac_bgimage		= $ac_background.find('.ac_bgimage'),
$ac_loading		= $ac_background.find('.ac_loading'),

$ac_content		= $('#ac_content'),
$title			= $ac_content.find('h1'),
$menu			= $ac_content.find('.ac_menu'),
$mainNav		= $menu.find('ul:first'),
$menuItems		= $mainNav.children('li'),
totalItems		= $menuItems.length,
$ItemImages		= new Array();

We want to preload all the image, so let’s add all the image sources that we have in the href attributes of the link elements in the menu items, and also the one of the current image:

我们要预加载所有图像，因此让我们添加菜单项中link元素的href属性中拥有的所有图像源，以及当前图像之一：


$menuItems.each(function(i) {
	$ItemImages.push($(this).children('a:first').attr('href'));
});
$ItemImages.push($ac_bgimage.attr('src'));

Then, let’s define our main function:

然后，让我们定义我们的主要功能：


var Menu 			= (function(){
	var init				= function() {
		loadPage();
		initWindowEvent();
	},
	loadPage			= function() {
		/*
			1- loads the bg image and all the item images;
			2- shows the bg image;
			3- shows / slides out the menu;
			4- shows the menu items;
			5- initializes the menu items events
		 */
		$ac_loading.show(); //show loading status image
		$.when(loadImages()).done(function(){
			$.when(showBGImage()).done(function(){
				//hide the loading status image
				$ac_loading.hide();
				$.when(slideOutMenu()).done(function(){
						$.when(toggleMenuItems('up')).done(function(){
						initEventsSubMenu();
					});
				});
			});
		});
	},
	showBGImage			= function() {
		return $.Deferred(
		function(dfd) {
			//adjusts the dimensions of the image to fit the screen
			adjustImageSize($ac_bgimage);
			$ac_bgimage.fadeIn(1000, dfd.resolve);
		}
	).promise();
	},
	slideOutMenu		= function() {
		/* calculate new width for the menu */
		var new_w	= $(window).width() - $title.outerWidth(true);
		return $.Deferred(
		function(dfd) {
			//slides out the menu
			$menu.stop()
			.animate({
				width	: new_w + 'px'
			}, 700, dfd.resolve);
		}
	).promise();
	},
		/* shows / hides the menu items */
		toggleMenuItems		= function(dir) {
		return $.Deferred(
		function(dfd) {
			/*
			slides in / out the items. 
			different animation time for each one.
			*/
			$menuItems.each(function(i) {
						var $el_title	= $(this).children('a:first'),
							marginTop, opacity, easing;
						if(dir === 'up'){
							marginTop	= '0px';
							opacity		= 1;
							easing		= 'easeOutBack';
						}
						else if(dir === 'down'){
							marginTop	= '60px';
							opacity		= 0;
							easing		= 'easeInBack';
		}
				$el_title.stop()
				.animate({
									marginTop	: marginTop,
									opacity		: opacity
								 }, 200 + i * 200 , easing, function(){
					if(i === totalItems - 1)
						dfd.resolve();
				});
			});
		}
	).promise();
	},
	initEventsSubMenu	= function() {
		$menuItems.each(function(i) {
			var $item		= $(this), // the <li>
			$el_title	= $item.children('a:first'),
			el_image	= $el_title.attr('href'),
			$sub_menu	= $item.find('.ac_subitem'),
			$ac_close	= $sub_menu.find('.ac_close');
			
			/* user clicks on a menu item */
			$el_title.bind('click.Menu', function(e) {
					$.when(toggleMenuItems('down')).done(function(){
					openSubMenu($item, $sub_menu, el_image);
				});
				return false;
			});
			/* closes the submenu */
			$ac_close.bind('click.Menu', function(e) {
				closeSubMenu($sub_menu);
				return false;
			});
		});
	},
	openSubMenu			= function($item, $sub_menu, el_image) {
		$sub_menu.stop()
		.animate({
			height		: '400px',
			marginTop	: '-200px'
		}, 400, function() {
			//the bg image changes
			showItemImage(el_image);
		});
	},
	/* changes the background image */
	showItemImage		= function(source) {
		//if its the current one return
		if($ac_bgimage.attr('src') === source)
			return false;
				
		var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
		$itemImage.insertBefore($ac_bgimage);
		adjustImageSize($itemImage);
		$ac_bgimage.fadeOut(1500, function() {
			$(this).remove();
			$ac_bgimage = $itemImage;
		});
		$itemImage.fadeIn(1500);
	},
	closeSubMenu		= function($sub_menu) {
		$sub_menu.stop()
		.animate({
			height		: '0px',
			marginTop	: '0px'
		}, 400, function() {
			//show items
						toggleMenuItems('up');
		});
	},
	/*
	on window resize, ajust the bg image dimentions,
	and recalculate the menus width
	*/
	initWindowEvent		= function() {
		/* on window resize set the width for the menu */
		$(window).bind('resize.Menu' , function(e) {
			adjustImageSize($ac_bgimage);
			/* calculate new width for the menu */
			var new_w	= $(window).width() - $title.outerWidth(true);
			$menu.css('width', new_w + 'px');
		});
	},
	/* makes an image "fullscreen" and centered */
	adjustImageSize		= function($img) {
		var w_w	= $(window).width(),
		w_h	= $(window).height(),
		r_w	= w_h / w_w,
		i_w	= $img.width(),
		i_h	= $img.height(),
		r_i	= i_h / i_w,
		new_w,new_h,
		new_left,new_top;
			
		if(r_w > r_i){
			new_h	= w_h;
			new_w	= w_h / r_i;
		}
		else{
			new_h	= w_w * r_i;
			new_w	= w_w;
		}
			
		$img.css({
			width	: new_w + 'px',
			height	: new_h + 'px',
			left	: (w_w - new_w) / 2 + 'px',
			top		: (w_h - new_h) / 2 + 'px'
		});
	},
	/* preloads a set of images */
	loadImages			= function() {
		return $.Deferred(
		function(dfd) {
			var total_images 	= $ItemImages.length,
			loaded			= 0;
			for(var i = 0; i < total_images; ++i){
				$('<img/>').load(function() {
					++loaded;
					if(loaded === total_images)
						dfd.resolve();
				}).attr('src' , $ItemImages[i]);
			}
		}
	).promise();
	};
		
	return {
		init : init
	};
})();

/*
call the init method of Menu
 */
Menu.init();

And that’s all! I hope you enjoyed the tutorial and find it useful!

就这样！我希望您喜欢本教程并发现它有用！