jQuery实现侧边导航点击隐藏动画设计

原创 2015年11月18日 19:20:46

现在有这样一个需求,对于左侧的导航,当我点击导航的最上方时,原本显示的导航隐藏,再次点击后,隐藏的导航显示,以此反复,同时,在导航隐藏的状态下悬浮在导航的内容上时,导航也显示,当前状态下鼠标不悬浮在导航上时,导航恢复隐藏,其实是一个很简单的效果,但只有这样清楚的表达出来才能更好的实现,在这里用jQuery实现,给代码中出现的元素做简单说明,.sidebar-header指的是导航头,#left-sidebar指的是整个左导航,

var clickAnimating = false;//^O^ -- 增加click导航缩进动画的标记位
var isOpen = false;         //判断导航当前是显示或者隐藏的标志位
$('#left-sidebar ul#sidenav').wrap('<div id="slidebar_plugin" style="height:85%;overflow:hidden;"></div>');
        $('.sidebar-header').on('click',function(e){
            //****************^O^ 标记位处理 start*****************
            if(clickAnimating){
                return;
            }
            clickAnimating = true;
            //****************^O^ 标记位处理 end*****************
            e.preventDefault();
            e.stopPropagation();

            var $datarole = $('#left-sidebar').attr('data-role');
            if($datarole == 'show'){
                $('#left-sidebar').animate({'left':'-2px'},function(){
                    clickAnimating = false;  //^O^ -- 修改标记位
                });//显示
                $("#right-content").animate({width:'86.1%'},function(){
                    clickAnimating = false;  //^O^ -- 修改标记位
                });
                $('.sidebar-header i').removeClass('glyphicon-circle-arrow-right').addClass('glyphicon-circle-arrow-left');
                $('#minu-sidebar i').css({'float':'left'});
                $('#sidenav i').fadeIn();
                $('#left-sidebar').removeAttr('data-role');
                $('#left-sidebar').attr('data-role','hide');
                $("#minu-sidebar").attr('role','maxu-nav');
                isOpen = true;
            }else{
                //^O^ -- 修改left值
                $('#left-sidebar').animate({'left':-2 - parseFloat($('#left-sidebar').css('width')) + 40},function(){
                    clickAnimating = false;  //^O^ -- 修改标记位
                });//隐藏
                $("#right-content").animate({width:'97.4%'},function(){
                    clickAnimating = false;  //^O^ -- 修改标记位
                });
                $('.sidebar-header i').removeClass('glyphicon-circle-arrow-left').addClass('glyphicon-circle-arrow-right');
                $('#minu-sidebar i').css({'float':'right'});
                $('#sidenav i').fadeOut();
                $('#left-sidebar').removeAttr('data-role');
                $('#left-sidebar').attr('data-role','show');
                $("#minu-sidebar").attr('role','minu-nav');
                isOpen = false;
            }
        });



        $('#slidebar_plugin').hover(
            function(e){
                //****************^O^ 标记位处理 start*****************
                if(clickAnimating){
                    return;
                }
                //****************^O^ 标记位处理 end*****************
                e.preventDefault();
                e.stopPropagation();

                var $datarole = $('#left-sidebar').attr('data-role');
                var icon = $("#minu-sidebar").attr('role');
                //^O^ -- 添加stop
                $('#left-sidebar').stop();
                $('#sidenav i').stop();
                $('#minu-sidebar i').stop();
                $("#right-content").stop();
                if($datarole == 'show'){
                    $('#left-sidebar').animate({'left':'-2px'});//显示
                    $('.sidebar-header i').removeClass('glyphicon-circle-arrow-right').addClass('glyphicon-circle-arrow-left');
                    $('#minu-sidebar i').css({'float':'left'});
                    $('#sidenav i').show();
                    $('#left-sidebar').removeAttr('data-role');
                    $('#left-sidebar').attr('data-role','hide');
                    $("#minu-sidebar").attr('role','maxu-nav');
                }
            }//end of function
            ,
            function(e){
                //****************^O^ 标记位处理 start*****************
                if(clickAnimating){
                    return;
                }
                //****************^O^ 标记位处理 end*****************
                e.preventDefault();
                e.stopPropagation();

                var $datarole = $('#left-sidebar').attr('data-role');
                var icon = $("#minu-sidebar").attr('role');
                //^O^ -- 添加stop
                $('#left-sidebar').stop();
                $('#sidenav i').stop();
                $('#minu-sidebar i').stop();
                $("#right-content").stop();
                if($datarole == 'hide' && (isOpen == false)){
                    //^O^ -- 修改left值
                    $('#left-sidebar').animate({'left':-2 - parseFloat($('#left-sidebar').css('width')) + 40});//隐藏
                    $('.sidebar-header i').removeClass('glyphicon-circle-arrow-left').addClass('glyphicon-circle-arrow-right');
                    $('#minu-sidebar i').css({'float':'right'});
                    $('#sidenav i').hide();
                    $('#left-sidebar').removeAttr('data-role');
                    $('#left-sidebar').attr('data-role','show');
                    $("#minu-sidebar").attr('role','minu-nav');
                }
            }//end of function
        );//end of hover

还需注意浏览器缩放时的效果

$(window).resize(function(){
    //****************   导航缩进时控制左导航left-sidenav与右边内容right-content的间距  *****************
    if(parseFloat($('#left-sidebar').css('left')) < -2 ){      
        $('#left-sidenav').css({'width':'14%'});
        $('#left-sidebar').css({'left': -2 - parseFloat($('#left-sidebar').css('width'))+40});  
        $('#right-content').css({'width':'97.4%'});    
    }else if(parseFloat($('#left-sidebar').css('left')) == -2 ){
        $('#left-sidenav').css({'width':'14%'});
        $('#right-content').css({'width':'86.1%'});
    }
    $('#right-content').css({'left':parseFloat($('#left-sidenav').css('left')) + parseFloat($('#left-sidenav').css('width')) + 3});

});

相关文章推荐

jquery.mmenu.js实现侧边导航非常适用于手机版站-最简使用教程(一)

一、插件介绍 这个插件一般做手机站用的比较多,左侧上侧右侧下侧弹出菜单。 老杨我比较笨,每次下载下来很多demo,都让我看的晕晕的,倒是看时间长了,也能看懂,不过老杨我就是觉得麻烦。总想慢慢来,...

按扭点击侧边隐藏显示

  • 2013年05月07日 14:44
  • 1MB
  • 下载

ListView 实现点击侧边A-Z快速查找[中英文排序混排]

相信大家一定见过这样的一个效果吧,也相信大家也在网上找到了许多的例子,但是大多的都是残缺不全的,没能真正的实现大家的一个效果吧,那么今天我就和大家分享我的这个完全的源代码,希望能对大家有所帮助吧,需要...

ListView 实现点击侧边A-Z快速查找[中英文混排]

ListView 实现点击侧边A-Z快速查找[中英文混排] 相信大家一定见过这样的一个效果吧,也相信大家也在网上找到了许多的例子,但是大多的都是残缺不全的,没能真正的实现大家的一...

ListView 实现点击侧边A-Z快速查找

为了实现上面的A-Z 快速定位的功能 下面是main.xml的布局文件
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现侧边导航点击隐藏动画设计
举报原因:
原因补充:

(最多只允许输入30个字)