Template:Team:KIT-Kyoto/navi

From 2014.igem.org

(Difference between revisions)
 
(98 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<script type="text/javascript">
+
<script style="text/javascript">
-
$('#navi li')
+
$(function() {
-
.each(function(){
+
$('#nav5 li')
-
var $(".navi-team") = $(this);
+
.each(function(){
-
if ($(".navi-team").has('a')) {
+
$(this).css('margin-left', '-230px')
-
$(".navi-team").find('a')
+
})
-
.clone()
+
.hover(
-
.find('>img').attr('src', function(){
+
function(){
-
return $(this).attr('src').replace('b/b4/KIT_ABOUT_off', '0/0d/KIT_ABOUT_on')
+
$(this).stop().animate({
-
})
+
'marginLeft':'-173px'
-
.end()
+
},'fast','swing');
-
.css('width', 0)
+
},
-
.appendTo($li)
+
function () {
-
}
+
$(this).stop().animate({
-
})
+
'marginLeft':'-230px'
-
.hover(
+
},'slow','swing');
-
function(e) {
+
}
-
$(this).find('a').eq(1).stop()
+
);
-
.animate({width:$(this).find('img').width()}, {duration:300, easing:'easeOutExpo'});
+
});
-
},
+
-
function(e) {
+
-
$(this).find('a').eq(1).stop()
+
-
.animate({width:0}, {duration:300, easing:'easeInCubic'});
+
-
}
+
-
);
+
</script>
</script>
 +
<style type="text/css">
 +
div#SideMenu{
 +
top:0;
 +
bottom:0;
 +
margin-right:0;
 +
width:250px;
 +
height:100%;
 +
position:fixed;
 +
background-color: rgba(100,100,100,0.7);
 +
 +
/* IE6 */
 +
_position:absolute;
 +
_top:expression(eval(document.documentElement.scrollTop+30)+'px');
 +
}
 +
 +
div.active{
 +
position:relative;
 +
margin-top:0px;
 +
border-right:3px solid lime;
 +
width:227px;
 +
height:21px;
 +
text-align:right;
 +
text-transform:uppercase;
 +
background-color:rgba(0,0,0,0.5);
 +
padding:3px 10px;
 +
margin:0;
 +
z-index:10;
 +
}
 +
 +
ul.submenu{
 +
position:relative;
 +
margin-top:0px;
 +
margin-left:-20px;
 +
width:250px;
 +
text-align:right;
 +
z-index:10;
 +
background-color:rgba(300,300,300,0.2);
 +
border-right:solid 2px rgba(300,300,300,0.2);
 +
border-bottom:solid 2px rgba(300,300,300,0.2);
 +
}
 +
ul.submenu li{
 +
position:relative;
 +
margin:0px;
 +
padding:3px 10px;
 +
list-style:none;
 +
text-decoration:none;
 +
font-family:'Lucida Grande',
 +
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 +
Meiryo, メイリオ, sans-serif;
 +
font-size:13px;
 +
-moz-transition-duration: 0.5s;
 +
-webkit-transition: 0.5s;
 +
transition-duration: 0.5s;
 +
z-index:10;
 +
}
 +
ul.submenu li:hover{
 +
background-color:rgba(0,300,100,0.3);
 +
}
 +
 +
ul.submenu li a{
 +
text-decoration:none;
 +
display:block;
 +
text-align:right;
 +
}
 +
 +
ul.submenu li a:link,ul.submenu li a:active ,ul.submenu li a:visited{
 +
color: #00e600;
 +
}
 +
 +
ul.submenu li a:hover {
 +
color: #00ff00;
 +
}
 +
 +
 +
ul.submenu ul.slidemenu{
 +
background-color:rgba(0,0,0,0.2);
 +
margin-top:0;
 +
margin-right:20px;
 +
font-size:x-small;
 +
border-bottom:1px solid #ffa200;
 +
}
 +
 +
ul.submenu ul.slidemenu li{
 +
border-right:solid 1px #ffa200;
 +
}
 +
 +
ul.slidemenu li a{
 +
text-align:left;
 +
text-decoration:none;
 +
}
 +
ul#nav5 {
 +
list-style:none;
 +
padding:0;
 +
margin:0;
 +
position:relative;
 +
z-index:10;
 +
}
 +
.menuimg img{
 +
margin-bottom:-1px;
 +
}
 +
.menuimg{
 +
width:400px;
 +
height:21px;
 +
text-align:right;
 +
background-color:rgba(0,0,0,0.5);
 +
padding:3px 10px;
 +
margin:0;
 +
font-size:15px;
 +
text-transform:uppercase;
 +
}
 +
 +
.menuimg a{
 +
display:block;
 +
font-family:'Lucida Grande',
 +
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
 +
Meiryo, メイリオ, sans-serif;
 +
 +
}
 +
.menuimg a:link,.menuimg a:active,.menuimg a:hover,.menuimg a:visited,.active a:link,.active a:hover,.active a:active,.active a:visited{
 +
color:#ffffff;
 +
text-decoration: none;
 +
}
 +
 +
 +
.menuimg:hover{
 +
border-right:3px solid lime;
 +
}
 +
 +
#close{
 +
position:fixed;
 +
z-index:10;
 +
top:14px;
 +
left:215px;
 +
height:20px;
 +
width:35px;
 +
}
 +
#close a{
 +
display:block;
 +
height:20px;
 +
width:35px;
 +
background-image:url("https://static.igem.org/mediawiki/2014/6/6d/Kit_close.png");
 +
background-color:rgba(0,0,0,0.4);
 +
background-size:contain;
 +
}
 +
 +
#close a:hover{
 +
background-color:rgba(0,0,0,0.1);
 +
}
 +
 +
#close span{
 +
visibility:hidden;
 +
}
 +
</style>

Latest revision as of 18:30, 17 October 2014

Retrieved from "http://2014.igem.org/Template:Team:KIT-Kyoto/navi"