最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery横向彩色手风琴菜单

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-21 00:39浏览(1515)

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

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

jQuery横向彩色手风琴菜单
查看演示

加我微信,拉你进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);
        }
    });
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/250.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2