介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> & lt;/title>
https://www.yisu.com/zixun/& lt;脚本src=" jquery-1.11.1.min.js ">
<风格type=" text/css ">
*{保证金:0;填充:0;}
身体{颜色:# 333;字体:12 px/20 px Arial,“微软YaHei”,“宋体”,无衬线;text-align:中心;背景:# fff;}
一个{文字修饰:没有,颜色:# 333;}
.rightNav{:固定;宽度:140 px;右:0;前:100像素;_position:绝对;text-align:左;光标:指针;背景图片:url(约:空白);}
.rightNav{显示:块;位置:相对;高度:30 px;行高:30 px;margin-bottom: 2 px;背景:# fff;padding-right: 10 px;宽度:130 px;溢出:隐藏;光标:指针;右:-110 px;}
.rightNav答:悬停{文字修饰:没有;颜色:# 39 a4dc;}
.rightNav答:悬停em{背景:# 00 b700}
.rightNav em{显示:块;浮:左;宽度:30 px;背景:# 39 a4dc;颜色:# fff;字体大小:16 px;text-align:中心;margin-right: 10 px;}
.rightNav。新em{背景:#法郎;}> 头
身体<>
<脚本type=" text/javascript”>//右侧导航
var btb=$ (“.rightNav”);
var临时工;
$ (" .rightNav ") .hover(函数(){
var thisObj=$ ();
临时工=setTimeout(函数(){
thisObj.find (“a”) . each(函数(i) {
var tA=$ ();
console.log(我);
setTimeout(函数(){tA.animate({右:“0”},200);},50 *我);
});
},200);
},函数(){
如果(临时工){clearTimeout(临时工);}
(美元);(“a”) . each(函数(i) {
var tA=$ ();
setTimeout(函数(){tA.animate(200年{右:" -110 "},函数(){
});},50 *我);
});
});>
小编给大家分享一下css实现酷炫的右侧悬浮菜单栏效果的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
默认显示效果:
鼠标悬浮效果:
HTML, JS代码如下: