"
Team:KAIST Korea/menu
From 2012.igem.org
(Difference between revisions)
| Line 1: | Line 1: | ||
<html lang="en"> | <html lang="en"> | ||
| - | + | <head> | |
<style type="text/css"> | <style type="text/css"> | ||
a{ | a{ | ||
| Line 10: | Line 10: | ||
} | } | ||
.container { | .container { | ||
| - | + | width:600px; | |
| - | position: | + | position:relative; |
| - | top: | + | top: 230px; |
| - | + | left: 220px; | |
z-index:100; | z-index:100; | ||
margin:0 auto; | margin:0 auto; | ||
| Line 22: | Line 22: | ||
} | } | ||
.content{ | .content{ | ||
| - | width: | + | width:600px; |
position:relative; | position:relative; | ||
} | } | ||
| Line 42: | Line 42: | ||
overflow:hidden; | overflow:hidden; | ||
background:#fff; | background:#fff; | ||
| - | opacity:0. | + | opacity:0.6; |
text-align:center; | text-align:center; | ||
height:100%; | height:100%; | ||
| Line 107: | Line 107: | ||
padding:0; | padding:0; | ||
} | } | ||
| + | |||
html,body { | html,body { | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
} | } | ||
| + | |||
table { | table { | ||
border-collapse:collapse; | border-collapse:collapse; | ||
border-spacing:0; | border-spacing:0; | ||
} | } | ||
| + | |||
fieldset,img { | fieldset,img { | ||
border:0; | border:0; | ||
} | } | ||
| + | |||
input{ | input{ | ||
border:1px solid #b0b0b0; | border:1px solid #b0b0b0; | ||
| Line 124: | Line 128: | ||
width:190px; | width:190px; | ||
} | } | ||
| + | |||
address,caption,cite,code,dfn,th,var { | address,caption,cite,code,dfn,th,var { | ||
font-style:normal; | font-style:normal; | ||
font-weight:normal; | font-weight:normal; | ||
} | } | ||
| + | |||
ol,ul { | ol,ul { | ||
list-style:none; | list-style:none; | ||
} | } | ||
| + | |||
caption,th { | caption,th { | ||
text-align:left; | text-align:left; | ||
} | } | ||
| + | |||
h1,h2,h3,h4,h5,h6 { | h1,h2,h3,h4,h5,h6 { | ||
font-size:100%; | font-size:100%; | ||
font-weight:normal; | font-weight:normal; | ||
} | } | ||
| + | |||
q:before,q:after { | q:before,q:after { | ||
content:''; | content:''; | ||
} | } | ||
| + | |||
abbr,acronym { | abbr,acronym { | ||
border:0; | border:0; | ||
} | } | ||
</style> | </style> | ||
| - | + | </head> | |
| - | + | <body> | |
| - | + | <div class="container"> | |
| - | + | <ul id="sti-menu" class="sti-menu"> | |
| - | + | <li data-hovercolor="#37c5e9"> | |
| - | + | <a href="https://2012.igem.org/Team:KAIST_Korea/home"> | |
| - | + | <h2 data-type="mText" class="sti-item">HOME</h2> | |
| - | + | <h3 data-type="sText" class="sti-item">introduction</h3> | |
| - | + | <span data-type="icon" class="sti-icon sti-icon-home sti-item"></span> | |
| - | + | </a> | |
| - | + | </li> | |
| - | + | <li data-hovercolor="#ff395e"> | |
| - | + | <a href="#"> | |
| - | + | <h2 data-type="mText" class="sti-item">TEAM</h2> | |
| - | + | <h3 data-type="sText" class="sti-item">KAIST/members/</br>gallery</h3> | |
| - | + | <span data-type="icon" class="sti-icon sti-icon-team sti-item"></span> | |
| - | + | </a> | |
| - | + | </li> | |
| - | + | <li data-hovercolor="#57e676"> | |
| - | + | <a href="#"> | |
| - | + | <h2 data-type="mText" class="sti-item">PART</h2> | |
| - | + | <h3 data-type="sText" class="sti-item">bio bricks/about bricks</h3> | |
| - | + | <span data-type="icon" class="sti-icon sti-icon-part sti-item"></span> | |
| - | + | </a> | |
| - | + | </li> | |
| - | + | <li data-hovercolor="#d869b2"> | |
| - | + | <a href="#"> | |
| - | + | <h2 data-type="mText" class="sti-item">PROJECT</h2> | |
| - | + | <h3 data-type="sText" class="sti-item">background/results/</br>future plan/modeling</h3> | |
| - | + | <span data-type="icon" class="sti-icon sti-icon-project sti-item"></span> | |
| - | + | </a> | |
| - | + | </li> | |
| - | + | <li data-hovercolor="#ffdd3f"> | |
| - | + | <a href="#"> | |
| - | + | <h2 data-type="mText" class="sti-item">NOTEBOOK</h2> | |
| - | + | <h3 data-type="sText" class="sti-item">protocol/labnote/</br>overview</h3> | |
| - | + | <span data-type="icon" class="sti-icon sti-icon-note sti-item"></span> | |
| - | + | </a> | |
| - | + | </li> | |
| - | + | <li data-hovercolor="#d4d5d4"> | |
| - | + | <a href="#"> | |
| - | + | <h2 data-type="mText" class="sti-item">PLUS</h2> | |
| - | + | <h3 data-type="sText" class="sti-item">safety/attr1/attr2</h3> | |
| - | + | <span data-type="icon" class="sti-icon sti-icon-attr 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/jquery/1.6.2/jquery.min.js"></script> | ||
| Line 534: | Line 524: | ||
})(jQuery); | })(jQuery); | ||
</script> | </script> | ||
| - | + | <script type="text/javascript"> | |
| - | + | $(function() { | |
| - | + | $('#sti-menu').iconmenu({ | |
| - | + | animMouseenter : { | |
| - | + | 'mText' : {speed : 200, easing : 'easeOutExpo', delay : 0, dir : 1}, | |
| - | + | 'sText' : {speed : 600, easing : 'easeOutExpo', delay : 400, dir : 1}, | |
| - | + | 'icon' : {speed : 200, easing : 'easeOutExpo', delay : 0, dir : 1} | |
| - | + | }, | |
| - | + | animMouseleave : { | |
| - | + | 'mText' : {speed : 200, easing : 'easeInExpo', delay : 150, dir : 1}, | |
| - | + | 'sText' : {speed : 200, easing : 'easeInExpo', delay : 0, dir : 1}, | |
| - | + | 'icon' : {speed : 200, easing : 'easeInExpo', delay : 300, dir : 1} | |
| - | + | } | |
| - | + | }); | |
| - | + | }); | |
| - | + | ||
</script> | </script> | ||
| - | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 00:23, 19 August 2012
