悬停样式应该在动态加载多级菜单时保持单击状态
hover styles should stay onclick on multilevel menu loading dynamically
我使用下面的脚本创建了带有大量自定义的多级大菜单。
以下是相同的JsFiddle链接。
工作小提琴链接
下面是相同的CSS代码。
/* ######### Drop Down DIVs CSS ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: transparent;
border:none;
border-left: 2px solid #ffffff;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #09519b;
background-color: #d6d6d6;
text-decoration: none;
padding: 8px 0px 8px 13px;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
font-weight:bold;
background-color:#bfbfbf;
}
/* ######### Neutral CSS ######### */
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
/* ######### Marker List Vertical Menu ######### */
.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
/*position: relative;*/ /*Preserve this for "right" arrow images (added by script) to be positioned correctly*/
position: absolute;
top:136px;
}
.markermenu ul{
list-style-type: none;
margin: 56px 0 0 0;
padding: 0;
/*border: 1px solid #9A9A9A;*/
}
.markermenu ul li a{
background: #d6d6d6; /*light gray background*/
color: #09519b !important;
display: block;
width: auto;
padding: 8px 0;
padding-left: 13px;
text-decoration: none;
/*border-bottom: 1px solid #B5B5B5;*/
}
.topRound{
border-radius:5px 5px 0 0;
}
.bottomRound{
border-radius:0 0 5px 5px;
}
* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}
.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}
.markermenu ul li a:hover, .markermenu ul li a.selected{
font-weight:bold;
background-color:#bfbfbf;
}
/* ######### Customized Drop Down ULs CSS (inherits from ddlevelsmenu-base.css) ######### */
.blackwhite li a{
background: white;
}
.blackwhite li a:hover{
background: black;
color: white;
}
ul.miniBlocks{width:732px !important; background:#d6d6d6;}
ul.miniBlocks1{width:366px !important; background:#d6d6d6;}
.miniBlocks li{float:left !important;}
.miniBlocks1 li{float:left !important;}
.mattblackmenu a.selected, .ddsubmenustyle li.selected > a {
background: #bfbfbf; /*background of tab with "selected" class assigned to its LI */
color: #09519B;
font-weight:bold;
}
脚本和css运行良好。当您转到导航项目时,您可以看到鼠标悬停在所选内容上,背景颜色较深,字体为粗体。
现在,这个菜单是从js/jsp包含文件中动态生成的。
我需要的是,当用户想要打开一个页面时,点击它,悬停风格应该保持不变。
例如,
如果您将鼠标悬停在JavaScript参考>项目文件夹5b>项目文件夹5.2b>子项目5.2.1b上,并且当您想要打开子项目5.2.1b时,单击它,当与子项目5.2.lb相关的页面打开时,悬停样式应保持单击,以便用户在再次悬停并打开另一个页面或查看他在哪个页面时知道他在子项目5.2.1a页面上。
任何其他方式都是受欢迎的,但应该适用于我的动态场景。
如果这是针对单页应用程序的,那么只需为活动项指定一个active
类,即可将其设置为活动项。
否则,您将需要在服务器端执行此操作。您的CMS/服务器端应用程序需要为当前活动菜单项指定一个类active
。
.ddsubmenustyle li a:hover,
.ddsubmenustyle li a.active {
font-weight:bold;
background-color:#bfbfbf;
}
相关文章:
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- Dojo菜单栏选定状态
- Dojo栏菜单在选定状态下堆叠
- WordPress切换菜单 - 使菜单在当前页面上保持打开状态
- 如果其中一个子菜单项处于活动状态,则展开下拉菜单
- 悬停样式应该在动态加载多级菜单时保持单击状态
- 当子菜单的父级或包含链接处于活动状态时,如何告知子菜单可见
- Javascript在悬停状态下制作下拉菜单 - 没有HTML中的硬编码
- 如何使用 JavaScript 保存菜单状态
- 菜单悬停状态
- 下拉菜单不想保持打开状态
- 当目标处于顶部滚动状态时,如何从菜单中激活项目
- Jquery 无法返回到动画菜单列表上的活动状态
- JavaScript 下拉菜单在单击时处于活动状态,在外部单击时不活动
- 记住菜单状态垂直多级导航
- 从一页到另一页的多级推送菜单状态
- 记住重新加载时的菜单状态
- JS菜单保持菜单状态
- 选项卡和侧边菜单-状态链接不起作用
- 如何在页面重新加载时保持菜单状态