首页 > 语言 > JavaScript > 正文

Bootstrap风格的zTree右键菜单

2024-05-06 15:11:19
字体:
来源:转载
供稿:网友

HTML:

<%-- 右键菜单 --%><div id="zTreeRightMenuContainer" style="z-index: 9999;"> <%-- 层级 0 --%> <ul class="dropdown-menu" role="menu" level="0">    <%-- 通过给菜单项添加样式“hasChildren”并在li标签下添加菜单结构即可扩展子级菜单 --%>  <li class="hasChildren"><a tabindex="-1" action="refreshzTreeObj">刷新</a>   <ul class="dropdown-menu" role="menu" level="1">    <li><a tabindex="-1">将数据库复制到不同的主机/数据库</a></li>    <li><a tabindex="-1">创建数据库</a></li>    <li><a tabindex="-1">改变数据库</a></li>    <li><a tabindex="-1">新数据搜索</a></li>    <li><a tabindex="-1">创/建</a></li>    <li><a tabindex="-1">更多数据库操作</a></li>    <li class="divider"></li>    <li><a tabindex="-1">备份/导出</a></li>    <li><a tabindex="-1">导入</a></li>    <li class="divider"></li>    <li><a tabindex="-1">在创建数据库架构HTML</a></li>   </ul>  </li> </ul> <%-- 层级 1 --%> <ul class="dropdown-menu" role="menu" level="1">  <li><a tabindex="-1">将数据库复制到不同的主机/数据库</a></li>  <li><a tabindex="-1">创建数据库</a></li>  <li><a tabindex="-1">改变数据库</a></li>  <li><a tabindex="-1">新数据搜索</a></li>  <li><a tabindex="-1">创/建</a></li>  <li><a tabindex="-1">更多数据库操作</a></li>  <li class="divider"></li>  <li><a tabindex="-1">备份/导出</a></li>  <li><a tabindex="-1">导入</a></li>  <li class="divider"></li>  <li><a tabindex="-1">在创建数据库架构HTML</a></li> </ul> <%-- 层级 2 --%> <ul class="dropdown-menu" role="menu" level="2">  <li><a tabindex="-1">创建表</a></li>  <li><a tabindex="-1">将表复制到不同的主机/数据库</a></li>  <li><a tabindex="-1">数据搜索</a></li>  <li class="divider"></li>  <li><a tabindex="-1">计划备份</a></li>  <li><a tabindex="-1">备份表作为SQL转储</a></li> </ul></div>

CSS:

/* 右键菜单 - start */ .dropdown-menu .dropdown-menu {  position: absolute;  top: -9px;  left: 100%; } .dropdown-menu li {  position: relative; } .dropdown-menu li.hasChildren:before {  content: '';  position: absolute;  top: 50%;  right: 8px;  width: 0;  height: 0;  margin-top: -5px;  border-style: solid;  border-color: transparent transparent transparent rgba(0, 0, 0, 0.5);  border-width: 5px 0 5px 5px;  pointer-events: none; } .dropdown-menu li.hasChildren:hover > .dropdown-menu {  display: block; } /* 右键菜单 - end */            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选