JQuery Study Notes— A small demo for Smooth Animated Menu

浏览数：36 / 时间：2015年06月09日

1. Before expanding:

2. coding:

<!DOCTYPE html>
<html>
<head>
    <title>Smooth Animated Menu</title>
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <style>
        body {
            background-color: #F3F3F3;
            font-family: "Lucida Grande", arial, sans-serif;
        }
        a{
            text-decoration:none;         
            color:#fff;
        }
        ul {
            /*width: 500px; Don't add properties of width and height to 'ul'
            height: 50px;*/
        }
        li {
            width: 100px;
            height: 50px;
            text-align: center;
            /*padding-top: 10px;*/
            float: left;
            overflow: hidden;
        }
        p{
            padding:0px 5px;
            
        }
        .subText {
            color: #191919;
            padding-top: 15px;
        }
        .green {
            background: #649e37 url("images/green-item-bg.jpg") no-repeat right top;
        }
        .yellow {
            background: #fbc701 url("images/yellow-item-bg.jpg") no-repeat right top;
        }
        .red {
            background: #c61e01 url("images/red-item-bg.jpg") no-repeat right top;
        }
        .blue {
            background: #008cb7 url("images/blue-item-bg.jpg") no-repeat right top;
        }
        .purple {
            background: #5121b3 url("images/purple-item-bg.jpg") no-repeat right top;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("a").click(function () {
                this.blur();
            });
            $("li").mouseover(function () {
                $(this).stop().animate({ height: '150px' }, { queue: false, duration: 600, easing: 'easeOutBounce' })
            });
            $("li").mouseout(function () {
                $(this).stop().animate({height:'50px'},{queue:false,duration:600,easing:'easeOutBounce'})
            })
        });
    </script>
</head>
<body>
    <p>Rollover a menu item to expand it.</p>
    <ul>
        <li class ="green">
            <p><a href="#">Home</a></p>
            <p class="subText">The front of page</p>
        </li>
        <li class="yellow">
            <p><a href="#">About</a></p>
            <p class="subText">More info</p>
        </li>
        <li class="red">
            <p><a href="#">Contact</a></p>
            <p class="subText">Get in touch</p>
        </li>
        <li class="blue">
            <p><a href="#">Submit</a></p>
            <p class="subText">Send us your stuff!</p>
        </li>
        <li class="purple">
            <p><a href="#">Terms</a></p>
            <p class="subText">Legal things</p>
        </li>
    </ul>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JQuery Study Notes— A small demo for Smooth Animated Menu