Team:KAIST Korea/home
From 2012.igem.org
(Difference between revisions)
Line 3: | Line 3: | ||
<head> | <head> | ||
<style> | <style> | ||
+ | *{ | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | body{ | ||
+ | background:#222; | ||
+ | font-family:"Trebuchet MS", Helvetica, sans-serif; | ||
+ | font-size:15px; | ||
+ | color: #fff; | ||
+ | text-transform:uppercase; | ||
+ | overflow-x:hidden; | ||
+ | } | ||
+ | |||
+ | ul.oe_menu{ | ||
+ | list-style:none; | ||
+ | position:relative; | ||
+ | margin:30px 0px 0px 40px; | ||
+ | width:300px; | ||
+ | float:left; | ||
+ | clear:both; | ||
+ | } | ||
+ | ul.oe_menu > li{ | ||
+ | width:91px; | ||
+ | height:36px; | ||
+ | padding:auto; | ||
+ | float:left; | ||
+ | position:relative; | ||
+ | } | ||
+ | ul.oe_menu > li > a{ | ||
+ | display:block; | ||
+ | background-color:#101010; | ||
+ | color:#aaa; | ||
+ | text-decoration:none; | ||
+ | font-weight:bold; | ||
+ | font-size:12px; | ||
+ | width:90px; | ||
+ | height:36px; | ||
+ | text-shadow:0px 0px 1px #000; | ||
+ | opacity:0.8; | ||
+ | } | ||
+ | ul.oe_menu > li > a:hover, | ||
+ | ul.oe_menu > li.selected > a{ | ||
+ | background:#fff; | ||
+ | color:#101010; | ||
+ | opacity:1.0; | ||
+ | } | ||
+ | .oe_wrapper ul.hovered > li > a{ | ||
+ | background:#fff; | ||
+ | text-shadow:0px 0px 1px #FFF; | ||
+ | } | ||
+ | ul.oe_menu div{ | ||
+ | position:absolute; | ||
+ | left:0px; | ||
+ | background:#fff; | ||
+ | width:268px; | ||
+ | height:36px; | ||
+ | padding:2px; | ||
+ | display:none; | ||
+ | } | ||
+ | ul.oe_menu div ul li a{ | ||
+ | text-decoration:none; | ||
+ | color:#222; | ||
+ | padding:2px 2px 2px 4px; | ||
+ | margin:2px; | ||
+ | display:block; | ||
+ | font-size:12px; | ||
+ | } | ||
+ | ul.oe_menu div ul.oe_full{ | ||
+ | width:100%; | ||
+ | } | ||
+ | ul.oe_menu div ul li a:hover{ | ||
+ | background:#000; | ||
+ | color:#fff; | ||
+ | } | ||
+ | ul.oe_menu li ul{ | ||
+ | list-style:none; | ||
+ | float:left; | ||
+ | width: 90px; | ||
+ | margin-right:10px; | ||
+ | } | ||
+ | |||
#main | #main | ||
{ | { | ||
Line 28: | Line 109: | ||
<body> | <body> | ||
- | + | <div id="main"> | |
- | + | <a href="https://2012.igem.org/Team:KAIST_Korea/enter"><img id="main-logo" src="https://static.igem.org/mediawiki/2012/5/59/Logopart_Kaist.png"/></a> | |
<img id="main-img" src="https://static.igem.org/mediawiki/2012/6/61/Home_kaist_background.png"/> | <img id="main-img" src="https://static.igem.org/mediawiki/2012/6/61/Home_kaist_background.png"/> | ||
+ | <div class="oe_wrapper"> | ||
+ | <ul id="oe_menu" class="oe_menu"> | ||
+ | <li><a href="">Home</a> | ||
+ | <div> | ||
+ | <ul> | ||
+ | <li><a href="#">2012 iGEM</a></li> | ||
+ | </ul> | ||
+ | <ul> | ||
+ | <li><a href="#">KAIST KOREA</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li><a href="">Team</a> | ||
+ | <div style="left:-91px;"><!-- -112px --> | ||
+ | <ul> | ||
+ | |||
+ | <li><a href="#">Team Profile</a></li> | ||
+ | </ul> | ||
+ | <ul> | ||
+ | <li><a href="#">Gallery</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li><a href="">Part</a> | ||
+ | <div style="left:-182px;"> | ||
+ | <ul> | ||
+ | <li><a href="#">Bio Brick</a></li> | ||
+ | </ul> | ||
+ | <ul> | ||
+ | <li><a href="#">About Bricks</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
</div> | </div> | ||
+ | </div> | ||
+ | <!-- The JavaScript --> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | var $oe_menu = $('#oe_menu'); | ||
+ | var $oe_menu_items = $oe_menu.children('li'); | ||
+ | |||
+ | $oe_menu_items.bind('mouseenter',function(){ | ||
+ | var $this = $(this); | ||
+ | $this.addClass('slided selected'); | ||
+ | $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){ | ||
+ | $oe_menu_items.not('.slided').children('div').hide(); | ||
+ | $this.removeClass('slided'); | ||
+ | }); | ||
+ | }).bind('mouseleave',function(){ | ||
+ | var $this = $(this); | ||
+ | $this.removeClass('selected').children('div').css('z-index','1'); | ||
+ | }); | ||
+ | |||
+ | $oe_menu.bind('mouseenter',function(){ | ||
+ | var $this = $(this); | ||
+ | $this.addClass('hovered'); | ||
+ | }).bind('mouseleave',function(){ | ||
+ | var $this = $(this); | ||
+ | $this.removeClass('hovered'); | ||
+ | $oe_menu_items.children('div').hide(); | ||
+ | }) | ||
+ | }); | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 20:57, 18 August 2012