jQuery横向彩色手风琴菜单

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

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

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