2.0 Menu 2级菜单过长加样式

            终于有时间写blog了，申请了一周之久，第一次写，最近遇到了一个问题，关于Menu的2级菜单，因为
要显示的项数量太多，所以它会越出父亲菜单，延伸到页面的最顶部，下面也延伸到了最下面，如果鼠标不
是3D的，你根本看不到下面的尖头（这个是MS Menu自带的功能，太高了会自动加）。整整我研究了一天Menu的属性，但就是没有能控制高度的，当我在google找资料的时候发现了CSS Control Adapter Toolkit for ASP.NET  ，通过它可以自己设计 Menu的样式，刚开始真的很兴奋，终于可以对复杂的ControlTools进行自己的样式定义，我照着例子自己做了一个Menu，恩，完全达到了自己想要的效果，以为大功告成，我把样式和代码加入到了我现有的程序中，运行，结果我所有其他没定义样式的Menu全变形了，真晕，查找原因，原因找到了App_Browsers里的文件，它定义了控件反射的效果，一定应该有解决办法吧！但目前还没有解决。

            希望有谁知道能告诉我，不过还好我在其他网页中得到了启示，我从不知道还可以对Menu的DynamicMenuStyle定义CssClass,这真的是太让我高兴了。马上做了个实验，一切OK。

            这个Menu的菜单项是通过另一个上级Menu点击动态绑上去的，上级菜单为地区菜单，帮定菜单是县区菜单，县区菜单的2级菜单是乡镇，如图：



下面写一些关键性代码：

<head runat="server">
    <title>话务变化分析</title>
    <meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=23)"/>
    <link href="../Css/stylehuawutrend.css" rel="stylesheet" />
    <link rel="stylesheet" href="../Css/Menu.css" type="text/css" />
    <script language="javascript" type="text/javascript">  
    function scrollwindowRight()  
    {
      var  menu = document.getElementById("menuDiv");
        menu.scrollLeft+=150;
    }
    function scrollwindowLeft()  
    {

        var  menu = document.getElementById("menuDiv");
        menu.scrollLeft-=150;
    }
    </script>
</head>

<%-- 区县乡镇集团导航 --%>
                                <table cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td align="right"><asp:Button ID="btnLeft" runat="server" Text="<<"  ForeColor="#3366cc"
                                            Style=" border: 0; cursor: hand; vertical-align: middle;"
                                             OnClientClick="scrollwindowLeft();return false;" ToolTip="向左移动菜单" BackColor="#f0f0f0" Visible="False" /></td>
                                        <td align="center">
                                            <div id="menuDiv" style="overflow:hidden; width:600px;">
                                            <asp:Menu ID="menuGroup" runat="server" StaticTopSeparatorImageUrl="~/Images/menu/blue.gif" 
                                                OnMenuItemClick="menuGroup_MenuItemClick"  OnDisposed="menuGroup_Disposed" 
                                                OnMenuItemDataBound="menuGroup_MenuItemDataBound" DisappearAfter="5000">
                                            <DynamicMenuStyle CssClass="Group" />
                                            
                                            </asp:Menu>
                                            </div>
                                        </td>
                                        <td align="left"><asp:Button ID="btnRight" runat="server" Text=">>"  ForeColor="#3366cc"
                                            Style="border: 0; cursor: hand; vertical-align: middle;" BackColor="#f0f0f0"
                                             OnClientClick="scrollwindowRight();return false;" ToolTip="向右移动菜单" Visible="False" /></td>
                                        <td style="width:30px"></td>
                                    </tr>
                                </table>
                                
                                
                                        <%--区县--%>
            <asp:XmlDataSource ID="menuSectionXmlSource" runat="server" CacheExpirationPolicy="Sliding" CacheKeyDependency="60" />

 

绑定县区

 

/*
对应menu的最外层样式，即StaticMenuStyle
*/
.TopGroup
{
    background-color: white;
    background-image: url(../Image/item_bg.gif);
}

/*
对应menu的弹出层样式，即DynamicMenuStyle
*/
.Group
{
    border: solid 1px #737373;
    margin-top: 5px;
    height:300px;
    overflow:auto;
    overflow-x:hidden;
    position:fixed;
}


/*
对应menu的DynamicMenuStyle和StaticMenuItemStyle
*/
.Item
{
    font-family: 宋体,tahoma;
    font-size: 12px;
    margin: 1px;
    cursor: default;
}

/*
对应menu的StaticMenuSelectedStyle
*/
.ItemHover
{
    background-color: white;
    background-image: url(../Image/item_bg.gif);
    color: black;
    font-family: 宋体,tahoma;
    font-size: 12px;
    border: solid 1px #ABABAB;
    border-right-color: #737373;
    border-bottom-color: #737373;
    cursor: default;
}

/*
对应menu的DynamicMenuSelectedStyle
*/
.ItemExpanded
{
    background-color: white;
    background-image: url(../Image/item_bg.gif);
    color: black;
    font-family: 宋体,tahoma;
    font-size: 12px;
    border: solid 1px #737373;
    border-right-color: #ABABAB;
    border-bottom-color: #ABABAB;
    cursor: default;
}


 如果谁要再想要给2级菜单加滚动条的时候，可以参考一下，希望能做到抛砖引玉的效果。

posted on 2007-04-25 19:06  执法长老  阅读(966)  评论(0)    收藏  举报

导航