Team:AUC TURKEY
From 2014hs.igem.org
(Difference between revisions)
Edipunluer (Talk | contribs) |
Edipunluer (Talk | contribs) |
||
Line 1: | Line 1: | ||
{{AUC_TURKEY}} | {{AUC_TURKEY}} | ||
<html> | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8" /> | ||
+ | <meta name="description" content="Animated Text and Icon Menu with jQuery" /> | ||
+ | <meta name="keywords" content="jquery, menu, navigation, sliding, animation, icon" /> | ||
+ | <meta name="author" content="Codrops" /> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2014hs.igem.org/Team:AUC_TURKEY/style.css?action=raw&ctype=text/css" /> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2014hs.igem.org/Team:AUC_TURKEY/stimenu.css?action=raw&ctype=text/css" /> | ||
+ | <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' /> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css' /> | ||
+ | </head> | ||
<body> | <body> | ||
<p>sdasd</p> | <p>sdasd</p> | ||
+ | <div id="animatedmenu"> | ||
+ | <div class="container"> | ||
+ | <ul id="sti-menu" class="sti-menu"> | ||
+ | <li data-hovercolor="#37c5e9"> | ||
+ | <a href="#"> | ||
+ | <h2 data-type="mText" class="sti-item">Project</h2> | ||
+ | <h3 data-type="sText" class="sti-item">Story of a color wizard</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-care sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-hovercolor="#ff395e"> | ||
+ | <a href="#"> | ||
+ | <h2 data-type="mText" class="sti-item">Notebook</h2> | ||
+ | <h3 data-type="sText" class="sti-item">The day by day process</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-hovercolor="#57e676"> | ||
+ | <a href="#"> | ||
+ | <h2 data-type="mText" class="sti-item">Team</h2> | ||
+ | <h3 data-type="sText" class="sti-item">Hardworking guys</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-info sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-hovercolor="#d869b2"> | ||
+ | <a href="#"> | ||
+ | <h2 data-type="mText" class="sti-item">Human Practices</h2> | ||
+ | <h3 data-type="sText" class="sti-item">Let's show people what we got</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-family sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-hovercolor="#ffdd3f"> | ||
+ | <a href="#"> | ||
+ | <h2 data-type="mText" class="sti-item">Outreach</h2> | ||
+ | <h3 data-type="sText" class="sti-item">iGem all over the world</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> | ||
+ | <script type="text/javascript" src="https://2014hs.igem.org/Team:AUC_TURKEY/jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2014hs.igem.org/Team:AUC_TURKEY/jquery.iconmenu.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | $('#sti-menu').iconmenu({ | ||
+ | animMouseenter : { | ||
+ | 'mText' : {speed : 200, easing : 'easeOutExpo', delay : 250, dir : 1}, | ||
+ | 'sText' : {speed : 200, easing : 'easeOutExpo', delay : 0, dir : 1}, | ||
+ | 'icon' : {speed : 200, easing : 'easeOutExpo', delay : 500, dir : 1} | ||
+ | }, | ||
+ | animMouseleave : { | ||
+ | 'mText' : {speed : 200, easing : 'easeInExpo', delay : 250, dir : 1}, | ||
+ | 'sText' : {speed : 200, easing : 'easeInExpo', delay : 500, dir : 1}, | ||
+ | 'icon' : {speed : 200, easing : 'easeInExpo', delay : 0, dir : 1} | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
</html> | </html> | ||
- |
Revision as of 12:40, 11 June 2014
sdasd