自己用ASP寫的一個簡易菜單

一直想在網頁的左側加一個選擇產品分類的菜單。但.net自帶的控件不太理想，自己又不擅長Javescript，網上搜來的也不怎麼好使，還是自己編一個對付着用吧。如果訪問人數不是太多，產品變化不大，也能應付一陣。

具體原理是共兩級菜單，使用LinkButton控件作爲菜單項，其中二級菜單放在Panel控件中，由第一級菜單項控制顯示與否。

1、新建一個網頁文件，在頭部（<head>標籤之內）加入樣式（參考w3 schools的樣式改進）：

(下面的代碼有些重複了，開頭還加了一些字符，拷貝時請注意)

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">* { margin:0; padding:0; text-align: left; } body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; } #menu { width:300px; } .tryitbtn { margin-left:1px; BORDER: #ffffff 1px solid; TEXT-ALIGN: center; PADDING: 3px 0 4px 0; BACKGROUND-COLOR: #099; OUTLINE-STYLE: solid; OUTLINE-COLOR: #98bf21; OUTLINE-WIDTH: 1px; WIDTH: 120px; height:18px; DISPLAY: block; COLOR: #ffffff; FONT-SIZE: 11px; FONT-WEIGHT: bold; TEXT-DECORATION: none; } .tryitbtn:hover { BACKGROUND-COLOR: #3cc } .menubtn { margin-left:5px; TEXT-ALIGN:left; PADDING: 3px 5px 4px 10px; BACKGROUND-COLOR: #369; WIDTH: 120px; height:18px; DISPLAY: block; COLOR: #ffffff; FONT-SIZE: 11px; FONT-WEIGHT: bold; TEXT-DECORATION: none; } .menubtn:hover { BACKGROUND-COLOR: #699</style>

2、在Body的<form>標籤里加入控件：

<div id="menu"> <p> </p> <p> <asp:LinkButton ID="LinkButtonA" runat="server" οnclick="LinkButtonA_Click" CssClass="tryitbtn" Height="18px" Width="180px">LinkButton</asp:LinkButton> </p> <asp:Panel ID="PanelA" runat="server" Visible="False"> <ul> <li><asp:LinkButton ID="LinkButtonA1" runat="server" CssClass="menubtn" Height="18px" Width="160px">1111111111</asp:LinkButton></li> <li><asp:LinkButton ID="LinkButtonA2" runat="server" CssClass="menubtn" Height="18px" Width="160px">2222222222</asp:LinkButton></li> <li><asp:LinkButton ID="LinkButtonA3" runat="server" CssClass="menubtn" Height="18px" Width="160px">3333333333</asp:LinkButton></li> <li><asp:LinkButton ID="LinkButtonA4" runat="server" CssClass="menubtn" Height="18px" Width="160px">4444444444</asp:LinkButton></li> </ul> </asp:Panel> <p> <asp:LinkButton ID="LinkButtonB" runat="server" οnclick="LinkButtonB_Click" CssClass="tryitbtn" Height="18px" Width="180px">LinkButton</asp:LinkButton> </p> <asp:Panel ID="PanelB" runat="server" Visible="False"> <ul> <li><asp:LinkButton ID="LinkButton1" runat="server" CssClass="menubtn" Height="18px" Width="160px">1111111111</asp:LinkButton></li> <li><asp:LinkButton ID="LinkButton2" runat="server" CssClass="menubtn" Height="18px" Width="160px">2222222222</asp:LinkButton></li> <li><asp:LinkButton ID="LinkButton3" runat="server" CssClass="menubtn" Height="18px" Width="160px">3333333333</asp:LinkButton></li> <li><asp:LinkButton ID="LinkButton4" runat="server" CssClass="menubtn" Height="18px" Width="160px">4444444444</asp:LinkButton></li> </ul> </asp:Panel> <p> <asp:LinkButton ID="LinkButtonC" runat="server" οnclick="LinkButtonC_Click" CssClass="tryitbtn" Height="18px" Width="180px">LinkButton</asp:LinkButton> </p> <asp:Panel ID="PanelC" runat="server" Visible="False"> <ul> <li><asp:LinkButton ID="LinkButton5" runat="server" CssClass="menubtn" Height="18px" Width="160px">1111111111</asp:LinkButton></li> <li><asp:LinkButton ID="LinkButton6" runat="server" CssClass="menubtn" Height="18px" Width="160px">2222222222</asp:LinkButton></li> <li><asp:LinkButton ID="LinkButton7" runat="server" CssClass="menubtn" Height="18px" Width="160px">3333333333</asp:LinkButton></li> <li><asp:LinkButton ID="LinkButton8" runat="server" CssClass="menubtn" Height="18px" Width="160px">4444444444</asp:LinkButton></li> </ul> </asp:Panel> <p> <asp:LinkButton ID="LinkButtonZ" runat="server" CssClass="tryitbtn" Height="9px" Width="180px" Enabled="False"></asp:LinkButton> </p> <p> </p> </div>

3、在Code Behind里加入相應的方法：

public static int button = 0; protected void LinkButtonA_Click(object sender, EventArgs e) { if (button == 1) { this.PanelA.Visible = false; button = 0; } else { this.PanelA.Visible = true; button = 1; } this.PanelB.Visible = false; this.PanelC.Visible = false; } protected void LinkButtonB_Click(object sender, EventArgs e) { if (button == 2) { this.PanelB.Visible = false; button = 0; } else { this.PanelB.Visible = true; button = 2; } this.PanelA.Visible = false; this.PanelC.Visible = false; } protected void LinkButtonC_Click(object sender, EventArgs e) { if (button == 3) { this.PanelC.Visible = false; button = 0; } else { this.PanelC.Visible = true; button = 3; } this.PanelA.Visible = false; this.PanelB.Visible = false; }

其中定義了一個全局變量button，來記錄當前哪一個項目是打開的，注意其中的static修飾符。大家可以自己在樣式裏定義喜歡的顏色。還要在二級菜單控件中加入需要引用網頁的url。

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

自己用ASP寫的一個簡易菜單

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

給CSDN博客提個意見--垃圾代碼太多了

urlMapping----隱藏真正的url

怎樣在網頁的code behind裏動態改變控件的背景顏色

怎樣發佈Windows應用程序

自己用ASP寫的一個簡易菜單

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結