<script type=text/javascript>// 标签原先有 加载 其他 JS 函数那应该在 window.οnlοad=muBar; 前加上 //
//如: //window.οnlοad=muBar;
//然后再在 加入该函数, 如
//-->]]></script>
-
CSS 弹出菜单, 完美实现, 完美兼容 By shawl.qiu
说明:
本实例使用了 少许 脚本, 这样做是为了兼容 IE, 如果不使用脚本, Opera 可以正常显示.
本实例兼容: IE,FF,Opera, 并以垂直方向显示子菜单
内容包括:
1. VBScript 动态显示内容代码
2. VBScript 创建静态文件并读出函数
3. 纯静态例子代码
4. 预览
shawl.qiu
2006-8-1
http://blog.csdn.net/btbtd
1. VBScript 动态显示内容代码
- linenum
- <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
- <!--#include virtual="include/conn.asp" -->
- <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns=" http://www.w3.org/1999/xhtml" lang="zh-CN">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>popup menu with css By shawl.qiu</title>
- <style type="text/css">
- <!--
- body { font-size:14px;}
- a { text-decoration:none; /* 清空链接下划线 */}
- *{margin:0;padding:0;border:0; /* 外补丁, 内补丁, 边框设为0 */}
- #navibar { display:table; width:100%; background:#E7E8EB; }
- #navibar a { display: block; text-decoration:none!important; /* 设置导航条内链接以块显示 */}
- #navibar div { float: left; /* 设置大类浮动方向 */}
- #navibar div a {
- padding:0px 5px 0px 5px; /* 设置大类链接显示间隔 */
- line-height:130%; /* 设置大类链接显示行高 */}
- #navibar div a:hover {
- color:#FFF !important; /* 设置鼠标移动至大类时的文字颜色 */
- background:#002BB8; /* 设置鼠标移动至大类时的背景色 */}
- #navibar div div {
- line-height:120%; /* 设置子类行高 */
- left: -1234em; /* 设置子类位置为不可见 */
- position: absolute; /* 位置参数设为绝对值 */ }
- #navibar .spcat_hover div {
- white-space:nowrap; /* 子类标题溢出边界不换行 */}
- #navibar .spcat_hover div a{ background-color:#F6F6F6!important; color:#666; /* 子类链接颜色 */ display:block; width:120px;}
- #navibar .spcat_hover div a:hover {
- color:#F3F3F3; /* 鼠标移至子类时的文字颜色 */
- background:#C00!important; /* 鼠标移至子类时的背景色 */
- display:block;
- width:auto;}
- #navibar .spcat_hover div {left:auto; /* 子类弹出菜单显示位置 */}
- -->
- </style>
- <script type=text/javascript>//<![CDATA[<!--
- function muBar() {
- var getItem = document.getElementById("navibar").getElementsByTagName("div");
- for (var i=0; i<getItem.length; i++) {
- getItem[i].οnmοuseοver=function() { this.className="spcat_hover"; }
- getItem[i].οnmοuseοut=function() { this.className="" }
- }
- }
- window.οnlοad=muBar;
- //如果你的 HTML <body> 标签原先有 加载 其他 JS 函数那应该在 window.οnlοad=muBar; 前加上 //
- //如: //window.οnlοad=muBar;
- //然后再在 <body> 加入该函数, 如 <body οnlοad="otherFunc();muBar();">
- //-->]]></script>
- </head>
- <body>
- <div id="navibar">
- <%
- set rs=server.CreateObject("adodb.recordset")
- rs.open "select * from ctatspcat order by sporder",conn
- while not rs.eof
- response.write "<div><a href=""?id=spcat"">"&rs("spcat")&"</a>"
- response.write "<div>"
- set rss=server.CreateObject("adodb.recordset")
- rss.open "select * from ctatsbcat where spid="&rs("spid")&" order by sbcat",conn
- while not rss.eof
- response.write "<a href=""?id=sbcat"">"&rss("sbcat")&"</a>"
- rss.movenext
- wend
- rss.close
- set rss=nothing
- response.write "</div></div>"
- rs.movenext
- wend
- rs.close
- set rs=nothing
- %>
- </div><br clear="all" />
- <div>ok</div>
- </body>
- </html>
2. VBScript 创建静态文件并读出函数
- linenum
- <%
- function fAtNaviBar(strFilePath)
- set fso=server.CreateObject("scripting.fileSystemObject")
- strFilePath=server.MapPath(strFilePath)
- if not fso.fileexists(strFilePath) then
- set rs=server.CreateObject("adodb.recordset")
- rs.open "select * from ctatspcat order by sporder",conn
- if rs.eof then exit function
- set cfile=fso.createTextFile(strFilePath)
- cfile.write "<div id=""navibar"">"
- while not rs.eof
- cfile.write "<div><a href=""article.asp?spid="&rs("spid")&""">"&rs("spcat")&"</a>"
- cfile.write "<div>"
- set rss=server.CreateObject("adodb.recordset")
- rss.open "select * from ctatsbcat where spid="&rs("spid")&" order by sbcat",conn
- while not rss.eof
- cfile.write "<a href=""article.asp?spid="&rs("spid")&"&sbid="&rss("sbid")&""">"&rss("sbcat")&"</a>"
- rss.movenext
- wend
- rss.close
- set rss=nothing
- cfile.write "</div></div>"
- rs.movenext
- wend
- cfile.write "</div>"
- rs.close
- set rs=nothing
- end if
- if rspid<>"" then response.write replace(fso.openTextFile(strFilePath).readall,"spid="&rspid&"""","spid="&_
- rspid&""" class=""bg-blue white""") else response.write fso.openTextFile(strFilePath).readall
- set fso=nothing
- end function
- %>
- <% call fAtNaviBar("include/article/files/navibar.html")%>
3. 纯静态例子代码
- linenum
- <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns=" http://www.w3.org/1999/xhtml" lang="zh-CN">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>popup menu with css By shawl.qiu</title>
- <style type="text/css">
- <!--
- body { font-size:14px;}
- a { text-decoration:none; /* 清空链接下划线 */}
- *{margin:0;padding:0;border:0; /* 外补丁, 内补丁, 边框设为0 */}
- #navibar { display:table; width:100%; background:#E7E8EB; }
- #navibar a { display: block; text-decoration:none!important; /* 设置导航条内链接以块显示 */}
- #navibar div { float: left; /* 设置大类浮动方向 */}
- #navibar div a {
- padding:0px 5px 0px 5px; /* 设置大类链接显示间隔 */
- line-height:130%; /* 设置大类链接显示行高 */}
- #navibar div a:hover {
- color:#FFF !important; /* 设置鼠标移动至大类时的文字颜色 */
- background:#002BB8; /* 设置鼠标移动至大类时的背景色 */}
- #navibar div div {
- line-height:120%; /* 设置子类行高 */
- left: -1234em; /* 设置子类位置为不可见 */
- position: absolute; /* 位置参数设为绝对值 */ }
- #navibar .spcat_hover div {
- white-space:nowrap; /* 子类标题溢出边界不换行 */}
- #navibar .spcat_hover div a{ background-color:#F6F6F6!important; color:#666; /* 子类链接颜色 */ display:block; width:120px;}
- #navibar .spcat_hover div a:hover {
- color:#F3F3F3; /* 鼠标移至子类时的文字颜色 */
- background:#C00!important; /* 鼠标移至子类时的背景色 */
- display:block;
- width:auto;}
- #navibar .spcat_hover div {left:auto; /* 子类弹出菜单显示位置 */}
- -->
- </style>
- <script type=text/javascript>//<![CDATA[<!--
- function muBar() {
- var getItem = document.getElementById("navibar").getElementsByTagName("div");
- for (var i=0; i<getItem.length; i++) {
- getItem[i].οnmοuseοver=function() { this.className="spcat_hover"; }
- getItem[i].οnmοuseοut=function() { this.className="" }
- }
- }
- window.οnlοad=muBar;
- //如果你的 HTML <body> 标签原先有 加载 其他 JS 函数那应该在 window.οnlοad=muBar; 前加上 //
- //如: //window.οnlοad=muBar;
- //然后再在 <body> 加入该函数, 如 <body οnlοad="otherFunc();muBar();">
- //-->]]></script>
- </head>
- <body>
- <div id="navibar">
- <div><a href="?id=spcat">海纳百川</a><div><a href="?id=sbcat">FromLeadBBS</a><a href="?id=sbcat">FromPhpbbForum</a><a href="?id=sbcat">FromXoopsGiArticles</a><a href="?id=sbcat">FromXoopsGipbb</a><a href="?id=sbcat">FromXoopsGiss</a><a href="?id=sbcat">FromXoopsNewbb</a><a href="?id=sbcat">FromXoopsNews</a><a href="?id=sbcat">FromXoopsXphpbbi</a><a href="?id=sbcat">办公软件</a><a href="?id=sbcat">操作系统/OS</a><a href="?id=sbcat">丛书</a><a href="?id=sbcat">调查</a><a href="?id=sbcat">服务器篇</a><a href="?id=sbcat">功能测试</a><a href="?id=sbcat">金融</a><a href="?id=sbcat">设计</a><a href="?id=sbcat">投稿/撰稿/征文</a><a href="?id=sbcat">图象处理</a><a href="?id=sbcat">网页制作</a><a href="?id=sbcat">网站</a><a href="?id=sbcat">有容乃大</a></div></div><div><a href="?id=spcat">技术记</a><div><a href="?id=sbcat">ASP</a><a href="?id=sbcat">C</a><a href="?id=sbcat">CSS</a><a href="?id=sbcat">HTML</a><a href="?id=sbcat">Javascript</a><a href="?id=sbcat">Linux</a><a href="?id=sbcat">RegExp-正则表达式</a><a href="?id=sbcat">SQL/数据库</a><a href="?id=sbcat">WebServices</a><a href="?id=sbcat">XHTML</a><a href="?id=sbcat">草稿箱</a><a href="?id=sbcat">技术翻译</a><a href="?id=sbcat">技术趣味</a><a href="?id=sbcat">开发-本站</a></div></div><div><a href="?id=spcat">读书记</a><div><a href="?id=sbcat">IT-札记</a><a href="?id=sbcat">WSJ</a><a href="?id=sbcat">文学手记</a><a href="?id=sbcat">文学札记</a></div></div><div><a href="?id=spcat">英语角</a><div><a href="?id=sbcat">基础资料</a><a href="?id=sbcat">英-汉阅读</a><a href="?id=sbcat">英文/歌词&诗词</a><a href="?id=sbcat">英-英阅读</a><a href="?id=sbcat">语法&写作</a></div></div><div><a href="?id=spcat">工具箱</a><div><a href="?id=sbcat">基层工具</a><a href="?id=sbcat">模板</a><a href="?id=sbcat">配色方案</a><a href="?id=sbcat">设计概念</a><a href="?id=sbcat">实用链接</a><a href="?id=sbcat">行业常识</a><a href="?id=sbcat">在线工具</a></div></div><div><a href="?id=spcat">程序设计</a><div><a href="?id=sbcat">C#</a><a href="?id=sbcat">C++</a><a href="?id=sbcat">C语言</a><a href="?id=sbcat">Delphi</a><a href="?id=sbcat">VB</a><a href="?id=sbcat">VF</a></div></div><div><a href="?id=spcat">数据库</a><div><a href="?id=sbcat">Access</a><a href="?id=sbcat">ADO</a><a href="?id=sbcat">MySQL</a><a href="?id=sbcat">Oracle</a><a href="?id=sbcat">Postgresql</a><a href="?id=sbcat">SQL Server</a><a href="?id=sbcat">书</a></div></div><div><a href="?id=spcat">网络编程</a><div><a href="?id=sbcat">.NET</a><a href="?id=sbcat">Ajax</a><a href="?id=sbcat">ASP</a><a href="?id=sbcat">ASP实例</a><a href="?id=sbcat">CGI</a><a href="?id=sbcat">CSS</a><a href="?id=sbcat">Flash</a><a href="?id=sbcat">HTML</a><a href="?id=sbcat">Java</a><a href="?id=sbcat">Java </a><a href="?id=sbcat">JSP</a><a href="?id=sbcat">Perl </a><a href="?id=sbcat">PHP</a><a href="?id=sbcat">RegExp-正则</a><a href="?id=sbcat">Script</a><a href="?id=sbcat">XHTML</a><a href="?id=sbcat">XML</a><a href="?id=sbcat">书</a></div></div><div><a href="?id=spcat">站点大事记</a><div><a href="?id=sbcat">绿色进化 E-Studio_2004</a><a href="?id=sbcat">绿色学院 - Green Institute_2006</a></div></div>
- </div><br clear="all" />
- <div>ok</div>
- </body>
- </html>
4. 预览
ok
1067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
