0 Üye ve 1 Ziyaretçi konuyu incelemekte.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <title>Slide Down Box Menu with jQuery and CSS3</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" /> <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/><link rel="stylesheet" href="../../RelatedPosts/css/posts.css" type="text/css" media="screen"/><link rel="stylesheet" type="text/css" href="../../RelatedPosts/tipsy/stylesheets/tipsy.css" media="screen"/><script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7243260-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script> <style> body{ background:#333 url(bg.jpg) repeat top left; font-family:Arial; } span.reference{ position:fixed; left:10px; bottom:10px; font-size:12px; } span.reference a{ color:#aaa; text-transform:uppercase; text-decoration:none; text-shadow:1px 1px 1px #000; margin-right:30px; } span.reference a:hover{ color:#ddd; } ul.sdt_menu{ margin-top:150px; } h1.title{ text-indent:-9000px; background:transparent url(title.png) no-repeat top left; width:633px; height:69px; } </style> </head> <body> <div class="content"> <h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1> <ul id="sdt_menu" class="sdt_menu"> <li> <a href="#"> <img src="images/2.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">About me</span> <span class="sdt_descr">Get to know me</span> </span> </a> </li> <li> <a href="#"> <img src="images/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Portfolio</span> <span class="sdt_descr">My work</span> </span> </a> <div class="sdt_box"> <a href="#">Websites</a> <a href="#">Illustrations</a> <a href="#">Photography</a> </div> </li> <li> <a href="#"> <img src="images/3.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Inspiration</span> <span class="sdt_descr">Where ideas get born</span> </span> </a> </li> <li> <a href="#"> <img src="images/4.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Photos</span> <span class="sdt_descr">I like to photograph</span> </span> </a> </li> <li> <a href="#"> <img src="images/5.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Blog</span> <span class="sdt_descr">I write about design</span> </span> </a> </li> <li> <a href="#"> <img src="images/6.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Projects</span> <span class="sdt_descr">I like to code</span> </span> </a> <div class="sdt_box"> <a href="#">Job Board Website</a> <a href="#">Shopping Cart</a> <a href="#">Interactive Maps</a> </div> </li> </ul> </div> <div> <span class="reference"> <a href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/">back to the Codrops Tutorial</a> <a href="http://www.flickr.com/photos/arcticpuppy/sets/72157622090180990/">Images by tibchris</a> </span> </div><h3 id="relatedPosts"><< Other Posts</h3> <div id="rp_list" class="rp_list"> <a title="Minimalistic Slideshow Gallery" target="_blank" href="http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/"> <img src="../../RelatedPosts/images/related/1.jpg" alt=""/> </a> <a title="Flickr Photobar Gallery" target="_blank" href="http://tympanus.net/codrops/2010/06/10/flickr-photobar-gallery/"> <img src="../../RelatedPosts/images/related/2.jpg" alt=""/> </a> <a title="Fresh Sliding Thumbnails Gallery" target="_blank" href="http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/"> <img src="../../RelatedPosts/images/related/3.jpg" alt=""/> </a> <a title="Sliding Panel Photo Wall Gallery" target="_blank" href="http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/"> <img src="../../RelatedPosts/images/related/4.jpg" alt=""/> </a> <a title="Scrollable Thumbs Menu" target="_blank" href="http://tympanus.net/codrops/2010/05/10/scrollable-thumbs-menu/"> <img src="../../RelatedPosts/images/related/5.jpg" alt=""/> </a> </div> <!-- The JavaScript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script><script type="text/javascript" src="../../RelatedPosts/tipsy/javascripts/jquery.tipsy.js"></script> <script type="text/javascript"> $(function() { /** * for each menu element, on mouseenter, * we enlarge the image, and show both sdt_active span and * sdt_wrap span. If the element has a sub menu (sdt_box), * then we slide it - if the element is the last one in the menu * we slide it to the left, otherwise to the right */ $('#sdt_menu > li').bind('mouseenter',function(){ var $elem = $(this); $elem.find('img') .stop(true) .animate({ 'width':'170px', 'height':'170px', 'left':'0px' },400,'easeOutBack') .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'140px'},500,'easeOutBack') .andSelf() .find('.sdt_active') .stop(true) .animate({'height':'170px'},300,function(){ var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length){ var left = '170px'; if($elem.parent().children().length == $elem.index()+1) left = '-170px'; $sub_menu.show().animate({'left':left},200); } }); }).bind('mouseleave',function(){ var $elem = $(this); var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length) $sub_menu.hide().css('left','0px'); $elem.find('.sdt_active') .stop(true) .animate({'height':'0px'},300) .andSelf().find('img') .stop(true) .animate({ 'width':'0px', 'height':'0px', 'left':'85px'},400) .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'25px'},500); });$('#relatedPosts').toggle( function(){ $('#rp_list').animate({'bottom':'10px'},500); }, function(){ $('#rp_list').animate({'bottom':'-50px'},500); } ); $('#rp_list a').tipsy({gravity: 's'}); }); </script> <script src="http://tympanus.net/codrops/adpacks/demoad.js"></script> </body></html>
0 Yanıt
3837 Gösterim