Team:HZAU-China

From 2013.igem.org

(Difference between revisions)
Line 182: Line 182:
</html>
</html>
<!--- 底部 --->
<!--- 底部 --->
-
 
-
 
Line 190: Line 188:
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
 
+
<title>jquery动态导航菜单效果</title>
<style type="text/css" media="screen">
<style type="text/css" media="screen">
body{
body{
-
color:#FFFFFF
+
}
}
a{ color:#FFCC00;}
a{ color:#FFCC00;}
#menuBar{
#menuBar{
overflow:hidden;
overflow:hidden;
-
width:200px;
+
width:1000px;
height:250px;
height:250px;
background: transparent url(/jscss/demoimg/201303/bar.jpg) no-repeat scroll left top;
background: transparent url(/jscss/demoimg/201303/bar.jpg) no-repeat scroll left top;
margin:0 auto;
margin:0 auto;
-
border:0px solid #111;
+
border:10px solid #111;
}
}
#menuBar ul{
#menuBar ul{
-
width:380px;
+
width:1000px;
margin:0 auto;
margin:0 auto;
list-style-type: none;
list-style-type: none;
}
}
#menuBar ul li{
#menuBar ul li{
-
float:;
+
float:left;
-
padding-left:0px;
+
padding-right:30px;
}
}
#menuBar a{
#menuBar a{
-
width:200px;
+
width:170px;
-
height:200px;
+
height:160px;
display:block;
display:block;
-
background: transparent url(https://static.igem.org/mediawiki/2013/7/71/3human_practice.jpg)  
+
background: transparent url(https://static.igem.org/mediawiki/2013/7/79/%E5%BA%95%E9%83%A8%E7%AA%81%E5%87%BA%E4%BA%AE%E7%82%B9.png) no-repeat scroll ;
-
                                no-repeat scroll ;
+
padding-top:100px;
padding-top:100px;
color:#ddd;
color:#ddd;
font-family: Arial, "MS Trebuchet", sans-serif;
font-family: Arial, "MS Trebuchet", sans-serif;
text-decoration: none;
text-decoration: none;
-
font-size:25pt;
+
font-size:20pt;
font-weight:bold;
font-weight:bold;
outline:none;
outline:none;
Line 232: Line 229:
background-image:url(https://static.igem.org/mediawiki/2013/archive/6/60/20130709122958%21%E6%A0%87%E9%A2%98.png);
background-image:url(https://static.igem.org/mediawiki/2013/archive/6/60/20130709122958%21%E6%A0%87%E9%A2%98.png);
}
}
-
#menuBar a#Achievement{
+
#menuBar a#Home{
-
background-position:-0px top;
+
background-position:-00px top;
 +
}
 +
#menuBar a#About{
 +
background-position:-200px top;
 +
}
 +
#menuBar a#Gallery{
 +
background-position:-400px top;
 +
}
 +
#menuBar a#Contact{
 +
background-position:-600px top;
 +
}
 +
                        #menuBar a#Contact{
 +
background-position:-800px top;
}
}
-
 
</style>
</style>
</head>
</head>
Line 241: Line 249:
<div id="menuBar">
<div id="menuBar">
<ul>
<ul>
-
<li><a href="#" id="Achievement">Achievement</a></li>
+
<li><a href="#" id="Home">Home</a></li>
-
+
<li><a href="#" id="About">About</a></li>
 +
<li><a href="#" id="Gallery">Gallery</a></li>
 +
<li><a href="#" id="Contact">Contact</a></li>
 +
                                <li><a href="#" id="Contact">Contact</a></li>
</ul>
</ul>
</div><br />
</div><br />
Line 252: Line 263:
$("a").mouseover(function(){
$("a").mouseover(function(){
var selected = "#"+$(this).attr("id");
var selected = "#"+$(this).attr("id");
-
$(selected).animate({paddingTop:"210px"}, 100);
+
$(selected).animate({paddingTop:"160px"}, 100);
}).mouseout(function(){
}).mouseout(function(){
var selected = "#"+$(this).attr("id");
var selected = "#"+$(this).attr("id");
-
$(selected).animate({paddingTop:"300px"}, 100);
+
$(selected).animate({paddingTop:"260px"}, 100);
});
});
});
});

Revision as of 13:47, 11 July 2013






jquery动态导航菜单效果


Retrieved from "http://2013.igem.org/Team:HZAU-China"