Team:AUC TURKEY

From 2014hs.igem.org

(Difference between revisions)
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>
-
</div>
 

Revision as of 12:40, 11 June 2014

Back to top Take a Tour




sdasd