导航菜单底部滑动条跟随效果_html/css_WEB-ITnose

网上昨天学了一个导航条效果 今天手动实现了一下 开心。。。

翠花，上效果图！

实现代码如下（思路见代码）：

             navdemo1              /*           1.位置属性(position, top, right, z-index, display, float等)            2.大小(width, height, padding, margin)            3.文字系列(font, line-height, letter-spacing, color- text-align等)            4.背景(background, border等)           5.其他(animation, transition等)             */        * {            padding: 0;            margin: 0;            font-family: 'Microsoft YaHei';        }        a{text-decoration:none;}        li{list-style:none;}        .nav-wrap{position:relative;background-color:#000;}        .nav-wrap .nav{width:1000px;margin:0 auto; overflow:hidden;}        .nav-wrap .nav li{float:left;}        .nav-wrap .nav li a{display:block; height:50px;padding:0 50px;line-height:50px;color:#fff;transition:background-color 0.3s linear;}        .nav-wrap .nav li a:hover,.nav-wrap .nav li a.active{background-color:#484646;}        .nav-wrap .line{display:block;position:absolute;bottom:0;width:50px;height:2px;background-color:#ff6a00;}                              $(function () {            navdeal();        });        //导航条效果处理        //思路：        //1.下滑条绝对定位到导航条模块的底部         //2.js控制下滑条 宽度=当前菜单项的宽度  左边距=当前菜单项相对父元素（.nav-wrap）的左偏移         //3.加上easing.js中的弹性效果        var navdeal = function () {            var $item_active = $('.nav-wrap .nav li a.active');            var $nav_line = $('.nav-wrap .line');            var item_width = $item_active.outerWidth();            var item_position_left = $item_active.position().left;            $nav_line.css({ 'width': item_width, 'margin-left': item_position_left });                        //菜单项鼠标移入，移出事件绑定            $('.nav-wrap .nav li a').bind({                mouseover: function () {                    var item_width = $(this).outerWidth();                    var item_position_left = $(this).position().left;                    $nav_line.stop().animate({ 'width': item_width, 'margin-left': item_position_left }, 800, 'easeOutBounce');                },                mouseout: function () {                    $nav_line.stop().animate({ 'width': item_width, 'margin-left': item_position_left }, 800, 'easeOutBounce');                }            });        }           
                      首页              我的订单              我的购物车              退出

      
查看更多关于导航菜单底部滑动条跟随效果_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114192