jquery实现菜单导航条点击选择多种动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现菜单导航条点击选择多种动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        body {
    	margin: 0;
    	padding: 0;
    }
    h1 {
    	text-align: center;
    	font-size: 16px;
    	margin-top: 10px;
    }
    .box {
    	background-color: #202932;
    	margin: 50px 200px;
    }
    .f-nav {
    	height: 60px;
    	overflow: hidden;
    	transition: all 1s;
    	display: block;
    	position: relative;
    	padding: 0;
    	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
    	background-color: #202932;
    }
    .f-nav li {
    	padding: 0;
    	margin: 0;
    	float: left;
    	height: 60px;
    	line-height: 60px;
    	position: relative;
    	z-index: 100;
    	display: inline-block;
    	list-style-type: none;
    	width: 100px;
    	color: #fff;
    	text-align: center;
    	cursor: pointer;
    }
    .sideline {
    	position: absolute;
    	background-color: #208ff9;
    	left: 0;
    	top: 0;
    	color: #fff;
    	min-height: 30px;
    	z-index: 1;
    	height: 60px;
    	line-height: 60px;
    	display: inline-block;
    	list-style-type: none;
    	width: 100px;
    	color: #fff;
    	text-align: center;
    	cursor: pointer;
    }
    .f-nav li.active {
    	background-color: #208ff9;
    	color: #fff;
    }
    .f-nav li.fontNav {
    	background-color: #208ff9;
    	color: #fff;
    	animation: fontNav .8s;
    }
    .f-nav li.downNav {
    	background-color: #208ff9;
    	color: #fff;
    	animation: downNav .8s;
    }
    .f-nav li.leftNav {
    	background-color: #208ff9;
    	color: #fff;
    	animation: leftNav .8s;
    }
    .f-nav li.rightNav {
    	background-color: #208ff9;
    	color: #fff;
    	animation: rightNav .8s;
    }
    /*左边缘*/
    .f-nav li.edgeLeft {
    	background-color: #208ff9;
    	color: #fff;
    	animation: edgeLeft .8s;
    }
    /*右边缘*/
    .f-nav li.edgeRight {
    	background-color: #208ff9;
    	color: #fff;
    	animation: edgeRight .8s;
    }
    /*从中间变大*/
    .f-nav li.scaleChange {
    	background-color: #208ff9;
    	color: #fff;
    	animation: scaleChange .8s;
    }
     @keyframes scaleChange {
     0% {
     transform: scale(0);
    },  50% {
     transform: scale(.5);
    },  100% {
     transform: scale(1);
    }
    }
     @keyframes fontNav {
     0% {
     transform: translate(0, -100%);
    },  50% {
     transform: translate(0, -50%);
    },  100% {
     transform: translate(0, 0);
    }
    }
     @keyframes downNav {
     0% {
     transform: translate(0, 100%);
    },  50% {
     transform: translate(0, 50%);
    },  100% {
     transform: translate(0, 0);
    }
    }
     @keyframes leftNav {
     0% {
     transform: translate(-100%, 0%);
    },  50% {
     transform: translate(-50%, 0%);
    },  100% {
     transform: translate(0, 0);
    }
    }
     @keyframes rightNav {
     0% {
     transform: translate(100%, 0%);
    },  50% {
     transform: translate(50%, 0%);
    },  100% {
     transform: translate(0%, 0);
    }
    }
     @keyframes edgeLeft {
     0% {
     transform: translate(-100%, -100%);
    }
     100% {
     transform: translate(0%, 0%);
    }
    }
     @keyframes edgeRight {
     0% {
     transform: translate(100%, 100%);
    }
     100% {
     transform: translate(0%, 0%);
    }
    }
    </style>

</head>

<body>

    <h1>左右滚动</h1>
    <div class="box">
        <ul class="f-nav" id='f-nav'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>

    <h1>从上向下滚动</h1>
    <div class="box">
        <ul class="f-nav" id='f-nav2'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>

    <h1>从下向上滚动</h1>
    <div class="box">
        <ul class="f-nav" id='f-nav3'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>

    <h1>从左边缘向右边缘滚动</h1>
    <div class="box">
        <ul class="f-nav" id='f-nav4'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>



    <h1>从右边缘向左边缘滚动</h1>
    <div class="box">
        <ul class="f-nav" id='f-nav5'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>


    <h1>从中间变大至填满</h1>
    <div class="box">
        <ul class="f-nav" id='f-nav6'>
            <li>首页</li>
            <li>分页一</li>
            <li>分页二</li>
            <li>分页三</li>
            <li>分页四</li>
            <div class='sideline'></div>
        </ul>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
        (function($) {
    
    
        var methods = {
            init: function(options) {
                 var $this = $(this)
                var obj = $(this).data('tooltip').obj
    
    
                if(obj.textList){
                    $.each(obj.textList,function(index,value){
                        $this.append('<li>'+index+'</li>')
                    })
                }
    
    
                if (obj.width) {
                    $this.find('li').css('width', obj.width + 'px')
                    $this.find('.sideline').css('width', obj.width + 'px')
                }
    
     if (obj.height) {
        $this.css('height', obj.height + 'px')
                    $this.find('li').css('height', obj.height + 'px')
                    $this.find('li').css('line-height', obj.height +.........完整代码请登录后点击上方下载按钮下载查看