In this tutorial I will show you how to create an overlay toolbar and navigation for an image. This type of technique can, for example, be applied in an image gallery where you want to provide some options for the user when he is viewing your images.
在本教程中，我将向您展示如何创建图像的叠加工具栏和导航。 可以将这种技术应用于例如图库中，在该图库中您想为用户在查看图像时提供一些选项。
The result of this tutorial will look like this:
本教程的结果将如下所示：
As you can see, we will create a toolbar with icons and a navigation bar. In the end we will use some JavaScript (jQuery) in order to make the bars appear and disappear again.
如您所见，我们将创建一个带有图标和导航栏的工具栏。 最后，我们将使用一些JavaScript(jQuery)来使这些条再次出现和消失。
The icons we will be using for this tutorial belong to the incredible Milky icon set. Please visit the site to get the complete icon set by Frexy.
我们将在本教程中使用的图标属于不可思议的Milky图标集。 请访问该网站以获取Frexy设置的完整图标。
1. HTML结构 (1. The HTML Structure)
Let’s start by the HTML structure. We will need three main elements inside of a wrapper or container:
让我们从HTML结构开始。 我们将在包装器或容器中需要三个主要元素：
- upper toolbar with 8 tool icons 带有8个工具图标的上部工具栏
- navigation with previous and next icon, and a price tag带有上一个和下一个图标以及价格标签的导航
- the image itself图像本身
The upper toolbar will be an unordered list:
上方的工具栏将是无序列表：
<ul class="toolbar">
<li><a class="zoomin"></a></li>
<li><a class="zoomout"></a></li>
<li><a class="shop"></a></li>
<li><a class="fav"></a></li>
<li><a class="edit"></a></li>
<li><a class="label"></a></li>
<li><a class="info"></a></li>
</ul>
The navigation bar will be a simple div looking like this:
导航栏将是一个简单的div，如下所示：
<div class="navigation">
<a class="previous"></a>
<a class="next"></a>
<span class="price">$ 0.99</span>
</div>
Put into a wrapper or container and adding the image we will have a structure like this:
放入包装器或容器中并添加图像，我们将得到如下结构：
<div class="image_container">
<ul class="toolbar">
<li><a class="zoomin"></a></li>
<li><a class="zoomout"></a></li>
<li><a class="shop"></a></li>
<li><a class="fav"></a></li>
<li><a class="edit"></a></li>
<li><a class="label"></a></li>
<li><a class="info"></a></li>
</ul>
<img src="example.jpg" alt="example" width="500" height="375"/>
<div class="navigation">
<a class="previous"></a>
<a class="next"></a>
<span class="price">$ 0.99</span>
</div>
</div>
2. CSS (2. The CSS)
Now we will add some style to the classes of the HTML elements. The image container shall look like a frame with a neat shadow around. This we can reach with the CSS3 box shadow property that will not work in Internet Explorer, but which will give a nice effect in e.g. Firefox and Chrome. The styling for the container will be the following:
现在，我们将一些样式添加到HTML元素的类中。 图像容器应看起来像一个框架，周围有整齐的阴影。 我们可以使用CSS3框阴影属性来实现这一点，该属性在Internet Explorer中将不起作用，但是在Firefox和Chrome中会产生很好的效果。 容器的样式如下：
.image_container{
width:500px;
height:375px;
padding:5px;
background-color:#f7f7f7;
border:1px solid #ccc;
-moz-box-shadow: 0 1px 3px #777;
-webkit-box-shadow: 0 1px 3px #777;
margin:40px auto;
}
The image that we are going to use will be 500 pixel wide and 375 pixel high, so we will make the container around it the same size. For the border effect we will not simply add a border, but a background color and some padding. You see, this allows you to add two borders to an image: one is created by the padding and the other by the border.
我们将要使用的图像宽度为500像素，高度为375像素，因此我们将使其周围的容器设为相同大小。 对于边框效果，我们将不只是添加边框，而是添加背景色和一些填充。 您会看到，这使您可以在图像上添加两个边框：一个由填充创建，另一个由边框创建。
With setting the left and right margin to auto, we center the div vertically on the page. Remember the order for the short CSS version: TOP RIGHT BOTTOM LEFT. If you just have two values it is: TOP+BOTTOM RIGHT+LEFT.
通过将左右边距设置为自动，我们将div在页面上垂直居中。 记住简短CSS版本的顺序：TOP RIGHT BOTTOM LEFT。 如果只有两个值，则为：TOP + BOTTOM RIGHT + LEFT。
Let’s continue by styling the unordered list for the icons.
让我们继续设计图标的无序列表的样式。
Because we want it to appear on top of the image, we need to make the position of the unordered list absolute:
因为我们希望它出现在图像顶部，所以我们需要使无序列表的位置绝对：
ul.toolbar{
position:absolute;
width:500px;
height:52px;
margin:0px;
padding:0px;
background-color:#fff;
border-bottom:2px solid #ccc;
list-style-type:none;
}
When styling lists, it is always important to keep in mind that they have a default margin and padding. In this example, we don’t want it to have any of these, so we set them to zero. The list-style-type should be none, since we don’t want any little bullet next to our list items.
设置列表样式时，请务必记住它们具有默认的边距和padding 。 在此示例中，我们不希望它们具有任何这些，因此我们将它们设置为零。 list-style-type应该为none，因为我们不需要列表项旁边的小项目符号。
Now, we want to make the list being in a line. That we need to define in the list elements:
现在，我们要使列表排成一行。 我们需要在列表元素中定义：
ul.toolbar li{
display:inline;
}
When coding CSS, we always want to try to write compact classes and not repeat everything for similar elements. All the a elements in our list will have a different icon, so we need to create different classes for them. But, they will also have many properties in common. So, the first step we take, is to define these common properties for the general case:
在对CSS进行编码时，我们始终希望尝试编写紧凑的类，而不是对相似的元素重复所有操作。 列表中的所有a元素将具有不同的图标，因此我们需要为其创建不同的类。 但是，它们也将具有许多共同点。 因此，我们采取的第一步是为一般情况定义以下通用属性：
ul.toolbar li a{
float:left;
cursor:pointer;
width:70px;
height:52px;
opacity: 0.6;
}
The icon itself is 48 pixels wide and high, but we want to give the buttons that we create out of the icons a little bit more space. When styling link elements, one should always keep in mind that they only change the mouse cursor to a little hand, when there is a href in them. In our case we will not have a link address, so we set the cursor property to pointer. The icons should be a little bit transparent, so we set the opacity to 0.6. We want them to become opaque when we hover over them, so we define:
图标本身的宽度和高度为48像素，但是我们想给我们在图标中创建的按钮留出更多的空间。 设置链接元素的样式时，应始终牢记，当其中包含href时，它们只会将鼠标光标更改为小手。 在我们的情况下，我们没有链接地址，因此将cursor属性设置为pointer 。 图标应该有点透明，因此我们将不透明度设置为0.6 。 当我们将鼠标悬停在它们上方时，我们希望它们变得不透明，因此我们定义：
ul.toolbar li a:hover{
opacity: 1.0;
}
Now we can define the classes for the icons:
现在我们可以为图标定义类：
a.label{
background:#fff url(icons/label.png) no-repeat center center;
}
a.fav{
background:#fff url(icons/favorite.png) no-repeat center center;
}
a.shop{
background:#fff url(icons/shopping_cart.png) no-repeat center center;
}
a.zoomin{
background:#fff url(icons/zoom_in.png) no-repeat center center;
}
a.zoomout{
background:#fff url(icons/zoom_out.png) no-repeat center center;
}
a.fullscreen{
background:#fff url(icons/fullscreen.png) no-repeat center center;
}
a.info{
background:#fff url(icons/info.png) no-repeat center center;
}
a.edit{
background:#fff url(icons/edit.png) no-repeat center center;
}
With this styling we are done with the upper toolbar. The navigation div will have a similar style to the unordered list:
通过这种样式，我们完成了上部工具栏。 导航div的样式与无序列表类似：
.navigation{
width:500px;
height:52px;
position:absolute;
margin-top:-58px;
border-top:2px solid #ccc;
background-color:#fff;
}
The margin-top gets a negative value because we want to pull the navigation bar up to appear on top of the image. (When making the container relative, we could as well just say e.g. left:0px and bottom:0px.) The two arrows for the navigation will have the following styling:
上边距为负值，因为我们要向上拉导航栏以使其出现在图像顶部。 (当使容器相对时，我们也可以只说例如left：0px和bottom：0px。)导航的两个箭头将具有以下样式：
a.previous{
float:left;
background:#fff url(icons/prev.png) no-repeat center center;
}
a.next{
float:right;
background:#fff url(icons/next.png) no-repeat center center;
}
Since these elements will as well have the same styling like the a elements in the upper toolbar, we will just add the class to the already existing css:
由于这些元素也将具有与上部工具栏中的a元素相同的样式，因此我们只需将类添加到已经存在的css中：
ul.toolbar li a, .navigation a{
float:left;
cursor:pointer;
width:70px;
height:52px;
opacity: 0.6;
}
Last but not least, we have the price tag, which has the following styling:
最后但并非最不重要的一点是，我们具有价格标签，该标签具有以下样式：
span.price{
position:absolute;
color:#888;
font-weight:bold;
font-size:26px;
margin:10px 0px 0px 140px;
}
The margin of the absolute positioned element allows to position it relative to the containing element. Using e.g. top or left would position an absolute element relative to the page itself. So, now we are done with the markup and styling and ready to add some magic.
绝对定位元素的边距允许将其相对于包含元素定位。 使用例如top或left将相对于页面本身定位绝对元素。 因此，现在我们完成了标记和样式，并准备添加一些魔术。
3. JavaScript (3. The JavaScript)
We want the toolbar and navigation to appear only when we hover over the image. Further, we want that, when passing over one of the bars, they become opaque. To achieve these effects we will simply use jQuery. First, we will need to add style for another class to the CSS which will make elements transparent:
我们希望工具栏和导航仅在将鼠标悬停在图像上时出现。 此外，我们希望当经过这些条之一时，它们变得不透明。 为了实现这些效果，我们将简单地使用jQuery。 首先，我们需要为CSS添加另一个类的样式，这将使元素透明：
.transparent{
opacity: 0.6;
}
We will add this class to the toolbar and the navigation. Additionally, we will add a style tag saying that the elements should be invisible:
我们将把此类添加到工具栏和导航中。 此外，我们将添加一个样式标签，说明元素应该是不可见的：
<div class="image_container">
<ul class="toolbar transparent" style="display:none;">
<li><a class="zoomin"></a></li>
<li><a class="zoomout"></a></li>
<li><a class="shop"></a></li>
<li><a class="fav"></a></li>
<li><a class="edit"></a></li>
<li><a class="label"></a></li>
<li><a class="info"></a></li>
</ul>
<img src="example.jpg" alt="example" width="500" height="375"/>
<div class="navigation transparent" style="display:none;">
<a class="previous"></a>
<a class="next"></a>
<span class="price">$ 0.99</span>
</div>
</div>
Since we will use some JavaScript functions acting on the elements, we need to identify them with unique ids:
由于我们将使用一些作用在元素上JavaScript函数，因此我们需要使用唯一的ID来标识它们：
<div class="image_container" id="img_cont">
<ul class="toolbar transparent" id="tlbar" style="display:none;">
<li><a class="zoomin"></a></li>
<li><a class="zoomout"></a></li>
<li><a class="shop"></a></li>
<li><a class="fav"></a></li>
<li><a class="edit"></a></li>
<li><a class="label"></a></li>
<li><a class="info"></a></li>
</ul>
<img src="example.jpg" alt="example" width="500" height="375"/>
<div class="navigation transparent" id="nav" style="display:none;">
<a class="previous"></a>
<a class="next"></a>
<span class="price">$ 0.99</span>
</div>
</div>
In the head of the document, we need to add a link to the jQuery script:
在文档的开头，我们需要添加指向jQuery脚本的链接：
<script type="text/javascript" src="jquery-1.3.2.js"></script>
Now we can define some functions before the closing body tag:
现在我们可以在结束body标签之前定义一些函数：
<script>
$(function() {
$('#img_cont').hover(
function () {
$('#tlbar').slideDown(200);
$('#nav').slideDown(200);
},
function () {
$('#tlbar').slideUp(200);
$('#nav').slideUp(200);
}
);
$('#tlbar,#nav').hover(
function () {
$(this).removeClass('transparent');
},
function () {
$(this).addClass('transparent');
}
);
});
</script>
We define that we want the toolbar and the navigation bar to appear “sliding down” very quickly (200 milliseconds) whenever we hover over the the image container. Then, when hovering over one of the elements, we want them to become opaque. That we achieve by removing the transparent class. And that’s it!
我们定义了每当我们将鼠标悬停在图像容器上时，我们希望工具栏和导航栏Swift(“向下滑动”)(200毫秒)出现。 然后，将鼠标悬停在其中一个元素上时，我们希望它们变得不透明。 我们通过删除透明类来实现。 就是这样！
翻译自: https://tympanus.net/codrops/2009/11/23/css-tutorial-image-with-toolbar-navigation-overlay/
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
