如何实现这种菜单

登录

请问如何实现如图这种菜单模式

dystar001 · dystar001

例子请见附件，
活字格上的任何控件，都能用这个方式，关键是你要能找到页面上相应元素的dom，
我用的方式是：

打开页面，打开开发者工具，Elements，在源码的中选中你需要的元素，右键，Copy JS path, 就会得到：
document.querySelector("#r0c0p > ul > li:nth-child(1)") ，括号内是demo的数据

这里就是页面菜单上你的选择项目。

然后就用onmouseover这类的语法，开启鼠标移入移出的功能。

但这个帖子楼主的问题未必全部能解决，因为还要解决二级菜单显示和切换的问题。这还需要一些其它界面设计的智慧的。

zyk.Zhou · zyk.Zhou

您好，这个功能应该可以通过打开一个弹出页面来实现。

妄想社成员 · 妄想社成员

弹出下拉框，显示模式以下拉菜单显示，定位单元格到页面的左上角

tonyfu · tonyfu

感谢大佬我测试后发现这个方法的弊端是必须得鼠标点击才弹出子菜单能否实现鼠标悬浮即显示子菜单请大佬指教

妄想社成员 · 妄想社成员

tonyfu 发表于 2021-8-14 11:46
感谢大佬我测试后发现这个方法的弊端是必须得鼠标点击才弹出子菜单能否实现鼠标悬浮即显示子菜单请大佬 ...

这个需要写JS代码了

tonyfu · tonyfu

妄想社成员发表于 2021-8-14 11:50
这个需要写JS代码了

请问大佬用上面的方法弹出页面后想实现鼠标移动到不同的主菜单栏目自动切换对应的右侧子菜单用JS代码如何实现期待大佬指点

zyk.Zhou · zyk.Zhou

tonyfu 发表于 2021-8-15 18:34
请问大佬用上面的方法弹出页面后想实现鼠标移动到不同的主菜单栏目自动切换对应的右侧子菜单用JS代 ...

这里面好像有demo
https://gcdn.grapecity.com.cn/fo ... dateline&page=1

tonyfu · tonyfu

zyk.Zhou 发表于 2021-8-15 19:10
这里面好像有demo
https://gcdn.grapecity.com.cn/fo ... dateline&page=1

请教大佬这个demo程序下载后运行页面没反应我把文件上传上来大佬帮忙看看

tonyfu · tonyfu

本帖最后由 tonyfu 于 2021-8-16 10:53 编辑

这个是大佬发的贴子里面的例程运行没有反应

		自动登录	找回密码
密码			立即注册

[已处理] 如何实现这种菜单

最佳答案

25 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

活字格认证

圣诞拼拼乐

悬赏达人

时代开发者征文活动