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});

});

点击按钮滑动显示侧边导航栏

*{ padding: 0; margin: 0;} html, body{ position: relative; width: 100%; height: 100%; overflow: hidd...
  • qq_34789629
  • qq_34789629
  • 2016年10月10日 10:51
  • 1249

jQuery实现侧边导航手风琴效果

侧导航的手风琴效果是指,点击含子层导航的父导航时,使原本隐藏的子导航显示,再次点击,子层导航又恢复隐藏,同时,同一时间只有一个父导航的子导航能够显示 $("#sidenav > li").find('...
  • viciousDear
  • viciousDear
  • 2015年11月18日 19:27
  • 991

点击按钮之后右侧弹出导航,再点击右侧导航隐藏回去的实现

转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53408091 本文出自【我是干勾鱼的博客】 实现了一个点击按钮之后右侧弹出...
  • dongdong9223
  • dongdong9223
  • 2016年11月30日 15:19
  • 1619

js、jq两种方法实现网页侧边导航

js第一种方法:实现的效果如下: 1.在侧栏滑动时背景颜色切换和字体颜色切换. 2.窗口滚动时,右边侧栏随之变化. 3.点击侧栏选项,跳动到当前选项对应的页面,并且侧栏也随之变化.代码如下: ...
  • mr_fzz
  • mr_fzz
  • 2016年11月23日 17:52
  • 1325

响应式侧边导航栏(刚入门的菜鸟,勿喷...)

纯手写响应式侧边导航栏,废话不多说直接上效果图及代码…ps:markdown也是第一次使用,排版就不计较了 页面结构 ...
  • hncu1990
  • hncu1990
  • 2016年11月06日 23:06
  • 1382

一个很简单的侧边栏导航实现

一个简单的sidebar的小例子。在实习的项目中,有一个重要的UI部分就是一个sidebar.之前一直很想自己能够重构这一部分,但是无论是参考项目代码还是到GitHub上的代码,我都感觉到很吃力。因为...
  • u011273849
  • u011273849
  • 2015年05月07日 15:16
  • 2877

vue.js 左侧二级菜单显示隐藏切换 实例

完整代码: vue点击切换显示隐藏 *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200p...
  • h5css3_linhuai
  • h5css3_linhuai
  • 2017年05月23日 11:14
  • 4066

jQuery - 侧栏导航点击滑入滑出效果 -

点击按钮滑动显示侧边导航栏 html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> ...
  • weixin_41170223
  • weixin_41170223
  • 2017年12月02日 23:50
  • 126

CSS3--隐藏悬浮左侧导航栏

专业建站:莜霓网络 用CSS3做的一个竖式导航栏。 只要是相对定位position: relative;和固定position: fixed;的运用 还有就是终于用的不是overflow:h...
  • bingqingsuimeng
  • bingqingsuimeng
  • 2015年01月06日 15:13
  • 6156

类似天猫那样的侧边导航栏的快速实现

前几天在慕课上面看到一个教程,教人怎么做一个侧边导航栏,跟着教程于是自己用JQUERY也写出来了一个,贴上代码(HTML和JQUERY)给大家参考一下。 地狗购物网网页导...
  • u013301375
  • u013301375
  • 2015年01月28日 19:38
  • 1251
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现侧边导航点击隐藏动画设计
举报原因:
原因补充:

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