实例2延伸:相对定位的下拉菜单
上一节
下一节
实例2延伸:相对定位的下拉菜单
刚才的“实例2:绝对定位的下拉菜单”有两个缺点——1)主菜单不能居中,否则子菜单的位置算不准;2)如果主菜单的宽度是百分比宽度,当客户端分辨率不同时(可用调整浏览器窗口宽度的方法模拟),子菜单宽度不能随主菜单的宽度同步变化。
如何解决?需要使用相对定位的层来制作。
制作要点:
1)整个菜单是一个两行N列的表格,主菜单在上面一行的各单元格,子菜单在下面一行的各单元格。
2)子菜单的“<div></div>”标签必须处于相应的“<td></td>”标签中,以确保子菜单的<div>是相应<td>的子对象。
3)子菜单left\top属性都空着,表示子菜单和所在单元格从同一个顶点开始;子菜单的width属性可定为100%,表示子菜单和它的上级元素(所在单元格)一样宽。这样,将来子菜单的位置就能始终与主菜单对齐,宽度也随主菜单自动变化了。
4)当显示隐藏层行为做好后,将子菜单的position(位置)属性由absolute(绝对定位)改为relative(相对定位)。这样才能真正启动相对定位模式。
具体效果见接下来的视频。