这个网站半透明下拉菜单怎样做的呢

2024-12-21 21:27:16
推荐回答(5个)
回答1:

以下整理的代码来自楼主提提供的网站,经本人本机测试可以正常使用。







//菜单
var menuOffX=0 //菜单距连接文字最左端距离
var menuOffY=20 //菜单距连接文字顶端距离
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
function showmenu(e,vmenu,mod){
which=vmenu
menuobj=document.getElementById("popmenu")
menuobj.thestyle=menuobj.style
menuobj.innerHTML=which
menuobj.contentwidth=menuobj.offsetWidth
eventX=e.clientX
eventY=e.clientY
var rightedge=document.body.clientWidth-eventX
var bottomedge=document.body.clientHeight-eventY
if (rightedge menuobj.thestyle.left=document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX
else
menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
if (bottomedge menuobj.thestyle.top=document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23
else
menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
menuobj.thestyle.visibility="visible"
}
function ie_y(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
function ie_x(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
function hidemenu(){if (window.menuobj)menuobj.thestyle.visibility="hidden"}
function dynamichide(e){if ((ie4||ns6)&&!menuobj.contains(e.toElement))hidemenu()}
document.onclick=hidemenu
document.write("")
//菜单END



document.write("推荐软件')\" >常用软件");
document.write("精品源码本站出品')\" >精品源码");
document.write("必备最新工具精品视频教程本站出品')\" >菜鸟黑客区");
document.write("推荐软件')\" >营销软件");
document.write("相关教程所用工具')\" >刷QQ业务专区");

回答2:

你用层+CSS可以实现
给你网页上的菜单加上阴影效果能很好的提高视觉效果,当然办法有很多,用Java和图片都能实现,但用Java你是不是觉得太复杂?用图片很简单,但如果菜单下面有内容,效果就太假了。下面我们只用dreamweaver4自身的功能,通过简单的办法就能让你网页上的菜单拥有真正半透明的阴影效果
下图是在Dreamweaver4中用层功能做的一个非常简单的弹出菜单:

图1

左边是触发条,当鼠标放在这些条目上右边就会弹出相应的菜单。这里我们假设要加上阴影效果的菜单层为submenu1。

首先,用层工具新建一个层,大小位置一定要和submenu1层保持一致,到属性面板把层的背景色改为黑色,到层面板选中这个新建出来的层,双击层的名字,将这个层的名字改成submenu1s,z高度设为比submenu1层低一级。

图2

选中submenu1s层,用键盘上的方向键往右和下挪动7、8次,使submenu1s层和submenu1层错开。

现在开始修改触发元素和菜单层的事件,以让submenu1s层和submenu1层的显示隐藏同步。选中submenu1层,到事件面板,一般这种方法做出的菜单都有两个事件,OnMouseOut和OnMouseOver,双击OnMouseOver事件,出现隐藏-显示层面板,选submenu1s层,点显示按钮,点确定关掉这个窗口。同样,再双击OnMouseOut事件,选submenu1s层,点隐藏按钮,点确定。

用上面的方法修改你自己菜单的触发元素的事件,这样submenu1s层和submenu1层就同时显示、隐藏。

到CSS面板新建一个样式,取名为shadow,在样式定义的窗口中到扩展栏。点滤镜下拉菜单,选中第一项“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”。

图3

修改其中的“?”:Alpha(Opacity=50, FinishOpacity=50, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=500)

其中Opocity=?用于控制半透明的程度,取值相当于百分比,你可以根据你自己的情况调整这个值。

选择submenu1s层,再到CSS单击shadow样式,对submenu1s层应用这个样式。

按F12预览看看吧。

回答3:

应该有三个js文件组成。

构成菜单,你可以改他编辑js文件来对比网站内容,





你可以下在他的网页来编辑js文件
第一个文件就是描写怎个菜单的功能,效果
第二和第三就是你在网页中看到的两行菜单,可以编辑器路径和连接的名称!
就这么简单

回答4:

JS代码我不是十分的明白,不过我只发表一下我的意见吧,如果说错了,请别扔鸡蛋呀.
那个东西如果让我做的话,我想我会用FLASH做,很简单的哦,把那一条全设置成按钮,鼠标经过时可以显示出下拉菜单,点击路径可以设置成相对路径,不过绝对路径好象也可以,就是麻烦点,嘿嘿,代码好象是geturl "网址"
好久不做网页了,嘿嘿,别扔鸡蛋,我知道我这种方法好象是过时了,但好象还能用,嘎嘎,我的分成负的了,给我吧哈

回答5:

\
这是他的JS调用代码
你把这个代码下下来放你站里用这个代码 调用就行了