jQuery横向手风琴菜单

分类:代码 日期:

jQuery横向手风琴菜单

演 示 下 载

这是一个 jQuery 制作的横向手风琴菜单,当鼠标移动到某一项菜单上时,该菜单会展开,并变成彩色的。

使用方法

引入文件

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

HTML

<ul id="centerwell">
    <li id="behance">
        <h3><a href="//www.dowebok.com/" target="_blank">Behance</a></h3>
        <p>Take a look at my portfolio, let me know whatcha think. </p>
    </li>
    <li id="flicker">
        <h3><a href="#" target="_blank">Flicker</a></h3>
        <p>See what I've been up to with my camera.</p>
    </li>
    <li id="linkedin">
        <h3><a href="#" target="_blank">LinkedIn</a></h3>
        <p>Hit me up, I'm always looking to make new connections.</p>
    </li>
    <li id="facebook">
        <h3><a href="#" target="_blank">Facebook</a></h3>
        <p>I have to admit I check it at least once a day.</p>
    </li>
    <li id="twitter">
        <h3><a href="#" target="_blank">Twitter</a></h3>
        <p>I'm more of a voyeur here, but when I do say something ...</p>
    </li>
    <li id="resume">
        <h3><a href="#" target="_blank">Resume</a></h3>
        <p>Download in PDF format. References given upon request.</p>
    </li>
    <li id="email">
        <h3><a href="#">Email</a></h3>
        <p>pk@ch3mical.com</p>
    </li>
    <li id="contact">
        <h3><a href="#" target="_blank">Contact</a></h3>
        <p>Phone: 248 760 6301<br>
            Location: Detroit, MI</p>
    </li>
</ul>

JavaScript

$(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);
        }
    });
});
标签:
查看演示

下载本素材需消耗 50 积分

无法下载?立即反馈