Вы находитесь на странице: 1из 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.

dtd"> <html> <head> <title>Sukrut</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Elegant Accordion with jQuery and CSS3 " /> <meta name="keywords" content="jquery, slide out,accordion, css3, fadeou t, fadein, elegant, fancy, box shadow"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="scree n"/> <style> *{ margin:0; padding:0; } body{ font-family:Arial; background:#fff url(patrn.jpg) repeat top left; } a{ color:#444; } a:hover{ color:#999; } .title{ width:500px; height:152px; position:absolute; top:0px; left:0px; background:transparent url(title.png) no-repeat top left; } a.back{ background:transparent url(back.png) no-repeat top left; position:fixed; width:150px; height:27px; outline:none; bottom:0px; left:0px; } #content{ margin:0 auto; } .reference{ clear:both; top:300px; left:0px; position:absolute; text-align:right; width:400px; padding:20px; background-color:#fff; -moz-box-shadow:1px 3px 15px #ddd; -webkit-box-shadow:1px 3px 15px #ddd; box-shadow:1px 3px 15px #ddd;

} .reference p a{ text-transform:uppercase; text-shadow:1px 1px 1px #fff; color:#666; text-decoration:none; font-size:10px; } .reference p a:hover{ color:#333; } </style> </head> <body> <div id="content"> <a class="back" href="http://tympanus.net/codrops/2010/04/26/elegant -accordion-with-jquery-and-css3/"></a> <div class="title"></div> <div class="reference"> <p><a href="http://www.sukrutsystems.com/aboutus.html">Aboutus</ a> <p><a href="http://www.sukrutsystems.com/products.html">Products </a> <p><a href="http://www.sukrutsystems.com/solutions.html">Solutio ns</a> <p><a href="http://www.sukrutsystems.com/domains.html">Domains</ a> </div> <ul class="accordion" id="accordion"> <li class="bg1"> <div class="heading">Guler</div> <div class="bgDescription"></div> <div class="description"> <h2>Guler</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing e lit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation u llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <a href="#">more &rarr;</a> </div> </li> <li class="bg2"> <div class="heading">Phillips</div> <div class="bgDescription"></div> <div class="description"> <h2>Phillips</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit v oluptatem accusantium doloremque laudantium, totam rem aperiam

, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> <a href="#">more &rarr;</a> </div> </li> <li class="bg3"> <div class="heading">Diamanti</div> <div class="bgDescription"></div> <div class="description"> <h2>Diamanti</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing e lit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation u llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <a href="#">more &rarr;</a> </div> </li> <li class="bg4 bleft"> <div class="heading">Meiklejohn</div> <div class="bgDescription"></div> <div class="description"> <h2>Meiklejohn</h2> <p>Sed ut perspiciatis unde omnis iste natus error sit v oluptatem accusantium doloremque laudantium, totam rem aperiam , eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem qui a voluptas sit aspernatur aut odit aut fugit, sed quia consequu ntur magni dolores eos qui ratione voluptatem sequi nesciunt.</ p> <a href="#">more &rarr;</a> </div> </li> </ul> </div> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#accordion > li').hover( function () { var $this = $(this);

$this.stop().animate({'width':'480px'},500); $('.heading',$this).stop(true,true).fadeOut(); $('.bgDescription',$this).stop(true,true).slideDown(500) ; $('.description',$this).stop(true,true).fadeIn(); }, function () { var $this = $(this); $this.stop().animate({'width':'115px'},1000); $('.heading',$this).stop(true,true).fadeIn(); $('.description',$this).stop(true,true).fadeOut(500); $('.bgDescription',$this).stop(true,true).slideUp(700); } ); }); </script> </body> </html>