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);
}
});
});
标签：jQuery
