如何使用CSS3和JQuery easing 插件制作绚丽菜单


Posted in jQuery onJune 18, 2019

前言

在本教程中,我们将创建一个独特的滑动框导航。这样做可以让有菜单的盒子滑出,并且弹出缩略图。在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动。

我们将使用jQuery Easing Plugin插件和一些由tibchris.提供的漂亮图片

标记

在HTML的结构中,我们将使用一个无序的列表,其中每个菜单项将包含的主要链接和一个子菜单的div元素:

<ul id="sdt_menu" class="sdt_menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img src="images/1.jpg" alt="" />
<span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span>
<span class="sdt_descr">My work</span> </span></a>
<div class="sdt_box">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Websites</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Illustrations</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Photography</a>
</div>
</li>
</ul>

如果这里没有子菜单,DIV将简单的被排除在外。图片开始不会显示,因为我们使用css把它的高度和宽度设置为0.让我们看看样式表:

样式表

我们开始设计无序列表的样式:

ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}

通常的,我们想为我们菜单中的链接清除任何默认的文本装饰和外框:

ul.sdt_menu a{
text-decoration:none;
outline:none;
}

我们的列表项将靠左浮动,并且相对定位。因为我们要对里边的元素做绝对定位。

如果我们不这样做的话,绝对定位的元素对这个页面来说将是相对的。

ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}

对于标题和描述,我们有2个span,主要链接元素的样式将被定义成如下:

ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}

注意z-index:我们将定义为所有的重要元素的堆叠顺序,使正确的留在上面。

我们正在使用背景图像创建一个半透明渐变玻璃般的效果。当您使用一些背景图案(如木材演示),它创建了一个美丽的效果。确保尝试不同质地的 - 它只是看起来惊人的!

你也可以操作阴影,改变值成为:2px 2px 6px #000 inset,将会给你带来非常好的影响。

ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}

我们给这样图片加一个动画效果,让他从底部动起来。那是就是为什么我使用“bottom”作为参考点。我们也添加一些优雅的方块阴影。前边2个的值是0,使得图片周围的阴影均匀扩散。我把它应用到链接元素。无论什么时候你想创建一个轻的边界效应。你都可以使用这一招!他的优点是,阴影不是真的,你不需要考虑它的宽度或元素的高度计算。目前的缺点是,IE下是不支持CSS3的。

作为标题和描述的span 包装都会有这样的样式:

ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}

如果你有一些较大的文本,你将需要适应这些值。也确保适应值在JavaScript的动画值中。

接下来,我们定义为灰色框,向下滑动的风格。我们给它一个0的高度和位置,我们只需以动画的方式要增加其高度:

ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}

盒子中span和link的常用样式应该被定义成如下:

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}

标题和描述被定义成如下样式:

ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:10px;
letter-spacing:1px;
}

子菜单的盒子初始化的时候应该是在灰色盒子下并隐藏的。稍后我们使他动起来,向右或向左,这取决于我们在哪。例如,如果我们鼠标在最后一个元素上徘徊,我们想实现让子菜单向左的动画效果。其他的条件下,我们想让它向右。

ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}

子菜单的第一个link应该有一个margin:

ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}

Javascript

当我们用鼠标输入的列表元素,我们放大图像,并显示,sdt_active跨度和sdt_wrap跨度。如果元素有一个子菜单(sdt_box),然后我们将它推到一边。如果该元素是最后一个,我们在菜单的子菜单框幻灯片的左侧,否则在右侧:

$(function() {
/**
* for each menu element, on mouseenter, 
* we enlarge the image, and show both sdt_active span and 
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
} 
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});

这就完成了。我们希望你喜欢这个小菜单并且可以合理的使用它。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件之validation插件
Mar 29 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery异步提交表单实例
May 30 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 #jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 #jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 #jQuery
jquery中为什么能用$操作
Jun 18 #jQuery
js/jQuery实现全选效果
Jun 17 #jQuery
jQuery创建折叠式菜单
Jun 15 #jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
复习Python中的字符串知识点
2015/04/14 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python实现canny边缘检测
2020/09/14 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
什么是URL
2015/12/13 面试题
社区八一活动方案
2014/02/03 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
技术支持岗位职责
2015/02/13 职场文书
团委工作总结2015
2015/04/02 职场文书
郭明义观后感
2015/06/08 职场文书
八年级语文教学反思
2016/03/03 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
httpclient调用远程接口的方法
2022/08/14 Java/Android