学院要求给官网加一个三级菜单

最新推荐文章于 2025-12-03 23:30:00 发布

原创最新推荐文章于 2025-12-03 23:30:00 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#freemarker #html #css

前端专栏收录该内容

3 篇文章

订阅专栏

本文探讨了如何使用FreeMarker动态生成'导师风采'子菜单，通过数据驱动避免硬编码，同时利用CSS position属性实现不占文档流的DIV显示与隐藏。作者分享了处理HTML数据、CSS布局调整和事件管理的方法。

背景

学院要求在官网的左侧菜单添加子菜单，这个功能主要有两个难点：第一，参数的传递方法；第二，新增DIV块在文档流的表现形式。
在这里插入图片描述

难点分析及解决方案

在“导师风采”这里加一个子菜单，数据使用FreeMarker从后台读入，所以不能写死，需要判断这个ul的子项li的数据的have_child是否为true,这个问题有两种实现方式，一种是为该子项添加事件，将ul的整体数据传到函数中去判断，这种方式的缺点在于，需要进行极其麻烦的数据转换，因为从HTML标签传数据，只能传一个字符串到函数中去，而这个字符串是object.toString()的形式，接下来还需要做一系列处理，所以在老师的点拨下，我选择了第二种方式，也就是使用FreeMarker标签。
问题的第二个难点在于，我们需要插入一个DIV块级元素，这个元素不能占用正常的文档流空间，我曾尝试使用display属性改变，在尝试使用（absolute，reactive，flex，etc）之类的属性之后，发现它们都会占用文档流的空间，效果千奇百怪的诡异，然后我放弃了修改display属性，我采用了position属性，即position:sticky，然后设置“研究生培养”的ul的层级的z-index=1,“导师风采”的li标签包裹新增的DIV块，设置DIV的z-index=2,这样就实现了滚动鼠标，DIV块随着“导师风采”li标签滚动的效果。
在这里插入图片描述
如果要实现“导师风采”的子菜单收缩的效果，鼠标滑入我们可以添加onmousemove事件，鼠标滑出添加onmouseout事件，但是由于我暂时不会添加“三角形旋转”的效果，所以这两个事件在正式上线的时候被删除了。

添加事件的源码

<ul style="z-index:1;">
    <li style="font-size: 19px;background-color: #005A99;">
        <a href="" style="margin-left: 19px;color: #FEFFFF;">${positionChainList[0].type_name} </a>
    </li>

    <#list leftMenuRows as leftMenuRow>
		<#if leftMenuRow.have_child == true>
			<li onmouseout="hideMenu()" onmousemove="showMenu()">
				<!-- ${leftMenuRow} -->
				<a href="/in/${leftMenuRow.type_id}" <#if leftMenuRow.type_id == typeRow.type_id >style="color:orange;font-weight:bold;"</#if> >${leftMenuRow.type_name}</a>
				<div id="thirdMenu" style="display:none;position:sticky;background-color:#E9EBEC;z-index:2;text-align:left;">
					<ul>
						<#list leftMenuRow.childrenRows as item>
							<li style="padding-left:15px">
								<a href="/in/${item.type_id}" <#if item.type_id == typeRow.type_id >style="color:orange;font-weight:bold;"</#if>>
									${item.type_name}
								</a>	
							</li>
						</#list>
					</ul>
				</div>
			</li>
			<#else>
				<li>
					<a href="/in/${leftMenuRow.type_id}" <#if leftMenuRow.type_id == typeRow.type_id >style="color: orange;font-weight:bold;"</#if> >${leftMenuRow.type_name}</a>
				</li>
		</#if>
    </#list>
</ul>

<ul style="margin-top: 10px;">
    <li style="height: 227px;">
        <img src="/static/this/images/library_image.png"/>
    </li>
</ul>

<script>
	function showMenu(){
		document.getElementById("thirdMenu").style.display="block";
	}
	function hideMenu(){
		document.getElementById("thirdMenu").style.display="none";
	}
</script>

删除事件后又修改样式的源码

<ul style="z-index:1;">
    <li style="font-size: 19px;background-color: #005A99;">
        <a href="" style="margin-left: 19px;color: #FEFFFF;">${positionChainList[0].type_name} </a>
    </li>

    <#list leftMenuRows as leftMenuRow>
		<#if leftMenuRow.have_child == true>
			<li style="border-bottom:none">
				<!-- ${leftMenuRow} -->
				<a href="/in/${leftMenuRow.type_id}" <#if leftMenuRow.type_id == typeRow.type_id >style="color: orange;font-weight:bold;"</#if> >${leftMenuRow.type_name}</a>
				<div id="thirdMenu" style="position:sticky;background-color:#F6F6F6;z-index:2;text-align:left;">
					<ul style="border:none">
						<#list leftMenuRow.childrenRows as item>
							<li style="padding-left:15px;border-left:none;font-size:12px">
								<a href="/in/${item.type_id}" <#if item.type_id == typeRow.type_id>style="color:orange;font-weight:bold"</#if>>
									${item.type_name}
								</a>	
							</li>
						</#list>
					</ul>
				</div>
			</li>
			<#else>
				<li>
					<a href="/in/${leftMenuRow.type_id}" <#if leftMenuRow.type_id == typeRow.type_id >style="color: orange;font-weight:bold;"</#if> >${leftMenuRow.type_name}</a>
				</li>
		</#if>
    </#list>
</ul>

<ul style="margin-top: 10px;">
    <li style="height: 227px;">
        <img src="/static/this/images/library_image.png"/>
    </li>
</ul>