jQuery横向彩色手风琴菜单

本文介绍一款手风琴菜单效果，当鼠标滑动到菜单上时，该菜单会展开，背景会变成彩色并且高亮。

分类：选项卡/滑动门 > 滑动手风琴难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先我们在#centerwell放置多个菜单

<ul id="centerwell">
    <li id="behance">
        <h3>
            <a href="http://www.sucaihuo.com/" target="_blank">
                Behance公司
            </a>
        </h3>
        <p>
            看看我的投资组合,别想,请让我知道。
        </p>
    </li>
    <li id="flicker">
        <h3>
            <a href="http://www.sucaihuo.com/js/250.html" target="_blank">
                Flicker
            </a>
        </h3>
        <p>
            看看我一直与我的相机。
        </p>
    </li>
    <li id="linkedin">
        <h3>
            <a href="http://www.sucaihuo.com/js/250.html" target="_blank">
                LinkedIn
            </a>
        </h3>
        <p>
            我总是想要新连接。
        </p>
    </li>
    <li id="facebook">
        <h3>
            <a href="http://www.sucaihuo.com/js/250.html" target="_blank">
                Facebook
            </a>
        </h3>
        <p>
            我必须承认我每天至少检查一次。
        </p>
    </li>
    <li id="twitter">
        <h3>
            <a href="http://www.sucaihuo.com/js/250.html" target="_blank">
                Twitter
            </a>
        </h3>
        <p>
            我在这里一个偷窥狂,但当我说点什么
        </p>
    </li>
    <li id="resume">
        <h3>
            <a href="http://www.sucaihuo.com/js/250.html" target="_blank">
                Resume
            </a>
        </h3>
        <p>
            下载PDF格式。引用给定的要求。
        </p>
    </li>
    <li id="email">
        <h3>
            <a href="http://www.sucaihuo.com/js/250.html">
                Email
            </a>
        </h3>
        <p>
            pk@ch3mical.com
        </p>
    </li>
    <li id="contact">
        <h3>
            <a href="http://www.sucaihuo.com/js/250.html" target="_blank">
                Contact
            </a>
        </h3>
        <p>
            电话:13851435593
            <br>
            地点:底特律,MI
        </p>
    </li>
</ul>

引入样式和jQuery库

<link rel="stylesheet" href="css/ch3mical.css">
<script src="js/jquery.min.js"></script>

js/ch3mical.js

$(function() {
    var $centerwell_first = $('#centerwell li:first');
    $centerwell_first.animate({width: '318px'}, 300);
    $centerwell_first.find('h3').animate({backgroundPosition: '-72px'}, 300);

    $('#centerwell li').click(function() {
        window.open($(this).find('a').attr('href'));
    });

    $('#centerwell li').mouseenter(function() {
        if (!$(this).is(':animated')) {
            $(this).animate({width: '318px'}, 300).siblings().animate({width: '72px'}, 300);
            $(this).find('h3').animate({backgroundPosition: '-72px'}, 300).parent().siblings().find('h3').animate({backgroundPosition: '0px'}, 300);
        }
    });
});