请教，那位能做出这种模样的下拉/跳动菜单？ - Dreamweaver及网页制作 - 5D互动论坛 - 五维多媒体

您还没有登录,现在登录 | 注册5D通行证

5D 博客新控制面板,操作更简单!

首页

资讯

作品

教程

博客

论坛

论坛首页规章制度搜索帮助

» 互动论坛 » Dreamweaver及网页制作 » 请教，那位能做出这种模样的下拉/跳动菜单？

发起主题

回复主题

跳转到：

每页显示15条 1/1<<<1>>

	主题: 请教，那位能做出这种模样的下拉/跳动菜单？
lancasteryuen 职务：普通成员等级：1 金币：0.0 发贴：2	引用 #12005/1/23 2:54:21 一般的下拉菜单样子都是这样：图片如下：能否做成这样？又是怎样做的呢？图片如下：
原本简单职务：普通成员等级：1 金币：0.0 发贴：99	引用 #22005/1/24 13:32:57 确实是漂亮，哪位高手会做？我也想学哦
{ 在指尖上绽放的花朵 } 职务：普通成员等级：5 金币：14.0 发贴：3209	引用 #32005/1/24 14:43:09 看上去像是Flash。。。不然就是层模拟。。。。截下面图的网址贴出来一下？
counterm 职务：普通成员等级：1 金币：0.0 发贴：19	引用 #42005/1/24 21:56:15 FILTER:ALPHA 用在母DIV中试试看
elffire1973 职务：普通成员等级：1 金币：0.0 发贴：3	引用 #52005/1/25 22:45:52 此菜单用J语言遍过，原码我想我的机器里没有了。不过我可以找找，找到后会传上来
lancasteryuen 职务：普通成员等级：1 金币：0.0 发贴：2	引用 #62005/1/26 1:48:48 elffire1973,你好：那就拜托你了。谢谢
盛装五步职务：普通成员等级：3 金币：12.0 发贴：731	引用 #72005/1/26 12:38:39 以下代码基本来自蓝色理想，原作者cloudchen，我只做了少量基于显示效果的改动，点击运行代码后如果看不到效果请刷新浏览器：简单版： <title>自制列表框</title> <style> .selectDiv { border: 1px solid buttonface;} .optionDiv { border:1px solid buttonface;border-top:0px;position:absolute;visibility:hidden} .optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;} .defaultSelect { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;} .arrow { font-family:webdings;line-height:13px;border:1px outset buttonhighlight;background-color:#FFEBCD;width:15px;text-align:center;cursor:default;font-size:8px;} </style> <SCRIPT LANGUAGE="JavaScript" DEFER> //用户变量 var oWhere = document.body; var OptionText = new Array(); OptionText[0] = "--优秀网站--"; OptionText[1] = "CSDN.net"; OptionText[2] = "蓝色理想"; OptionText[3] = "PcHome"; OptionText[4] = "MSDN.com"; //下拉菜单主体 var selectDiv = document.createElement("table"); var selectDivTR = selectDiv.insertRow(); var defaultValueTD = selectDivTR.insertCell(); var arrow = selectDivTR.insertCell(); with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv"; with(defaultValueTD)innerText = OptionText[0],className="defaultSelect"; with(arrow)innerText=6,className="arrow"; oWhere.appendChild(selectDiv); //外层Div var optionDiv = document.createElement("div"); //设置下拉菜单选项的坐标和宽度 with(optionDiv.style) { var select = selectDiv; var xy = getSelectPosition(select); pixelLeft = xy[0]; pixelTop = xy[1]+select.offsetHeight; width = selectDiv.offsetWidth; optionDiv.className = "optionDiv"; } //下拉菜单内容 var Options = new Array(); for (var i=0;i<OptionText.length;i++) { Options[i] = optionDiv.appendChild(document.createElement("div")); } for (i=0;i<Options.length;i++) { Options[i].innerText = OptionText[i]; } oWhere.appendChild(optionDiv); /事件/ //禁止选择文本 selectDiv.onselectstart = function() {return false;} optionDiv.onselectstart = function() {return false;} //下拉菜单的箭头 arrow.onmousedown = function() { this.setCapture(); this.style.borderStyle="inset"; } arrow.onmouseup = function() { this.style.borderStyle="outset"; this.releaseCapture(); } arrow.onclick = function() { event.cancelBubble = true; optionDiv.style.visibility = optionDiv.style.visibility=="visible"?"hidden":"visible"; } document.onclick = function() { optionDiv.style.visibility = "hidden"; } defaultValueTD.onclick = function() { event.cancelBubble = true; optionDiv.style.visibility = optionDiv.style.visibility=="visible"?"hidden":"visible"; } //移动Option时的动态效果 for (i=0;i<Options.length;i++) { Options[i].attachEvent("onmouseover",function(){moveWithOptions("#FFEBCD","black")}); Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")}); Options[i].attachEvent("onmouseup",selectedText); } function moveWithOptions(bg,color) { with(event.srcElement) { style.backgroundColor = bg; style.color = color; } } function selectedText() { with(event.srcElement) { defaultValueTD.innerText = innerText; } with(defaultValueTD.style)background="",color="black"; } /通用函数/ //获取对象坐标 function getSelectPosition(obj) { var objLeft = obj.offsetLeft; var objTop = obj.offsetTop; var objParent = obj.offsetParent; while (objParent.tagName != "BODY") { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } return([objLeft,objTop]); } </SCRIPT> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 高级版： [支持图片，16x16px（需设定路径），列表框弹出滚动效果支持传值（需设定），自适应宽度，根据最宽的一个选项自动调整，样式、效果基本摹仿select tag。] <title>自定义列表框</title> <style> .selectDiv { border: 1px solid buttonface;} .optionDiv { border:1px solid buttonface;border-top:0px;position:absolute;cursor:default;clip:rect(auto auto 0% auto);} .optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;background-color:white;} .optionDiv img { vertical-align: middle;margin-right:3px;} .defaultSelect { font-size:11px;font-family:Tahoma;padding-left:6px;border:1px solid white;cursor:default;} .defaultSelect img { vertical-align: middle;margin-right:3px;} .arrow { font-family:webdings;line-height:13px;border:1px buttonhighlight;background-color:buttonface;width:15px;text-align:center;cursor:default;font-size:8px;height:18px;} </style> <body> <span id="sel"></span><button style="font-family:Arial;font-size:10px;width:22px;height:18px;margin-top:4px;" onclick="putValue()">Go</button> <SCRIPT LANGUAGE="JavaScript"> //用户变量 var oWhere = document.getElementById("sel"); //显示文字 var OptionText = new Array(); OptionText[0] = "--优秀网站--"; OptionText[1] = "piggydesign.yeah.net"; OptionText[2] = "蓝色理想"; OptionText[3] = "PcHome.net"; OptionText[4] = "Sina.com.cn"; //显示图片 var OptionImg = new Array(); OptionImg[0] = ""; OptionImg[1] = ""; OptionImg[2] = new Image(),OptionImg[2].src="http://www.5d.cn/bbs/images/online.gif"; OptionImg[3] = new Image(),OptionImg[3].src="http://www.5d.cn/bbs/images/online.gif"; OptionImg[4] = new Image(),OptionImg[4].src="http://www.5d.cn/bbs/images/online.gif"; var OptionValue = new Array(); OptionValue[0] = ""; OptionValue[1] = "http://piggydesign.yeah.net"; OptionValue[2] = "http://www.blueidea.com"; OptionValue[3] = "http://www.pchome.net"; OptionValue[4] = "http://www.sina.com.cn"; //系统变量 var selectedOver = false; var selectedValue = 0; //下拉菜单主体 var selectDiv = document.createElement("table"); var selectDivTR = selectDiv.insertRow(); var defaultValueTD = selectDivTR.insertCell(); var arrow = selectDivTR.insertCell(); with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv"; with(defaultValueTD)innerHTML = showOptionImg(1)+OptionText[0],className="defaultSelect"; with(arrow)innerText=6,className="arrow"; oWhere.appendChild(selectDiv); //外层Div var optionDiv = document.createElement("div"); //设置下拉菜单选项的坐标和宽度 with(optionDiv.style) { var select = selectDiv; var xy = getSelectPosition(select); pixelLeft = xy[0]; pixelTop = xy[1]+select.offsetHeight; optionDiv.className = "optionDiv"; } //下拉菜单内容 var Options = new Array(); for (var i=0;i<OptionText.length;i++) { Options[i] = optionDiv.appendChild(document.createElement("div")); } for (i=0;i<Options.length;i++) { Options[i].innerHTML = showOptionImg(i)+OptionText[i]; Options[i].index = i; } oWhere.appendChild(optionDiv); //列表宽度自适应 var SelectWidth = Options[0].offsetWidth+arrow.offsetWidth+8; selectDiv.style.width=SelectWidth;; optionDiv.style.width=SelectWidth; /事件/ //禁止选择文本 selectDiv.onselectstart = function() {return false;} optionDiv.onselectstart = function() {return false;} //下拉菜单的箭头 arrow.onmouseover = function() { this.style.borderStyle="outset"; } arrow.onmouseout = function() { this.style.borderStyle=""; } arrow.onmousedown = function() { this.setCapture(); this.style.borderStyle="inset"; } arrow.onmouseup = function() { event.cancelBubble = true; this.style.borderStyle="outset"; this.releaseCapture(); showHide(); } document.onmouseup = function() { optionDiv.style.clip="rect(auto auto 0% auto)"; if(selectedOver) { with(defaultValueTD.style)background="",color=""; selectedOver=false; } } defaultValueTD.onmouseup = function() { event.cancelBubble = true; showHide(); } //移动Option时的动态效果 for (i=0;i<Options.length;i++) { Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")}); Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")}); Options[i].attachEvent("onmouseup",selectedText); } function moveWithOptions(bg,color) { with(event.srcElement) { style.backgroundColor = bg; style.color = color; } } function selectedText() { event.cancelBubble=true; defaultValueTD.innerHTML = event.srcElement.innerHTML; with(defaultValueTD.style)background="",color="black"; optionDiv.style.clip="rect(auto auto 0% auto)"; selectedOver = true; selectedValue = event.srcElement.index; } i = 0; /通用函数/ //获取对象坐标 function getSelectPosition(obj) { var objLeft = obj.offsetLeft; var objTop = obj.offsetTop; var objParent = obj.offsetParent; while (objParent.tagName != "BODY") { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } return([objLeft,objTop]); } function showOptionImg(index) { var imgSrc = OptionImg[index].src; if (imgSrc!=undefined) return("<img src="+OptionImg[index].src+">") else return(""); } function dynamicOptions() { optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20; if(i<101) setTimeout("dynamicOptions()",5); else i=0; } function showHide() { with(optionDiv.style) { if (clip=="rect(auto auto 0% auto)"\|\|clip=="") dynamicOptions(); else clip="rect(auto auto 0% auto)"; } } function putValue() { var url = OptionValue[selectedValue]; if (url) window.open(url) } </SCRIPT> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
erica118 职务：普通成员等级：1 金币：0.0 发贴：11	引用 #82005/1/26 16:25:31 硕思软件中的魔法菜单可以做的，还有很多别的软件，我只记得这个了
elffire1973 职务：普通成员等级：1 金币：0.0 发贴：3	引用 #92005/1/26 19:54:46 比我快先？！呵呵，硕思软件有很多功能，网上当吧。交流：elffire1973@126.com 注明5D，否既删。呵呵再联系。

每页显示15条 1/1<<<1>>

在回复主题:请教，那位能做出这种模样的下拉/跳动菜单？

正文：

下划线

文本颜色

插入链接

建立Google搜索链接

插入图片

引用文本

骄傲的笑

什么?

smile

frown

redface

biggrin

wink

rolleyes

mad

eek

禁止笑脸转换

提示：按 Ctrl+Enter 快速提交

关于我们 | 免责声明 | 合作联系 | 版权信息 | 友情链接 | ICP许可证:浙ICP备05007613号
©1999-2008 5D.cn. 版权所有

百度大联盟认证绿色会员