This article illustrates the method of the Chinese and English navigation menu of jquery imitation flash up and down. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery Imitation Flash mouse sensor flip navigation menu </title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<style type= "Text/css" >
Body{width:100%;height:100%;margin:0;padding:0;background:url (/jscss/demoimg/201007/bg.gif) repeat-x top center; Font-size:12px;color: #616161;}
A,a:link,a:visited,a:active{color: #616161; text-decoration:none;}
A:hover{text-decoration:underline;color: #710075;}
#body {width:100%;float:left;}
. Index_top{width:930px;height:126px;position:relative;z-index:1;}
No-repeat 0 0;position:absolute;top:46px;left:41px;z-index:50;}
#index_nav {margin:82px 0;float:left;display:inline;}
#index_nav ul{float:left;height:34px;display:inline;margin:0 0 0 0px;list-style-type:none;}
#index_nav li{float:left;height:34px;width:100px;font-size:13px;font-family:verdana;line-height:34px;text-align : Center;cursor:pointer;color: #fff;}
#index_nav_cases A, #index_nav_cases a:link, #index_nav_cases a:visited, #index_nav_cases a:active{color: #fff;}
#index_nav_cases A:hover{text-decoration:none;}
#index_nav Li Div{height:34px;width:100px;overflow:hidden;position:relative;}
#index_nav Li Div. n1, #index_nav Li Div. n2{display:block;height:34px;width:100px;position:absolute;top:0px;left:0px ; cursor:pointer;}
#index_nav Li Div. n1{z-index:12;background:url (/jscss/demoimg/201007/nav_bg.gif) repeat-x top center;font-size:13px ;}
#index_nav Li Div. n2{z-index:11;background:url (/jscss/demoimg/201007/nav_bg.gif) repeat-x top center;
#index_nav Li Div a{color: #fff;}
#index_nav Li Div a:hover{text-decoration:none;}
</style>
<script type= "Text/javascript" src= "/ajaxjs/jquery1.3.2.js" ></script>
<script type= "Text/javascript" >
JQuery (function () {
JQuery (' #index_nav li '). Hover (
function () {
JQuery (This). Find ('. N1 '). Stop (). Animate ({opacity: ' 0 ', top: ' 43px '});
},
function () {
JQuery (This). Find ('. N1 '). Stop (). Animate ({opacity: ' 1 ', top: ' 0px '});
}
);
});
</script>
<body>
<span style= "color: #FFFFFF;" > Tips: If you are prompted to error or do not see the effect of the page, please refresh the page and try again! </span><br>
<div id= "Body" >
<div id= "Index_content" >
<div class= "Index_top" >
<div id= "Index_nav" >
<ul>
<li id= "Index_nav_about" ><div><span class= "N1" > About </span><span class= "N2" >About</ Span></div></li>
<li id= "Index_nav_service" ><div><span class= "N1" > Service </span><span class= "N2" >Services </span></div></li>
<li id= "index_nav_cases" ><div><a href= "#" ><span class= "N1" > Case </span><span class= " N2 ">Cases</span></a></div></li>
<li id= "Index_nav_adva" ><div><span class= "N1" > Advantages </span><span class= "N2" >Advantages </span></div></li>
<li id= "index_nav_contact" ><div><span class= "N1" > Contact </span><span class= "N2" >Contact </span></div></li>
</ul>
</div>
</div>
</div>
</div>
</body>
I hope this article will help you with your jquery programming.
