如何使用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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
JQuery获得内容和属性方法解析
May 30 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守护进程类
2015/12/30 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php fread函数使用方法总结
2019/05/28 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
Python多线程编程简单介绍
2015/04/13 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python实现月食效果实例代码
2019/06/18 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python pickle模块实现对象序列化
2019/11/22 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
销售代表求职自荐信
2013/10/01 职场文书
文秘专业自荐信
2013/10/14 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
会计人员岗位职责
2015/02/03 职场文书
语文教师个人工作总结
2015/02/06 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
html5表单的required属性使用
2021/07/07 HTML / CSS
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android