这篇文章将为大家详细讲解有关怎么使用CSS3和JQuery宽松插件制作绚丽菜单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>前言
在本教程中,我们将创建一个独特的滑动框导航。这样做可以让有菜单的盒子滑出,并且弹出缩略图。在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动。
我们将使用JQuery插件插宽松件和一些由tibchris。提供的漂亮图片
<强>标记
在HTML的结构中,我们将使用一个无序的列表,其中每个菜单项将包含的主要链接和一个子菜单的div元素:
如果这里没有子菜单,DIV将简单的被排除在外。图片开始不会显示,因为我们使用css把它的高度和宽度设置为0。让我们看看样式表:
%20%20<强>样式表%20
%20我们开始设计无序列表的样式:
%20通常的,我们想为我们菜单中的链接清除任何默认的文本装饰和外框:
%20我们的列表项将靠左浮动,并且相对定位。因为我们要对里边的元素做绝对定位。
%20如果我们不这样做的话,绝对定位的元素对这个页面来说将是相对的。
%20对于标题和描述,我们有2个,主要链接元素的样式将被定义成如下:
%20注意z - index:我们将定义为所有的重要元素的堆叠顺序,使正确的留在上面。
我们正在使用背景图像创建一个半透明渐变玻璃般的效果。当您使用一些背景图案(如木材演示),它创建了一个美丽的效果,确保尝试不同质地的——它只是看起来惊人的!
你也可以操作阴影,改变值成为:2 px 2 px 6 px # 000插图,将会给你带来非常好的影响。
我们给这样图片加一个动画效果,让他从底部动起来。那是就是为什么我使用“底部”作为参考点。我们也添加一些优雅的方块阴影。前2个边的值是0,使得图片周围的阴影均匀扩散。我把它应用到链接元素,无论什么时候你想创建一个轻的边界效应。你都可以使用这一招!他的优点是,阴影不是真的,你不需要考虑它的宽度或元素的高度计算。目前的缺点是,IE下是不支持CSS3的。
作为标题和描述的跨包装都会有这样的样式:
