In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat effect.
在今天的教程中，我们将使用jQuery创建一个扩展的图像菜单。 想法是让一些带有黑白图像切片的列在单击时使内容区域滑出。 我们还将滑入图像的彩色版本，以创建整洁的效果。
The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream.
摄影是由才华横溢的罗伯特贝吉尔( Robert Bejil)拍摄的，在他的Flickr照片流中可以看到他的绝妙照片。
So, let’s get started!
所以，让我们开始吧！
标记 (The Markup)
The HTML structure consists of a main container and an unordered list where each item is one of the columns. We will give the main container the class “ei_menu” and also the id “ei_menu”. The list items are going to contain a link element with two spans inside and a div element with the content. The two spans are for the background image shown at the beginning and the colored version of the image for when we click on the item. Since we are using just one image for each we will have to define the background position. We will take care of that with the classes “pos1” to “pos5” that we will give to the parent link element.
HTML结构由一个主容器和一个无序列表组成，其中每个项目都是列之一。 我们将为主容器指定类“ ei_menu”，并将其标识为“ ei_menu”。 列表项将包含一个内部有两个span的link元素和一个具有内容的div元素。 两个跨度分别用于开头显示的背景图像和单击该项目时图像的彩色版本。 由于我们仅使用一张图像，因此我们必须定义背景位置。 我们将使用提供给父链接元素的“ pos1”至“ pos5”类来解决这一问题。
<div id="ei_menu" class="ei_menu">
<ul>
<li>
<a href="#" class="pos1">
<span class="ei_preview"></span>
<span class="ei_image"></span>
</a>
<div class="ei_descr">
<h2>Gary</h2>
<h3>Vocals</h3>
<p>Some text here...</p>
</div>
</li>
<li> ... </li>
</ul>
</div>
Let’s take a look at the style.
让我们看一下样式。
CSS (The CSS)
We are going to stretch the container for the list over the page and hide the overflow. Since we will adjust the size of the ul, we don’t want anything sticking out because of the slide out effect, to affect our container:
我们将在页面上拉伸列表的容器，并隐藏溢出。 由于我们将调整ul的大小，因此我们不希望由于滑出效果而导致任何突出的东西影响我们的容器：
.ei_menu{
background:#111;
width:100%;
overflow:hidden;
}
We will give enough width to the ul so that the li elements which will be floating, don’t wrap to the next “line” when they expand:
我们将为ul提供足够的宽度，以使将浮动的li元素在展开时不会环绕到下一个“行”：
.ei_menu ul{
height:350px;
margin-left:50px;
position:relative;
display:block;
width:1300px;
}
The overflow of the li elements is going to be hidden as well because our content inside is actually much bigger. And we only want to show that content, once we expand the while thing by increasing the width of the li:
li元素的溢出也将被隐藏，因为我们里面的内容实际上要大得多。 而且，我们只想显示该内容，一旦我们通过增加li的宽度来扩展while事情：
.ei_menu ul li{
float:left;
width:75px;
height:350px;
position:relative;
overflow:hidden;
border-right:2px solid #111;
}
The “ei_preview” span will contain the black and white background image and will be of absolute positioning:
“ ei_preview”跨度将包含黑白背景图像，并且具有绝对位置：
.ei_preview{
width:75px;
height:350px;
cursor:pointer;
position:absolute;
top:0px;
left:0px;
background:transparent url(../images/bw.jpg) no-repeat top left;
}
The “ei_image” span will have the colored background image and be almost transparent. We will animate its position and also its opacity to create a cool effect:
“ ei_image”跨度将具有彩色背景图像，并且几乎是透明的。 我们将对其位置和不透明度进行动画处理，以创建很酷的效果：
.ei_image{
position:absolute;
left:75px;
top:0px;
width:75px;
height:350px;
opacity:0.2;
background:transparent url(../images/color.jpg) no-repeat top left;
}
To define the positioning of the background for both spans, we will use the following classes, that we give to the parent link element:
要定义两个跨度的背景位置，我们将使用以下类，这些类提供给父链接元素：
.pos1 span{
background-position:0px 0px;
}
.pos2 span{
background-position:-75px 0px;
}
.pos3 span{
background-position:-152px 0px;
}
.pos4 span{
background-position:-227px 0px;
}
.pos5 span{
background-position:-302px 0px;
}
.pos6 span{
background-position:-377px 0px;
}
The content div will also have an absolute position and the left value is going to be the width of the spans:
内容div也将具有绝对位置，而左值将是跨度的宽度：
.ei_descr{
position:absolute;
width:278px;
height:310px;
border-right:7px solid #f0f0f0;
padding:20px;
left:75px;
top:0px;
background:#fff;
}
We’ll spice up the heading of the content area with a nice grungy font that we’ll get from the Google fonts. We’ll also add some neat background stripes:
我们将使用从Google字体中获得的漂亮又脏又臭的字体为内容区域的标题增添趣味。 我们还将添加一些整洁的背景条纹：
.ei_descr h2{
font-family: 'Rock Salt', arial, serif;
font-size:26px;
color:#333;
padding:10px;
text-shadow:0px 0px 1px #fff;
background:#fff url(../images/stripe_light.gif) repeat top left;
}
The sub heading will also have a font from the collection of Google fonts:
子标题还将具有Google字体集合中的字体：
.ei_descr h3{
font-family: 'Raleway', arial, serif;
color:#fff;
text-shadow:0px 0px 1px #000;
font-style:normal;
padding:10px;
background:#333;
}
And finally, we style the paragraphs:
最后，我们对段落进行样式设置：
.ei_descr p{
color:#000;
padding:10px 5px 0px 5px;
line-height:18px;
font-size:11px;
font-family: Arial, sans-serif;
text-transform:uppercase;
}
And that’s all the style! Don’t forget to include the fonts that you are using from Google:
这就是所有样式！ 别忘了包括您在Google中使用的字体：
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css' />
This is added to the head of your HTML file. And now, let’s spice it up and add the magic!
这将添加到HTML文件的头部。 现在，让我们为它加香料并添加魔法！
JavaScript (The JavaScript)
The main idea is to expand a menu item when clicking on it. This means that we want to animate the width of the li to 400 pixel (which is its initial width and the width of the spans, 75 pixel, plus the width of the content area which is 325 pixel counting with the padding and the border). While we do that, we also want to slide in the second span which has the colored background image and animate its opacity. We also want to decrease the opacity of the other items in order to enhance the current one. This will look as if they get darkened because we have a dark background.
主要思想是在单击菜单项时将其展开。 这意味着我们希望将li的宽度设置为400像素(这是它的初始宽度和跨度的宽度75像素，再加上内容区域的宽度325像素(包括填充和边框))的动画效果。 在执行此操作的同时，我们还希望在具有彩色背景图像的第二个跨度中滑动并为其不透明度设置动画。 我们还希望减少其他项目的不透明度，以增强当前项目的透明度。 由于我们的背景较暗，因此看起来好像变暗了。
Let’s begin by caching some elements:
让我们从缓存一些元素开始：
var $menu = $('#ei_menu > ul'),
$menuItems = $menu.children('li'),
$menuItemsImgWrapper= $menuItems.children('a'),
$menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
totalMenuItems = $menuItems.length,
And let’s define the functionality:
然后定义功能：
ExpandingMenu = (function(){
/*
@current
set it to the index of the element you want to be opened by default,
or -1 if you want the menu to be closed initially
*/
var current = -1,
/*
@anim
if you want the default opened item to animate initially, set this to true
*/
anim = true,
/*
checks if the current value is valid -
between 0 and the number of items
*/
validCurrent = function() {
return (current >= 0 && current < totalMenuItems);
},
init = function() {
/* show default item if current is set to a valid index */
if(validCurrent())
configureMenu();
initEventsHandler();
},
configureMenu = function() {
/* get the item for the current */
var $item = $menuItems.eq(current);
/* if anim is true, slide out the item */
if(anim)
slideOutItem($item, true, 900, 'easeInQuint');
else{
/* if not, just show it */
$item.css({width : '400px'})
.find('.ei_image')
.css({left:'0px', opacity:1});
/* decrease the opacity of the others */
$menuItems.not($item)
.children('.ei_preview')
.css({opacity:0.2});
}
},
initEventsHandler = function() {
/*
when we click an item the following can happen:
1) The item is already opened - close it!
2) The item is closed - open it! (if another one is opened, close that one!)
*/
$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
var $this = $(this).parent(),
idx = $this.index();
if(current === idx) {
slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
current = -1;
}
else{
if(validCurrent() && current !== idx)
slideOutItem($menuItems.eq(current), false, 250, 'jswing');
current = idx;
slideOutItem($this, true, 250, 'jswing');
}
return false;
});
},
/* if you want to trigger the action to open a specific item */
openItem = function(idx) {
$menuItemsImgWrapper.eq(idx).click();
},
/*
opens or closes an item
note that "mLeave" is just true when all the items close,
in which case we want that all of them get opacity 1 again.
"dir" tells us if we are opening or closing an item (true | false)
*/
slideOutItem = function($item, dir, speed, easing, mLeave) {
var $ei_image = $item.find('.ei_image'),
itemParam = (dir) ? {width : '400px'} : {width : '75px'},
imageParam = (dir) ? {left : '0px'} : {left : '75px'};
/*
if opening, we animate the opacity of all the elements to 0.1.
we do this in order to enhance the opened item more:
*/
if(dir)
/*
alternative:
$menuItemsPreview.not($menuItemsPreview.eq(current))
.stop()
.animate({opacity:0.1}, 500);
*/
$menuItemsPreview.stop()
.animate({opacity:0.1}, 1000);
else if(mLeave)
$menuItemsPreview.stop()
.animate({opacity:1}, 1500);
/* the <li> expands or collapses */
$item.stop().animate(itemParam, speed, easing);
/* the image span (color) slides in or out */
$ei_image.stop().animate(imageParam, speed, easing, function() {
/*
if opening, we animate the opacity to 1,
otherwise we reset it.
*/
if(dir)
$ei_image.animate({opacity:1}, 2000);
else
$ei_image.css('opacity', 0.2);
});
};
return {
init : init,
openItem : openItem
};
})();
/*
call the init method of ExpandingMenu
*/
ExpandingMenu.init();
/*
if you want to open / close a specific item you could do it like this:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
And that’s all!
就这样！
替代演示 (Alternative Demos)
You can check out the following other demos which all make use of the different options in our script:
您可以查看以下其他演示，这些演示都利用了脚本中的不同选项：
Example of how to trigger the opening/closing the menu items
All of these versions will be included in the ZIP file. We hope you enjoyed the tutorial and find it useful!
所有这些版本都将包含在ZIP文件中。 我们希望您喜欢本教程并发现它有用！
翻译自: https://tympanus.net/codrops/2011/03/16/expanding-image-menu/
扫一扫
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
