jpress 如何增加二级菜单或是三级菜单

/ 2021-05-28 / 43人浏览 / 0人评论

说明

当前我使用的主题是calmlog魔改版本,后续完善好了之后会把该主题开放出来,主题名字就叫jpress_calmlog_zb。

前提

现在先说说下面改造的代码基于calmlog主题或者是使用bootstrap设置菜单的主题都是适用的,如果不是也没关系,也会说下代码逻辑是什么,如果是小白可以看看。

改造ing

先把代码贴上来,各位姥爷有问题下面评论区提出来,或者加我微信(网页右侧、移动端下方 二维码)

<nav class="navbar navbar-expand-lg navbar-light">
	<a class="navbar-brand" href="/">
			<img src="#option('calmlog_logo','img/logo.jpg')" width="144" alt="">
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
			<ul class="nav navbar-nav">
					#for(menu : MENUS)
							#if(menu.hasChild())
							<li class="nav-item dropdown #(menu.isActive ? 'active' : '')">
									<a class="nav-link" href="#(WEB_DOMAIN + menu.url)"  data-toggle="dropdown">#(menu.text)<span class="sr-only">(current)</span></a>
									<ul class="dropdown-menu">
											#for(childMenu : menu.getChilds())
													<li style="padding:10px;"> <a href="#(WEB_DOMAIN + childMenu.url ??)">#(childMenu.text ??)</a> </li>
											#end
									</ul>
							</li>
							#else
							<li class="nav-item #(menu.isActive ? 'active' : '')">
									<a class="nav-link" href="#(WEB_DOMAIN + menu.url)">#(menu.text) <span class="sr-only">(current)</span></a>
							</li>
							#end
					#end
			</ul>
	</div>
</nav>

上面代码就是二级菜单的代码,如果想鼠标移动到一级菜单,二级菜单自动出来,增加如下css样式

.navbar .nav > li:hover .dropdown-menu {
    display: block;
}

二级菜单怎么实现

二级菜单怎么实现?我们看一段代码

#for(menu : MENUS)
    <li> 
		   <a href="#(menu.url ??)">#(menu.text ??)</a>
			 #if(menu.hasChild())
					<ui class="二级菜单的class">
					#for(childMenu : menu.getChilds())
							<li> <a href="#(menu.url ??)">#(menu.text ??)</a> </li>
					#end
			</ui>
			#end
		</li>
#end

代码中基本的逻辑还是先展示一级菜单,循环遍历出的时候,去判断一级菜单下是否有子菜单,有的话就把子菜单获取到再循环遍历一般。以此可以推理三级、四级菜单也是可以同理获得。

全部评论