您好,欢迎来到模板无忧!
登录
注册
闂佽 鍋撻柟顖滃椤ワ拷
闂佺懓鍚嬬划搴ㄥ磼閿燂拷
闂侀潻闄勫妯好归敓锟�
闁汇埄鍨奸崰鏍ㄦ叏閿燂拷
模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
关闭顶部
展开顶部
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
AI闁诲繐绻愮换妤佺閿燂拷 闂佺厧鐤囧Λ鍕疮閹炬潙顕辨慨妯块哺閺嗭拷
闂佺硶鏅濋崰搴ㄥ箖閿燂拷
闂佽浜介崝蹇撶暦閿燂拷
展开边栏
关闭边栏
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
一个不错的下拉菜单,加上图片后效果极好_菜单导航特效
查看演示效果
特效Tag:
菜单
效果
添加
缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�
婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹 缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷 闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷�
闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮f劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!
一个不错的下拉菜单,加上图片后效果极好,您可以先修改部分代码再运行.
要完成此效果需要两个步骤 第一步:把如下代码加入到<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版淘宝图片切换,类似相册播放效果
相关链接:
复制本页链接
|
搜索一个不错的下拉菜单,加上图片后效果极好
特效说明:
菜单导航模板
-
一个不错的下拉菜单,加上图片后效果极好
。
闂佽 鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷
QQ缂備礁鏈钘壩涢敓锟�
闂佸搫鍊绘晶妤€顫濋纰卞殫妞ゆ梻鍘х憴锟�
闂佺厧鐏氬畷姗€顢欓崱妤婂殫妞ゆ梻鍘х憴锟�
婵炲瓨绮忓銊バф径宀€纾鹃柨鐕傛嫹
閻庢鍠掗崑鎾荤叓閸パ冩殶缂傚稄鎷�
闂佽皫鍕姢閻庤濞婇獮鏍р堪閸℃﹩妫�
婵犮垼娉涚粔鎾春濡ゅ啰纾鹃柟瀛樼箖缁诧拷
闂佸搫娲﹀ḿ娆撍囬敓锟�...