js + css實現左側懸浮導覽列

來源:互聯網
上載者:User

<html><br /><head><br /><title>浮在頁面上的導覽功能表</title><br /><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><br /><mce:style><!--<br />body {<br />font: normal 11px verdana;<br />}<br />ul {<br />margin: 0;<br />padding: 0;<br />list-style: none;<br />width: 150px; /* Width of Menu Items */<br />border-bottom: 1px solid #ccc;<br />}<br />ul li {<br />position: relative;<br />}<br />li ul {<br />position: absolute;<br />left: 149px; /* Set 1px less than menu width */<br />top: 0;<br />display: none;<br />}<br />/* Styles for Menu Items */<br />ul li a {<br />display: block;<br />text-decoration: none;<br />color: #777;<br />background: #fff; /* IE6 Bug */<br />padding: 5px;<br />border: 1px solid #ccc;<br />border-bottom: 0;<br />}<br />/* Fix IE. Hide from IE Mac /*/<br />* html ul li { float: left; height: 1%; }<br />* html ul li a { height: 1%; }<br />/* End */<br />ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */<br />li ul li a { padding: 2px 5px; } /* Sub Menu Styles */<br />li:hover ul, li.over ul { display: block; } /* The magic */<br />--></mce:style><style mce_bogus="1">body {<br />font: normal 11px verdana;<br />}<br />ul {<br />margin: 0;<br />padding: 0;<br />list-style: none;<br />width: 150px; /* Width of Menu Items */<br />border-bottom: 1px solid #ccc;<br />}<br />ul li {<br />position: relative;<br />}<br />li ul {<br />position: absolute;<br />left: 149px; /* Set 1px less than menu width */<br />top: 0;<br />display: none;<br />}<br />/* Styles for Menu Items */<br />ul li a {<br />display: block;<br />text-decoration: none;<br />color: #777;<br />background: #fff; /* IE6 Bug */<br />padding: 5px;<br />border: 1px solid #ccc;<br />border-bottom: 0;<br />}<br />/* Fix IE. Hide from IE Mac /*/<br />* html ul li { float: left; height: 1%; }<br />* html ul li a { height: 1%; }<br />/* End */<br />ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */<br />li ul li a { padding: 2px 5px; } /* Sub Menu Styles */<br />li:hover ul, li.over ul { display: block; } /* The magic */</style><br /><mce:script language="JavaScript"><!--<br />startList = function()<br />{<br /> if (document.all&&document.getElementById)<br /> {<br /> navRoot = document.getElementById("nav");<br /> for (i=0; i<navRoot.childNodes.length; i++)<br /> {<br /> node = navRoot.childNodes[ i ];<br /> if (node.nodeName=="LI")<br /> {<br /> node.onmouseover=function()<br /> {<br /> this.className+=" over";<br />}<br /> node.onmouseout=function()<br /> {<br /> this.className=this.className.replace(" over", "");<br />}<br /> }<br /> }<br /> }<br />}<br />// --></mce:script><br /><mce:script language="JavaScript"><!--<br />function setVariables() {<br /> if (navigator.appName == "Netscape") {<br /> v=".top=";<br /> dS="document.";<br /> sD="";<br /> y="window.pageYOffset";<br /> }<br /> else {<br /> v=".pixelTop=";<br /> dS="";<br /> sD=".style";<br /> y="document.body.scrollTop";<br /> }<br />}<br />function checkLocation() {<br /> object="object1";<br /> yy=eval(y);<br /> yy = yy+100;<br /> eval(dS+object+sD+v+yy);<br /> setTimeout("checkLocation()",10);<br />}<br />// --></mce:script><br /></head><br /><body onload="setVariables();checkLocation();startList();"><br /> <div id="object1"<br /> style="left: 10; position: absolute; top: 94; z-index: 5; width: 221; height: 293"><br /> <ul id="nav"><br /> <li><a href="">網站首頁</a><br /> <ul><br /> <li><a href="">網頁特效</a></li><br /> <li><a href="">廣告代碼</a></li><br /> </ul><br /> </li><br /> <li><a href="">您自訂</a><br /> <ul><br /> <li><a href="">您自訂</a></li><br /> <li><a href="">您自訂</a></li><br /> <li><a href="">您自訂</a></li><br /> <li><a href="">您自訂</a></li><br /> <li><a href="">您自訂</a></li><br /> </ul><br /> </li><br /> <li><a href="">您自訂</a><br /> <ul><br /> <li><a href="">您自訂</a></li><br /> <li><a href="">您自訂</a></li><br /> <li><a href="">您自訂</a></li><br /> <li><a href="">您自訂</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /><p align="center"><br /></p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /><p align="center"> </p><br /></body><br /></html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.