1.介紹
目前很多網站使用了frame框架的結構，在頂端或左端放置菜單，可是一個非常頭疼的問題就是二級菜單會被其他的frame遮擋住。查了很多的資料，都是說這個問題在frame中是無法解決得，也就是說frame沒有設置可以修正這個問題。唯一的解決辦法就是用JavaScript畫動態層或動態定位已存在的子菜單層。在網上找到一款非常強大的菜單框架：menuG5，看了它的演示確實很牛，但是配置起來還着實費了番功夫，這裏就把我目前學到的配置方法共享給大家，省的去看英文幫助了。
先貼幾張實例圖，大家可以看看符不符合自己的口味，不符就可以直接關掉不看了。
帶普通樣式的菜單
子菜單和主菜單分別設置樣式
各主菜單不同底色
帶JavaScript效果的菜單
將菜單同時放在頂部和左側，二級菜單以下都是跨框架的
菜單高亮
帶圖片的菜單
帶提示的菜單
2.文件結構
到menuG5的網站http://www.yxscripts.com/menuG5/ 上下載框架包，解壓後文件目錄如下圖：
css：放置menuG5的默認樣式
examples：N個使用實例，通過這個學習如何配置和使用，我認爲比通過他的Document快多了
faq：如其名，一些問題解答，也就是一些使用方法
script：這個文件夾是最重要的，裏面包含了生成菜單的所有js文件，將來把這個包要複製到項目中去
index.html：主頁鏈接
3.使用配置方法
通過一個簡單項目我們來一步步看如何配置menuG5以生成我們自己的菜單。
1)新建一個asp.net項目
新建一個頁面index.aspx（index.htm也可以），在頁面中加入框架
index.aspx的結構爲上中下三個部分，top.aspx爲頂端放置一級菜單的頁面，footer.aspx爲底部頁面，Main.aspx爲主內容及放置二級、三級等子菜單的頁面。同時從腳本語句我們也可以看出，這裏根據用戶的權限Session["UserLevel"]不同可以加載不同的菜單，這就實現了菜單定製。頁面中一定要引用menuG5LoaderFSX.js文件才能正確生成菜單（具體路徑根據自己項目中menuG5的JavaScript文件所在位置來定）。
這三句指明瞭menuG5的js路徑，菜單內容的js路徑和菜單使用的樣式的路徑。
2)菜單所在頁面的配置
新建一個top.aspx文件，在頁面中加入如下代碼
注意其中的js文件位置要根據自身項目的情況來配置。TB.css是菜單的真實css文件，這個在下載到框架包中就有，通過它來配置菜單的css，要加上去，否則會很難看。這裏最重要的就是οnlοad="initMenu('Demo','top'); setSubFrame('Demo',parent.content); "，通過js方法生成指定的菜單。注意：setSubFrame中的參數parent.content就是生成子菜單的框架，這裏應該根據具體的frame名稱來修改。 而我們的菜單項和鏈接地址在哪裏配置呢？下面就來介紹配置菜單內容的文件。
3)菜單內容文件
新建js文件menu1.js（index.aspx中根據權限可以加載不同的菜單，就需要建立多個對應的menu*.js文件），當然了，文件名隨意，只需要在index.aspx中對應上即可。menu1.js中的內容如下：
addMenu()生成一個菜單Demo，addSumMenu()在Demo中生成菜單項(一級菜單)，addLink()生成帶超鏈接的菜單項。參數意義很容
易理解。如上一級菜單名、該菜單項顯示的名稱，該菜單的url，該菜單的名稱等等。
4)菜單樣式配置文件
還有一個非常重要的js文件，就是在index.aspx中給定路徑的fst4-style.js，其內容如下
這裏的樣式對應方式在menuG5的說明文檔中有詳細解釋。
addStylePad用來給包裹菜單的box定義樣式，item-offset設置菜單項之間的間距（若是水平菜單，則是橫向間距；若是垂直菜單則是縱向
間距），offset-top設置垂直間距。
addStyleItem設置菜單的具體樣式，css：指示具體樣式表（也就是TB.css）中的樣式名稱。
addStyleFont設置菜單的字體。
addStyleTag設置菜單上用來表示擁有子菜單的小圖片。
addStyleMenu將上面定義的菜單樣式加入到指定的menuG5元素中，如menu代表整個自定義菜單，sub代表一級菜單，sub2代表二級菜
單等等。addStyleGroup將定義好的樣式名稱與自定義菜單中每一層菜單的名稱對應起來，以便確定每級菜單使用的樣式。
addInstance生成自定義菜單，並按照指定的位置樣式顯示。注意：這裏的target：content指明瞭菜單超鏈接在名爲content的frame中
打開頁面。這一點很重要，否則就會在生成一級菜單的頁面中打開超鏈接。
PS：跨框架菜單分割條的實現：
以example文件中的frameset-t6.html實例爲例，需要注意三點：
1.在菜單構造js文件（content.js）中，增加分割條：
2.在樣式設置js文件(fst6-style.js)中，指定菜單所用分割條樣式：
3.在具有分割條菜單所在的frame頁面(fst6-sub.html)中加入具體樣式：
這樣就可實現跨框架菜單中分割條的加入：
5)注意事項
由於子菜單是在其他框架中生成的，所以每次打開一個菜單超鏈接後，顯示頁面的框架中原來的子菜單的樣式就被沖掉了，因此，必須在每一
個鏈接頁面中都包含子菜單的樣式表文件。
在項目中所有的menuG5的js文件都應該放在合適的位置並正確引用，有任何一個錯誤都有可能會造成菜單不顯示，而不顯示菜單並不會有任
何錯誤報出，所以在配置方面要仔細。
4.結尾
目前我對menuG5的研究就這些，祝大家能夠順利使用。
