模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
一个不错的下拉菜单,加上图片后效果极好_菜单导航特效
查看演示效果
特效Tag:
菜单
效果
添加
一个不错的下拉菜单,加上图片后效果极好,您可以先修改部分代码再运行.
要完成此效果需要两个步骤 第一步:把如下代码加入到<head>区域中 <script language="JavaScript1.2"> scores = new Array(20);var numTotal=0;NS4 = (document.layers) ? 1 : 0;IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) { with (document) { write("<STYLE TYPE='text/css'>"); if (NS4) { write(".parent {position:absolute; visibility:visible}"); write(".child {position:absolute; visibility:visible}"); write(".regular {position:absolute; visibility:visible}") } else { write(".child {display:none}") } write("</STYLE>"); }}function getIndex(el) { ind = null; for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id == el) { ind = i; break; } } return ind;}function arrange() { nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height; for (i=firstInd+1; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.visibility != "hide") { whichEl.pageY = nextY; nextY += whichEl.document.height; } }}function initIt(){ if (!ver4) return; if (NS4) { for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; } arrange(); } else { divColl = document.all.tags("DIV"); for (i=0; i<divColl.length; i++) { whichEl = divColl(i); if (whichEl.className == "child") whichEl.style.display = "none"; } }}function expandIt(el) { if (!ver4) return; if (IE4) { whichEl1 = eval(el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval(scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.style.display = "none"; } } whichEl1 = eval(el + "Child"); if (whichEl1.style.display == "none") { whichEl1.style.display = "block"; } else { whichEl1.style.display = "none"; } } else { whichEl = eval("document." + el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval("document." + scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.visibility = "hide"; } } if (whichEl.visibility == "hide") { whichEl.visibility = "show"; } else { whichEl.visibility = "hide"; } arrange(); }}onload = initIt; </script> 第二步:把如下代码加入到<body>区域中 <div id='KB1Parent' class='parent'><a href="#" onClick="expandIt('KB1'); return false"> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0 width="26" height="13"><font size="2">主类一</font></a></div> <div id='KB1Child' class='child'> <font size="2"><a href='link1.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0><font face="楷体_GB2312">分类一</font></a><font face="楷体_GB2312"><br> <a href='link2.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分类二</a><br> <a href='link3.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分类三</a><br> <a href='link8.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分类四</a></font></font></div> <div id='KB2Parent' class='parent'><font size="2"><a href="#" onClick="expandIt('KB2'); return false"> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>主类二</a></font></div> <div id='KB2Child' class='child'> <font size="2"><a href='link1.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0 width="24" height="14"><font face="楷体_GB2312">分类一</font></a><font face="楷体_GB2312"><br> <a href='link9.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分类二</a><br> <a href='link10.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分类三</a><br> <a href='link11.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分类四</a> </font></font></div> <div id='KB3Parent' class='parent'><font size="2"><a href="#" onClick="expandIt('KB3'); return false"> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>主类三</a></font></div> <div id='KB3Child' class='child'> <font size="2"><a href='link1.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0><font face="楷体_GB2312">分类一</font></a><font face="楷体_GB2312"><br> <a href='link2.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分类二</a><br> <a href='link9.htm' target='_target'> <IMG SRC='http://p1.mb5u.com/texiao/img_u.gif' BORDER=0>分类三</a></font></font></div>
所属频道:
菜单导航特效
/
更新时间:2011-02-23
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
透明度慢慢变化的竖向JS+css菜单
一个不错的下拉菜单,加上图片后效果极好
酷似FLASH的竖向菜单
Fisheye 动感放大的菜单
CSS之漂亮区域链接构成的菜单
仿网易漂亮的TAB选项卡(标签)
带箭头指向的首页滑动门特效代码
像滑动门一样的CSs菜单
鼠标滑过变色的菜单条
CSS鼠标滑动菜单
猜你也喜欢看这些
Google纪念Logo小球下落特效
点击图片,把图片放大,最简单的实现方法
JS图片切换,仿水纹波动
JS图片滤镜自己转换效果,焦点图切换
改变网页背景图片
CSS将图片自动变为圆角
旗帜
图形循环渐显脚本
纯CSS 漂亮的立体图片边框效果,阴影代码
Js版淘宝图片切换,类似相册播放效果
相关链接:
复制本页链接
|
搜索一个不错的下拉菜单,加上图片后效果极好
特效说明:
菜单导航模板
-
一个不错的下拉菜单,加上图片后效果极好
。