当前位置: 主页->网页特效专栏->页面导航->下拉菜单的导航条
栏目导航
网页特效
  典型特效 状态栏
  游戏类 页面背景
  页面特效 页面导航
  文本操作 文本特效
  图形特效 鼠标特效
  时间日期 密码类
  浏览相关 警告对话
  技巧类 计数转换
  测试搜索 代码生成
  播放音乐 按钮特效
  系统相关 链接特效
  黑客性质 相关特效
  窗口特效 其它特效
最新更新
 
 
 
 
 
 
 
 
 
 
热点文章
 
 
 
 
 
 
 
 
 
 

下拉菜单的导航条

夜鹰电脑教学网 加入日期:2005-04-09 21:05:00 点击数:

查看:[大字体 中字体 小字体]

说明: 下拉菜单的导航条

效果: 点这里看效果!

代码: 完成该特效分两步:

将以下代码插入到<head>区中。


<SCRIPT language=JavaScript>
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function JM_cc(ob){
var obj=MM_findObj(ob); if (obj) {
obj.select();js=obj.createTextRange();js.execCommand("Copy");}
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</SCRIPT>
<SCRIPT language=JavaScript>
<!--

menuPrefix = 'menu'; // Prefix that all menu layers must start with
// All layers with this prefix will be treated
// as a part of the menu system.

var menuTree, mouseMenu, hideTimer, doHide;

function init() {
ie4 = (document.all)?true:false;
ns4 = (document.layers)?true:false;
document.onmousemove = mouseMove;
if (ns4) { document.captureEvents(Event.MOUSEMOVE); }
}

function expandMenu(menuContainer,subContainer,menuLeft,menuTop) {
// Hide all submenus thats's not below the current level
doHide = false;
if (menuContainer != menuTree) {
if (ie4) {
var menuLayers = document.all.tags("DIV");
for (i=0; i<menuLayers.length; i++) {
if ((menuLayers[i].id.indexOf(menuContainer) != -1) && (menuLayers[i].id != menuContainer)) {
hideObject(menuLayers[i].id);
}
}
}
else if (ns4) {
for (i=0; i<document.layers.length; i++) {
var menuLayer = document.layers[i];
if ((menuLayer.id.indexOf(menuContainer) != -1) && (menuLayer.id != menuContainer)) {
menuLayer.visibility = "hide";
}
}
}
}
// If this is item has a submenu, display it, or it it's a toplevel menu, open it
if (subContainer) {
if ((menuLeft) && (menuTop)) {
positionObject(subContainer,menuLeft,menuTop);
hideAll();
}
else {
if (ie4) {
positionObject(subContainer, document.all[menuContainer].offsetWidth + document.all[menuContainer].style.pixelLeft - 10, mouseY);
}
else {
positionObject(subContainer, document.layers[menuContainer].document.width + document.layers[menuContainer].left + 50, mouseY);
}
}
showObject(subContainer);
menuTree = subContainer;
}
}

function showObject(obj) {
if (ie4) { document.all[obj].style.visibility = "visible"; }
else if (ns4) { document.layers[obj].visibility = "show"; }
}

function hideObject(obj) {
if (ie4) { document.all[obj].style.visibility = "hidden"; }
else if (ns4) { document.layers[obj].visibility = "hide"; }
}

function positionObject(obj,x,y) {
if (ie4) {
var foo = document.all[obj].style;
foo.left = x;
foo.top = y;
}
else if (ns4) {
var foo = document.layers[obj];
foo.left = x;
foo.top = y;
}
}

function hideAll() {
if (ie4) {
var menuLayers = document.all.tags("DIV");
for (i=0; i<menuLayers.length; i++) {
if (menuLayers[i].id.indexOf(menuPrefix) != -1) {
hideObject(menuLayers[i].id);
}
}
}
else if (ns4) {
for (i=0; i<document.layers.length; i++) {
var menuLayer = document.layers[i];
if (menuLayer.id.indexOf(menuPrefix) != -1) {
hideObject(menuLayer.id);
}
}
}
}

function hideMe(hide) {
if (hide) {
if (doHide) { hideAll(); }
}
else {
doHide = true;
hideTimer = window.setTimeout("hideMe(true);", 2000);
}
}

function mouseMove(e) {
if (ie4) { mouseY = window.event.y; }
if (ns4) { mouseY = e.pageY; }
}

function itemHover(obj,src,text,style) {
if (ns4) {
var text = '<nobr><a href="' + src + '" class="' + style + '">' + text + '<\/a><\/nobr>'
obj.document.open();
obj.document.write(text);
obj.document.close();
}
}

onload = init;
//-->
</SCRIPT>
<style type=text/css>
<!--
.menu { position: absolute; left: 0; top: 2;
visibility: hidden; background: #FFFFFF;
width: 100px; margin: 0px 0px; padding: 0px 0px;
border: 1px silver solid;
overflow: visible; ; clip: rect( )}
.menu a:visited { font-family: "Tahoma"; font-size: 11px;
text-decoration: none; font-weight: normal;
color: black; background: #E2E2E2;
width: 108px; padding-left: 8px; ; line-height: 22px;
border-color: #FFFFFF #666666 #333333 #999999;
border-style: solid; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px;
border-left-width: 1px; clip: rect( )}
.menu a:hover { font-family: "Tahoma"; font-size: 11px;
text-decoration: none; font-weight: normal;
color: #FFFFFF; background: #009900;
width: 108px; padding-left: 8px; ; line-height: 22px; clip: rect( )}
.menu .border { border: 1px solid #F4F4F4;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080; }
.menu .text { overflow: hidden;
width: 125px; height: 15px; }
.menu .arrow { overflow: hidden;
width: 15px; height: 12px;
padding-left: 5px; padding-top: 3px; }
.menu .arrow img { width: 6px; height: 7px;
border: 0px; } .menu a { font-family: "Tahoma"; font-size: 11px;
text-decoration: none; font-weight: normal;
color: black; background: #E2E2E2;
width: 108px; padding-left: 8px; ; clip: rect( );
border-color: #FFFFFF #666666 #333333 #999999;
border-style: solid; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px;
border-left-width: 1px; line-height: 22px}
.menu a:link { color: #000000; text-decoration: none
}

.a { font-size: 12px; text-decoration: none}
a:link { color: #FFFFFF; text-decoration: none}
a:hover { text-decoration: underline}
a:visited { color: #FFFFFF; text-decoration: none}
-->
</style>

将以下代码插入到<body>区中。


<table border="0" cellpadding="0" cellspacing="1" bgcolor="#333333" width="778" class="a">
<tr bgcolor="#009830" align="center" valign="bottom">
<td width="10" height="18"> </td>
<td width="74"><a href="#;" onMouseOver="expandMenu(null,'menu1',getPos(this,'Left'),
getPos(this,'Top')+this.offsetHeight);" class="a" >第一项</a></td>
<td width="58"><a href="#;" onMouseOver="expandMenu(null,'menu2',getPos(this,'Left'),
getPos(this,'Top')+this.offsetHeight);" class="a" >第二项</a></td>
<td width="58"><a href="#;" onMouseOver="expandMenu(null,'menu3',getPos(this,'Left'),
getPos(this,'Top')+this.offsetHeight);" class="a" >第三项</a></td>
<!--可以复制上面的做出menu4 menu5 menu6....-->
<td width="40"><a href="#;" class="a" >首页</a></td>
<td width="18" height="18"> </td>
</tr>
</table>
<script language="JavaScript">
function getPos(el,sProp) {
var iPos = 0
while (el!=null) {
iPos+=el["offset" + sProp]
el = el.offsetParent
}
return iPos

}
</script>
<!-- 第一开始 -->
<div id="menu1" class="menu" onMouseOut="hideMe();" style="">
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
</div>
<!-- 第二开始 -->
<div id="menu2" class="menu" onMouseOut="hideMe();">
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
</div>
<!-- 第三开始 -->
<div id="menu3" class="menu" onMouseOut="hideMe();">
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
</div>
<!--可以复制上面的做出menu4 menu5 menu6....-->
<p class="a"> </p>

作者:佚名 来源: 网上转帖  

   

上篇:无边框的广告窗口   下篇:关联菜单 (爽)


[夜鹰论坛] [我要留言] [关闭窗口] [ ][TOP]

此文章最新评论(不超过十条)
■评论此文章 ( 有问题请去夜鹰论坛发帖 )
共有评论: 查看全部评论 姓名:
【 声明 】 您所发表的言论将被众多网友阅读,因此,您所发表的言论应不违反中国法律,不违背一般的道德原则,否则,您必须对您的不当言论引发的一切不良后果负责;此外,我们的管理员有权删除您发表的不当言论,谢谢合作!