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">
+
<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>
+
<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

KAIST Korea 2012 iGEM