jquery 封装 导航栏。

 

 如图，

$.extend({

        nav:function(param,dom){

            var len = param.data.length;

            var w = param.w || 50;

            var h = param.h || 50;

            var size = param.size || 12;

            var listStyle = {

                    display:'inline-block',

                    width:w+'px',marginRight:'10px',

                    textAlign:'center',

                    height:h+'px',

                    lineHeight:h+'px',

                    cursor:'pointer',

                    fontSize:size+'px'

                };

            var bStyle = {

                position:'absolute',

                width:w+'px',

                height:'2px',

                background:'red',

                bottom:'0px',

                left:0,

                transition:'all 0.2s'

            }

            $(dom).css({position:'relative'});

            var ul = $("<ul id='nav_wrapper'></ul>");

            var bBottom = $("<p class='bBottom'></p>");

                bBottom.css(bStyle);

            $(dom).append(bBottom);

            for(var i = 0; i < len ; i++){

                var li = $("<li class='nav-list'></li>");

                    $(li).attr('data-pos',i*w+(i*10)+"px")

                    $(li).css(listStyle)

                    $(li).text(param.data[i]);

                    $(li).on('click',function(e){

                        $('.bBottom').css('left',$(e.target).attr('data-pos'));

                    })

                $(ul).append($(li));

            };

            $(dom).append($(ul));

        }

    });

    $.nav({

        data:['aa','bb','cc'],

        w:100,

        h:60,

        size:20

    },'#nav');

    ;