以下是 jQuery左右伸缩导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/ch3mical.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" charset="utf-8"> </script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/ch3mical.js" charset="utf-8"> </script>
<title>jQuery左右伸缩导航</title>
</head>
<body>
<div id="container">
<h1>Test</h1>
<ul id="centerwell">
<li id="behance">
<h3><a href="#" 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><!-- centerwell -->
<div id="content">
<div id="primary_content">
<h2 class="morph">Paul Kelley</h2>
<span class="title current">
Creative Director / Art Director /
Designer
</span>
<h3 class="morph">Biography</h3>
<p>
Paul is currently an Associate Creative Director with MRM Worldwide
where he brings his 15-plus years of digital and interactive
experience to the table. An experienced team leader and designer,
Paul’s strengths lay in concepting, branding, strategy, team
leadership, execution and mentoring. <br>
<br>
His curiosity and enthusiasm for the medium encourage him to push
the boundaries and discover new possibilities and technologies.
Paul’s attention to detail, perseverance and dedication are what
allow him stand out from the crowd.
</p>
<h3 class='morph'>Education</h3>
<span class="location">University of Michigan - Ann Arbor, MI</span>
<span class="title">Bachelor of Fine Arts, Graphic Design</span>
<h3 class='morph'>Experience</h3>
<ol id="positions">
<li>
<h5>MRM Worldwide</h5>
<em class="title">Associate Creative Director</em>
<span class="date">2010 - </span>
<p>
With MRM I’ve lead teams from the pitch to the end product,
winning accounts and creating strong relationships with new
clients along the way. Though my daily duties vary, I’m never
afraid to get my hands dirty and do whatever it takes to make
sure our clients and our departments goals are accomplished.
</p>
</li>
<li>
<h5>Wunderman Team Detroit</h5>
<em class="title">VP, Associate Creative Director</em>
<span class="date">2005 - 2010</span>
<p>
My time at Team Detroit gave me the opportunity to excel and
succeed in many different areas such as art direction, design,
execution and team leadership rolls. My involvement with our
social media team as a creative lead has made me an invaluable
resource of knowledge.
</p>
</li>
<li>
<h5>Avenue A / Razorfish, Chicago, IL</h5>
<em class="title">Senior Art Director</em> <span class="date">
2003 - 2005
</span>
<p>
At Razorfish I earned my chops as an Art Director concepting
and executing interactive web site designs and Flash
animations as well collaborative work, company research,
client meetings, and creative presentations.
</p>
</li>
<li>
<h5>Three Mountain Group, Chicago, IL</h5>
<em class="title">Senior Art Director</em><span class="date">
2001
- 2003
</span>
<p>
Responsibilities: Leading creative responsibilities for
national accounts, concepting and creating interactive web site
designs, animations and front end HTML.
</p>
</li>
<li>
<h5>Rare Medium Inc., Detroit, MI</h5>
<em class="title">Senior Designer</em> <span class="date">
1999 - 2001
</span>
</li>
</ol>
</div>
<div id="secondary_content">
<h5 class="morph_alt">Skill set</h5>
<ul>
<li>
<h6>Creative Direction</h6>
<p>
With my experience I understand the struggles and intentions
of those I manage as well as those I am encouraging to grow.
</p>
</li>
<li>
<h6>Design</h6>
<p>
This is what gets me out of bed in the morning. Being
presented with a problem and finding a solution to that
problem as well as everything that happens in between.
</p>
</li>
<li>
<h6>Expertise</h6>
<p>
Concepting, Branding, Strategy, Mobile, Execution,
Mentoring, Typography, Color Theory, Design Layout, Print &
Web Production, Marketing/Advertising, Project Estimates and
Budget Management.
</p>
</li>
<li>
<h6>Photography</h6>
<p>
This began as an outlet for me many years ago and has become
a large part of who I am. I can usually be found taking
photos, looking at photos or reading about photos in my
spare time.
</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS代码(ch3mical.js):
$(document).ready(function(){
//BUILD IN $('#container h1').css("opacity","0");
$('#primary_content').css("opacity","0");
$('#centerwell').css("width","0");
var sch = $('#secondary_content').height();
$('#secondary_content').css("height","0");
$('#secondary_content').css("opacity","0");
$('#container h1').animate({
'opacity':'0.01'}
,500,function(){
$('#centerwell').animate({
width:'100%'}
,700,function(){
$('#primary_content').animate({
'opacity':'1'}
,300,function(){
$('#secondary_content').animate({
'height':sch,'opacity':'1'}
,300,function(){
$('#container h1').stop().animate({
opacity:"1"}
);
}
)}
)}
)}
) // EVENTS $('#centerwell li').click(function(){
window.open($(this).find('a').attr('href'));
}
);
$('#centerwell li').hover(function(){
$('#content,h1').stop().animate({
opacity:".2"}
);
$('.morph').stop().animate({
'color':'#9EAEBE'}
,400);
$('.morph_alt').stop().animate({
'color':'#9EAEBE'}
,400);
$(this).stop().animate({
width:"318px"}
,300,function(){
}
) $(this).find('h3').stop().animate({
backgroundPosition:"-72px"}
,300,function(){
}
)}
,function(){
$('.morph').stop().animate({
'color':'#00aaf0'}
,400);
$('.morph_alt').stop().animate({
'color':'#00aaf0'}
,400);
$('#content,h1').stop().animate({
opacity:"1"}
);
$(this).stop().animate({
width:"72px"}
,300,function(){
}
) $(this).find('h3').stop().animate({
backgroundPosition:"0px"}
,300,function(){
}
)}
)}
);
CSS代码(ch3mical.css):
@font-face{font-family:GeogrotesqueReg;src:url('../font/geogrotesque/Geogtq-Rg.otf');}
@font-face{font-family:GeogrotesqueLight;src:url('../font/geogrotesque/Geogtq-Lg.otf');}
@font-face{font-family:GeogrotesqueMedium;src:url('../font/geogrotesque/Geogtq-Md.otf');}
@font-face{font-family:GeogrotesqueSemiBold;src:url('../font/geogrotesque/Geogtq-Sb.otf');}
@font-face{font-family:GeogrotesqueBold;src:url('../font/geogrotesque/Geogtq-Bd.otf');}
body{background:#1f2327 url(footer.png) repeat-x bottom left;min-width:1036px;font-family:"Helvetica Neue",Arial,sans-serif;}
#container h1{display:block;width:210px;height:104px;margin-left:130px;background:url(logo.png);text-indent:-9999px;}
/*#container h1 a:hover{background-position-y:-104px;}
*/
#centerwell{position:relative;height:177px;background:#3d464e;overflow:hidden;}
#centerwell li{position:relative;width:72px;height:177px;float:left;border-right:#3d464e 1px solid;background:white;overflow:hidden;cursor:pointer;}
#centerwell h3{position:absolute;top:0;left:0;text-indent:-9999px;width:72px;height:177px;}
#centerwell p{width:215px;margin-left:85px;margin-top:50px;padding-top:40px;color:#5f5f5f;font-size:15px;line-height:18px;font-family:GeogrotesqueMedium,Helvetica,Arial,sans-serif;letter-spacing:0pt;}
/* ADDING IMAGES PER SECTIONS FOR GLOBAL NAV*/
#behance h3{background:url(behance_btn.gif) no-repeat white;}
#behance p{background:url(behance_over_bg.gif) no-repeat;}
#flicker h3{background:url(flickr_btn.gif) no-repeat;}
#flicker p{background:url(flickr_over_bg.gif) no-repeat;}
#linkedin h3{background:url(linkedin_btn.gif) no-repeat;}
#linkedin p{background:url(linkedin_over_bg.gif) no-repeat;}
#facebook h3{background:url(facebook_btn.gif) no-repeat;}
#facebook p{background:url(facebook_over_bg.gif) no-repeat;}
#twitter h3{background:url(twitter_btn.gif) no-repeat;}
#twitter p{background:url(twitter_over_bg.gif) no-repeat;}
#resume h3{background:url(resume_btn.gif) no-repeat;}
#resume p{background:url(resume_over_bg.gif) no-repeat;}
#email h3{background:url(email_btn.gif) no-repeat;}
#email p{background:url(email_over_bg.gif) no-repeat;}
#contact h3{background:url(contact_btn.gif) no-repeat;}
#contact p{background:url(contact_over_bg.gif) no-repeat;}
/* END */
#behance{margin-left:206px;}
#content{position:relative;width:790px;padding-bottom:135px;}
#primary_content{padding-left:205px;padding-top:30px;padding-right:40px;width:325px;}
#primary_content p,#primary_content span,#primary_content em{color:#657381;font-size:12px;line-height:16px;letter-spacing:1px;}
#primary_content h2{line-height:33px;text-decoration:none;font-size:35px;margin-bottom:5px;font-family:GeogrotesqueLight,Helvetica,Arial,sans-serif;letter-spacing:1px;}
/*#primary_content h2 a{}
*/
#primary_content span.title.current{display:block;font-size:15px;margin-bottom:60px;font-family:GeogrotesqueReg,Helvetica,Arial,sans-serif;}
#primary_content h2 a,#primary_content h1,#primary_content h2,#primary_content h3{color:#00aaf0;}
#primary_content h3{margin-top:38px;margin-left:-213px;padding-left:3px;border-left:#262b30 210px solid;font-size:18px;font-family:GeogrotesqueReg,Helvetica,Arial,sans-serif;letter-spacing:1px;margin-bottom:12px;}
#primary_content h5,#primary_content span.location{display:block;color:#9eaebe;font-family:GeogrotesqueMedium,Helvetica,Arial,sans-serif;font-size:13px;letter-spacing:1px;}
#primary_content span.title{}
#positions li{position:relative;margin-bottom:20px;}
#positions li em{display:block;margin-bottom:4px;}
#positions li span.date{position:absolute;color:#373e46;font-family:GeogrotesqueReg,Helvetica,Arial,sans-serif;top:-1px;left:-90px;width:85px;}
#secondary_content{position:absolute;top:0;right:0;width:190px;background:#262b30;padding-top:144px;padding-left:15px;padding-right:15px;padding-bottom:40px;color:#9eaebe;font-size:11px;overflow:hidden;}
#secondary_content h5{color:#00aaf0;font-size:18px;font-family:GeogrotesqueReg,Helvetica,Arial,sans-serif;margin-bottom:8px;letter-spacing:1px;}
#secondary_content ul li h6{color:#9eaebe;font-size:13px;font-family:GeogrotesqueReg,Helvetica,Arial,sans-serif;letter-spacing:1px;line-height:23px;}
#secondary_content ul li p{color:#657381;line-height:15px;margin-bottom:15px;}
#client_list{font-size:18px;letter-spacing:1px;font-family:GeogrotesqueReg,Helvetica,Arial,sans-serif;margin-bottom:12px;margin-top:40px;color:#00aaf0;}
#client_names{float:left;width:200px;margin:0;padding:0;list-style:none;color:#657381;line-height:16px;margin-bottom:10px;}
#client_names li{float:left;width:10em;margin:0;padding:0;}
#thecssawards{position:absolute;top:20px;right:0px;z-index:555;}
#thecssawards a{width:69px;height:105px;text-indent:-8000px;display:block;background:url(award_day_black.png) no-repeat;}
分享到QQ
分享到微博
微信扫一扫
