自创的菜单可缩进的frameset布局

最新推荐文章于 2021-01-28 11:49:58 发布

原创

最新推荐文章于 2021-01-28 11:49:58 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #html #iframe #function #border #jquery

本文介绍了一种原创的菜单栏布局方法，利用frameset和jQuery实现可缩放的效果。通过调整frameset的cols属性，实现了左侧菜单的隐藏和显示，同时解决了iframe在高度适应和缩进问题上的不足。详细代码展示了如何通过点击控制图片来切换菜单的展开与收缩状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原创的菜单栏可进行缩放的frameset布局。

以前做项目都是项目经理搭好架子，项目组成员进场开发自己的业务即可，这次自己做了个页面的整体布局，如下代码所示：

frameset.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
</head>
<frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="a.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="80,10,*" frameborder="no" border="0" framespacing="0">
<frame src="b.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="flag.html" name="flag" scrolling="No" noresize="noresize" id="flag" title="flag" />