<HTML>
<HEAD>
<TITLE>无标题文档</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<LINK href="css/tab_menu.css" type=text/css rel=stylesheet>
<SCRIPT src="js/prototype.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/fabtabulous.js" type=text/javascript></SCRIPT>
</HEAD>
<BODY>
<p> </p>
<DIV id=xcx_tabmenu>
<DIV class=cx_tabmenu id=cx_tabmenu>
<DIV id=ddimagetabs>
<A href="http://www.makewing.com/lanren/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">Home</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">Company</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">Products</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">Our Works</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">News</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">Store</A> </DIV>
<BR style="CLEAR: left">
<DIV id=tabcontentcontainer>
<DIV class=tabcontent id=sc1></DIV>
<DIV class=tabcontent id=sc2><A
href="http://www.clexus.com/content/view/67/55/">About Us</A> <A
href="http://www.clexus.com/content/view/5/6/">What do we do?</A> <A
href="http://www.clexus.com/content/view/95/76/">Meet The Team</A> <A
href="http://www.clexus.com/content/view/64/52/">Why work with us?</A> <A
href="http://www.clexus.com/content/view/65/53/">Quality policy</A> <A
href="http://www.clexus.com/content/view/112/87/">Terms</A> <A
href="http://www.clexus.com/content/view/66/54/">Testimonials</A> <A
href="http://www.clexus.com/content/view/117/91/">Clexus Tour</A> </DIV>
<DIV class=tabcontent id=sc3><A
href="#">Clexus Private
Messaging</A> <A href="#">Image
Gallery</A> <A href="#">Customer
Management</A> <A
href="#">Template
Works</A> </DIV>
<DIV class=tabcontent id=sc4><A
href="#">Web
Design</A> <A
href="#">Web
Development</A> <A
href="#">Logo
Design</A> <A
href="#">Print
Design</A> </DIV>
<DIV class=tabcontent id=sc5><A
href="#">Clexus News</A>
<A href="#">Joomla
News</A> <A
href="#">General News</A>
</DIV>
<DIV class=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>
<SCRIPT type=text/javascript>
// The idea borrowed from dynamicDrive.com
var initialtab = [1, "sc1"]
var previoustab = "";
var intv;
function expandcontent(cid, aobject)
{
stopTimer();
highlighttab(aobject)
if (previoustab != "")
document.getElementById(previoustab).style.display = "none"
document.getElementById(cid).style.display = "block"
previoustab = cid
}
function highlighttab(aobject)
{
stopTimer();
if (typeof tabobjlinks == "undefined")
collectddimagetabs()
for (i = 0; i < tabobjlinks.length; i++)
tabobjlinks[i].className = ""
aobject.className = "current"
}
function collectddimagetabs()
{
var tabobj = document.getElementById("ddimagetabs")
tabobjlinks = tabobj.getElementsByTagName("A")
}
function do_onload()
{
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0] - 1])
}
function startTimer()
{
intv = setTimeout("expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])", 2000);
}
function stopTimer()
{
clearTimeout(intv);
}
Event.observe(window, 'load', do_onload, false);
Event.observe('xcx_tabmenu', 'mouseover', function(event)
{
stopTimer();
}, false);
Event.observe('xcx_tabmenu', 'mouseout', function(event)
{
var reltg = (event.relatedTarget) ? event.relatedTarget : event.toElement;
var tg = (window.event) ? event.srcElement : event.target;
if (tg.nodeName != 'DIV')
return;
while (reltg != tg && reltg.nodeName != 'BODY')
{
reltg = reltg.parentNode;
if (reltg.id == "xcx_tabmenu")
return;
}
if (reltg == tg)
return;
stopTimer();
startTimer();
}, false);
</SCRIPT>
</BODY></HTML>
css+div实现精美导航条 横向排列下拉子菜单
5星 · 超过95%的资源 需积分: 39 66 浏览量
2008-12-26
09:48:39
上传
评论 4
收藏 20KB RAR 举报 
daohang2.rar （10个子文件） 
24 css 
tab_menu.css 4KB images 
cx_submenu_hover_grey.jpg 374B sub_menu_bg.jpg 342B cx_menu_hover_my.jpg 819B cx_menu_hover.jpg 418B Thumbs.db 7KB cx_submenu_hover.jpg 376B js fabtabulous.js 1KB prototype.js 54KB index.htm 5KB
- 1
- 2
- 3
前往页