是否有內建控制項能做到階層式選單效果?

CCS
請教各位

在ASP.NET的控制項中是否有哪個控制項可以做到階層式選單

就像這個使用CSS完成階層式選單

或是這網站的選單範例網址

因為我印象中這些通常都是用CCS配JS或是純CSS做出來的效果

但有一位同事一直跟我說應該有控制項可以做出這效果

問題是他也不會寫ASP.NET~冏

我個人只有學習過TreeView的寫法

所以也沒辦法很肯定的反駁他

請問這樣的效果是否真的有控制項可以辦到呢?

謝謝

最有價值解答

WizardWu
ASP.NET 內建的 Menu 控制項即可做到,來源可為 XML 或其他,看 XML 的節點有幾層就可秀幾層的選單。

問題是我當年用這控制項時,滑鼠經過選單上就會立即彈出選單。
它沒內建屬性,可設定成滑鼠點一下再彈出,或滑鼠移到上面後等一兩秒再彈出,被 user 抱怨會干擾正常操作。
<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1" 
            Orientation="Horizontal" StaticSubMenuIndent="10px" BackColor="#F7F6F3" 
            DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.9em" ForeColor="#5F6BA7">
            <StaticSelectedStyle BackColor="#F7F6F3" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicHoverStyle BackColor="#6495ED" ForeColor="lemonchiffon" />
            <DynamicMenuStyle BackColor="#F7F6F3" />
            <DynamicSelectedStyle BackColor="#5D7B9D" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicMenuStyle CssClass="adjustedZIndex" /> 
            <DataBindings>
                <asp:MenuItemBinding DataMember="Item" TextField="Label"></asp:MenuItemBinding>
                <asp:MenuItemBinding NavigateUrlField="Href" DataMember="Option" TextField="Label"></asp:MenuItemBinding>
            </DataBindings>

            <StaticHoverStyle BackColor="#6495ED" ForeColor="lemonchiffon" />        
</asp:Menu>
        
<asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="/*/*"></asp:XmlDataSource>

CCS
謝謝WizardWu大大的回覆

這個是我寫出來的範例

有幾個問題想再請教

1.範例中是利用StaticDisplayLevels改成2讓父標籤底下的子標籤也能顯示到同一層

那請問一下有辦法將Menu父標籤改成跟Google和Yahoo同一層嗎?

因為Menu跟子標籤一起顯示看起來也很奇怪

還是說可以控制他的Visible的屬性之類的呢?

2.再bar中的每個子標籤都有個箭頭符號,請問這要修改哪個部份才能去除呢?

3.
<?xml version="1.0" encoding="utf-8" ?>
<Menu>
  <Yahoo url="https://tw.yahoo.com/">
    <新聞 url="https://tw.news.yahoo.com/"></新聞>
    <股票 url="https://tw.stock.yahoo.com/"></股票>
    <理財 url="https://tw.money.yahoo.com/"></理財>
    <運動 url="https://tw.sports.yahoo.com/"></運動>
  </Yahoo>
  <Google url="http://www.google.com.tw">
    <GMail url="https://mail.google.com/"></GMail>
    <Google翻譯 url="https://translate.google.com.tw/"></Google翻譯>
    <Google地圖 url="https://www.google.com.tw/maps/"></Google地圖>
  </Google>
</Menu>


以上是我XML的內容

想請問如果要讓每個選項都有超連結的功能

請問這部份可以修改哪裡呢?

謝謝指教
WizardWu
可參考任一本 ASP.NET 2.0 的舊書籍 (ASP.NET 3.x 以後的書籍,很少再有逐一介紹這些控制項的用法)

參考 msdn 的 Menu 類別的屬性及方法,或自己在 VS 逐一試 Menu 控制項的各個屬性。
微軟 ASP.NET WebForm 控制項,雖易學易用,但功能也很死,若微軟不開放給程式員設定的屬性,大概也很難自訂了。

3. 超連結用法 - XML 內容範例 (對應 1F 的 DataBindings 裡的 Item、Href、Option)
<?xml version="1.0" encoding="utf-8"?>
<System>
 <Item Label="根選單1">
  <Option Label=" 葉節點 f1_1.aspx" Href="子資料夾1/f1_1.aspx" />
  <Option Label=" 葉節點 f1_2.aspx" Href="子資料夾1/f1_2.aspx" />
 </Item>
 <Item Label="根選單2">
  <Option Label=" 葉節點 f2_1.aspx" Href="子資料夾2/f2_1.aspx" />
  <Option Label=" 葉節點 f2_2.aspx" Href="子資料夾2/f2_2.aspx" />
 </Item>
</System>

topcat
在控制項工具箱中
巡覽裡面的【Menu】【TreeView】
大概可以做出
來源可以是一個xml或者SiteMap
或者是直接安排在控制項中

也可以用程式一層一層的刻出來

^_^
MIS2000 Lab
ASP.NET 4.5專題實務(II),松崗出版

這本書有提到各種導覽控制項的作法
1. 搭配 .Sitemap檔
2. 搭配自訂的XML檔。
3. 寫程式(從資料庫抓資料)產生導覽列

還可以做到:
1. 多國語系
2. 搭配 Login控制項,依照不同權限,出現不同的導覽列(不需寫程式,設定即可完成)

保證不會讓您失望
http://24h.pchome.com.tw/books/prod/DJAA2V-A78626445
微軟MVP的ASP.NET 4.5專題實務II:範例應用與4.5新功能
回到頂部