添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 网页特效 > 导航 | 菜单 >

jQuery固定侧边栏动画菜单

时间:2015-02-22      来源:互联网     
特效说明:
一款jQuery固定侧边栏动画菜单网页特效,该JS代码是一款固定在页面右侧带鼠标滑过动画特效菜单。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
1、调用CSS样式:
<link href="css/default.css" rel="stylesheet" type="text/css">

2、调用JS插件代码:
<script type="text/javascript" src="js/jquery.js"></script>

3、添加HTML代码:
<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。

4、JS代码:
<script type="text/javascript">
    var btb=$(".rightNav");
    var tempS;
    $(".rightNav").hover(function(){
            var thisObj = $(this);
            tempS = setTimeout(function(){
            thisObj.find("a").each(function(i){
                var tA=$(this);
                setTimeout(function(){ tA.animate({right:"0"},300);},50*i);
            });
        },200);

    },function(){
        if(tempS){ clearTimeout(tempS); }
        $(this).find("a").each(function(i){
            var tA=$(this);
            setTimeout(function(){ tA.animate({right:"-110"},300,function(){
            });},50*i);
        });

    });
    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
    if( isIE6 ){ $(window).scroll(function(){ btb.css("top", $(document).scrollTop()+100) }); }
</script>
相关特效
  • jQuery鼠标右键菜单特效代码

    jQuery鼠标右键菜单特效代码

    一款jQuery鼠标右键菜单特效代码,该JS代码适用于程序开发后台使用。风格百搭。……
    2018-03-27
  • CSS3网页底部扇形展开/收回菜单特效

    CSS3网页底部扇形展开/收回菜单特效

    一款CSS3网页底部扇形展开/收回菜单特效下载,该CSS3导航菜单代码是一款定位在网页底部菜单按钮,点击展开/收回扇形动画菜单,HTML5网站建设素材。……
    2016-06-28
  • jQuery过滤器插件fastLiveFilter

    jQuery过滤器插件fastLiveFilter

    一款jQuery过滤器插件fastLiveFilter免费代码素材,fastLiveFilter这是jQuery过滤器插件,超轻量级(大小只有2K),用法简单执行效率高。……
    2016-05-22
  • jQuery图片图像对比插件coveringBad.js特效Demo

    jQuery图片图像对比插件coveringBad.js特效Demo

    一款jQuery图片图像对比查看差异coveringBad.js网页特效插件,通过鼠标拖拽按钮查看当前图像与背景图像差异jQuery插件,婚纱摄影网站建设图片对比插件。……
    2016-05-22
  • HTML5触屏滑动侧边栏导航菜单特效

    HTML5触屏滑动侧边栏导航菜单特效

    一款HTML5触屏滑动侧边栏导航菜单特效下载,该Bootstrap导航菜单特效是一款基于jquery+html5实现的兼容手机和PC端动画导航菜单插件,响应式网站建设必备代码素材。……
    2016-05-22
  • jQuery仿QQ音乐大转盘抽奖代码

    jQuery仿QQ音乐大转盘抽奖代码

    一款jQuery仿QQ音乐大转盘抽奖代码页特效,绿色12等份网格幸运大转盘抽奖程序JS代码下载。……
    2015-08-22
  • 自定义百度分享URL以及图标样式JS代码

    自定义百度分享URL以及图标样式JS代码

    一款自定义百度分享URL以及图标样式JS代码网页特效,可以应用于响应式网页制作、微信网页制作分享代码。……
    2015-08-21
  • 如何自定义百度分享URL以及图标?

    如何自定义百度分享URL以及图标?

    一款自定义百度分享URL以及图标样式JS代码网页特效,可以应用于响应式网页制作、微信网页制作分享代码。……
    2015-08-21
  • jQuery点击空白处隐藏弹出层

    jQuery点击空白处隐藏弹出层

    一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。……
    2015-08-20
  • jQuery鼠标点击图片透明渐变翻开切换焦点图

    jQuery鼠标点击图片透明渐变翻开切换焦点图

    一款jQuery鼠标点击图片透明渐变翻开切换焦点图网页特效,鼠标点击图片向上移动渐变消失切换图片,带自动轮播、页码标识JS焦点图代码。……
    2015-08-03

最新更新特效

设计分享