如何使用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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 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
php学习 字符串课件
2008/06/15 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
php除数取整示例
2014/04/24 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python pandas生成时间列表
2019/06/29 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
项目建议书格式
2014/03/12 职场文书
化工操作工岗位职责
2014/04/29 职场文书
心理咨询承诺书
2014/05/20 职场文书
单身证明格式样本
2015/06/15 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers