ASP.NET中二級菜單的實現

玉 冰

（云南農業職業技術學院，云南 昆明 650032）

一、元素布局設計

對于要實現的功能，頁面中元素布局要遵循三個原則。

1.穩定。不會因為子菜單的顯示，影響其他元素移位，子菜單寬度改變而影響其他元素的顯示效果。

2.因為前臺使用Jquery技術實現，要保證元素的位置和元素命名能符合讓Jquery控制的原則，便于Jquery對元素的尋找。

3.便于用后臺代碼來填充數據。

二、布局方式分析

圖1 分布式布局方式

這種布局方式是將一級菜單放入一個大的DIV，將二級菜單放入一個小的DIV中，然后再將DIV放入一個和大的DIV同樣寬度的IDV中來實現，如此可能會造成一級菜單與它下面的二級菜單寬度不一致，產生一級菜單與二級菜單錯位的問題。

現在常用的嵌套式布局，將一級菜單和二級菜單都放入一個IDV中。紫色框是一個包含所有菜單的大容器，寬度與頁面相同，橙色框是代表一級菜單組，包括一級菜單和二級菜單組，二級菜單放在二級菜單組中，橙色框寬度不會被二級菜單撐大。

圖2 嵌套式布局方式

三、后臺數據填充

1.查詢方法

就是將一級菜單表和二級菜單表建立連接，查詢得到一個新的數據。

選擇兩張表通過m0_id字段和m1_m0id字段一對多的關系，建立兩張表的連接，就得到一張查詢表，顯示一級菜單和二級菜單的所有信息。“在線商城”一級菜單下沒有二級菜單，需要修改SQL語句做右連接。

圖3 查詢方法

SELECT t_menuL0.*，t_menuL1.* FROM t_menuL1 RIGHT JOIN t_menuL0 ON t_menuL1.m1_m0id = t_menuL0.m0_id；

2.對于每條記錄的構建

圖4 對于每條記錄的構建

將每條記錄包含的菜單項的信息提取出來，尋找或構建div_menuset_m0id并將其放入界面的div_menu中。尋找或構建a_m0_m0id（主菜單項）并將其放入菜單組層（橙色）如有子菜單內容，構建子菜單項div_submenu_m0id將其放入菜單組層（橙色）在頁面尋找或構建子菜單a_m1_m0id，將構建好的子菜單插入pnl_submenu中。

在.cs代碼中構建橙色的層，將其插入到紫色框中；構建一級菜單，將其插入到橙色框中；構建二級菜單項，將其插入到橙色框中；在橙色框中構建二級菜單。

在頁面中呈現的結構每個層占據整個頁面寬度，下面通過CSS來控制每個層的顯示位置。

3.菜單顯示控制

建立一個偵聽器，鼠標移入時主菜單時偵聽相應主菜單，對子菜單的顯示速度進行控制。

當鼠標移出時，如果偵聽的是一級主菜單，就會出現鼠標還在主菜單時就會使子菜單消失的情況，所以需要偵聽的是紫色的大的DIV，當鼠標移出主菜單，子菜單就消失。

圖5 頁面運行的最終效果