Home>

The online demo address is as follows:

The specific code is as follows:

<! Doctype html>
<html>
<head>
<meta charset="gb2312">
<title>jquery slide menu with slider</title>
<style>
body {font:12px/1.5 arial, \ 5b8b \ 4f53, sans-serif;background:#fff;color:#333;position:relative}
.header {width:990px;min-width:990px;margin:0 auto;height:68px;position:relative;z-index:200;overflow:hidden}
.headertab {height:44px;padding:24px 0 0 0;position:relative;width:990px;min-width:990px;margin:0 auto;}
.headertab a {padding:0 5px;float:left;font-size:14px;color:#333;height:42px;overflow:hidden;line-height:44px;font-family:\ 5fae \ 8f6f \ 96c5 \ 9ed1 , \ 5b8b \ 4f53;margin-left:10px;display:inline}
.headertab a:hover {text-decoration:none;color:#333}
.headertab .tabline {position:absolute;top:66px;height:2px;background:#35b0f2;left:0;width:100%;overflow:hidden;font-size:0;line-height:0;}
</style>
</head>
<body>
</body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
var headertabarray=$("#headertab a"), headtabline=$("#headertab .tabline"), tabindex, headertabarraylength=headertabarray.length, headertabwidtharray=[], headertabpositonarray=[], defaultnum=0;
for (var i=0;i<headertabarraylength;i ++) {
  headertabwidtharray [i]=headertabarray.eq (i) .width () + 10;
  headertabpositonarray [i]=headertabarray.eq (i) .position (). left + 10;
}
headertabarray.mouseover (function () {
  $("#headertab i:animated"). stop ();
  tabindex=$(this) .index ();
  headtabline.animate ({width:headertabwidtharray [tabindex], left:headertabpositonarray [tabindex]}, 300);
})
headertabarray.mouseout (function () {
  $("#headertab i:animated"). stop ();
  tabindex=$(this) .index ();
  headtabline.animate ({width:headertabwidtharray [defaultnum], left:headertabpositonarray [defaultnum]}, 300);
})
defaultnum=0;
headtabline.animate ({width:headertabwidtharray [defaultnum], left:headertabpositonarray [defaultnum]}, 300);
</script>
</html>
  • Previous C # memcache introduction
  • Next Database access performance optimization