用jQuery进行令人敬畏的气泡导航

在本教程中，我们将使用jQuery创建一个充满气泡的导航。这个想法是要有一些圆形的导航图标，可以在悬停的时候释放气泡。我们将使用jQuery放松插件来获得更好的效果。

好，我们开始吧。

标记

HTML将包含一个主div，我们将提供类导航和id导航。在主div中我们将有导航项:

User

Profile

Properties

Privacy

Home

Portfolio

Services

Contact

...

作为一个例子，我们只展示了前面的两个项目。如您所见，我们给内部div提供了两个类:item和用于导航项的改编类的名称，如“user”或“home”。这样，我们可以相应地处理所有内部元素。在这种情况下，我们希望根据这些类来处理与类“图标”的链接元素，因为您将能够在CSS中看到。

item元素内部的其他元素是气泡的图像、链接元素的图标、标题和链接列表。

CSS

让我们看一下样式。首先，我们来定义一下整体的风格:

.navigation{ margin: 0px auto; font-family: "Trebuchet MS", sans-serif; font-size: 24px; font-style: normal; font-weight: bold; letter-spacing: 1.4px;}

现在，我们将对项目使用绝对定位:

.navigation .item{ position:absolute;}

由于我们给了div两个类，现在我们将为每个导航项定义各自的位置。在应用两个类时，我们将两个属性集添加到元素中。

.user{ top:125px; left:110px;}.home{ top:50px; left:360px;}.shop{ top:90px; left:625px;}.camera{ top:230px; left:835px;}.fav{ top:420px; left:950px;}

图标的链接元素有以下一般风格:

a.icon{ width:52px; height:52px; position:absolute; top:0px; left:0px; cursor:pointer;}

我们可以再次定义每个元素的图标:

.user a.icon{ background:transparent url(../images/user.png) no-repeat 0px 0px;}.home a.icon{ background:transparent url(../images/home.png) no-repeat 0px 0px;}.shop a.icon{ background:transparent url(../images/shop.png) no-repeat 0px 0px;}.camera a.icon{ background:transparent url(../images/camera.png) no-repeat 0px 0px;}.fav a.icon{ background:transparent url(../images/fav.png) no-repeat 0px 0px;}

由于我们正在为每个图标使用sprite图像，我们可以简单地定义“hover”类如下:

.navigation .item a.active{ background-position:0px -52px;}

圆形图像将有以下样式:

.item img.circle{ position:absolute; top:0px; left:0px; width:52px; height:52px; opacity:0.1;}

内容元素，如标题和链接列表将被设计为:

.item h2{ position:absolute; width:147px; height:52px; color:#222; font-size:18px; top:0px; left:52px; text-indent:10px; line-height:52px; text-shadow:1px 1px 1px #fff; text-transform:uppercase;}.item h2.active{ color:#fff; text-shadow:1px 0px 1px #555;}.item ul{ list-style:none; position:absolute; top:60px; left:25px; display:none;}.item ul li a{ font-size:15px; text-decoration:none; letter-spacing:1.5px; text-transform:uppercase; color:#222; padding:3px; float:left; clear:both; width:100px; text-shadow:1px 1px 1px #fff;}.item ul li a:hover{ background-color:#fff; color:#444; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 4px #666; -webkit-box-shadow:1px 1px 4px #666; box-shadow:1px 1px 4px #666;}

通过链接元素的白色文本阴影，我们可以创建一个刻字效果。

好的，我们添加一些JavaScript。

JavaScript

JavaScript很简单。首先，在关闭body标签之前将其添加到HTML代码:

这个想法是当我们在一个导航项目上盘旋时，让气泡图像出现。我们通过动画的宽度，高度，顶部和左边来做。因为我们想让气泡略高于图标，所以我们需要把它放在左边，更多的放在顶部。我们用消极的定位来“拉动”它。我们还通过将其不透明度更改为1(第6 - 11行)来使其渐隐。“easeOutBack”来自jQuery放松插件，并创建了一个很好的缓解效果(第12行)。

当动画结束时，我们使列表元素淡入(第13行)。

我们还获得了项目div和标题中的第一个链接元素，并将类“active”添加到它们中，这将改变它们的外观(第16行)。

在鼠标退出时，即当我们离开导航项时，我们还原动作，并使列表和气泡再次消失。我们还从图标元素和标题移除活动类。

如果你是一个IE用户您可能已经注意到,泡沫看起来有点奇怪(和其他的东西看起来像废话…没有CSS3属性)。我想这与图像的透明度和动画有关。我不知道一个解决方案可能会寻找…也许这是一个好的开始。

这是它!我希望你喜欢这个教程，觉得它有用!