學會偷懶,并懶出境界是提高工作效率最有效的方法!
Ctrl + D 收藏我吧~
第一步;其實這個菜單的制作主要是用javascript+css制作而成的,javascript其實不難,難在css的定制上!javascript由
mt_dropdownC.js (控制圖片的路徑)
mt_dropdown_initialize.js (存放按鈕事件和圖片的調用)
mt_dropdown_content.js (存放菜單項)
這三個js組成的,下面我一步步地介紹這個菜單的做法。
第二步;我們分析一下mt_dropdown_content.js這個文件里的代碼:
var menu1 = ms.addMenu(document.getElementById("menu1"));
menu1.addItem("- 網絡開發","http://www.3dapple.com/net.asp");
menu1 //相當于第一菜單
網絡開發 //菜單名
http://www.3dapple.com/net.asp //鏈接地址
var subMenu0 = menu1.addMenu(menu1.items[0]);
subMenu0.addItem("- Asp代碼", "http://www.3dapple.com/net1.asp?name=net&type=asp");
subMenu0 //定義二級菜單
Asp代碼 //二級菜單名
http://www.3dapple.com/net1.asp?name=net&type=asp //鏈接地址
其它不做詳細分析,類同!
第三步;分析一下mt_dropdown_initialize.js這個文件里的代碼
menu1.onactivate = function() { swapImage("button1", preloaded[1][1].src) };
menu1.ondeactivate = function() { swapImage("button1", preloaded[1][1].src) };
button1 //指頁面內定義的第一菜單的按鈕名
第四步;我們分析一下mt_dropdownC.js這個文件里的代碼
這個文件里定義菜單里所用的相關路徑及打開文式
第五步;分析頁面按鈕
這里只對“精品代碼”做一下分析
<a href="script.asp" id=menu1 ><img border=0 height=24 id=button1 name=button1 src="media/dm.jpg" width=94></a>
id=menu1 //指定打開第一菜單
id=button1 //調用的圖片名
我用“id”這個圖片加以控制
其它類同
第六步;css 就不用我告訴大家了 特別附上源文件 希望大家能夠喜歡
不過要告訴大家一個缺點就是這個菜單極其耗機器資源!打開速度也沒有一般的菜單快,但他好在是三級的,可以動態生成
下一節我會教大家怎么用acsss+asp來動態生成這個菜單,不過為了保證頁面的打開正確,你的主欄目必須是固定的哦!先
買個關子,這樣才能給大家更多驚喜!