Могу ли я сделать так, чтобы динамические элементы меню Asp.Net отображались вне родительского DIV без использования позиции: абсолютный?

Question

Могу ли я сделать так, чтобы динамические элементы меню Asp.Net отображались вне родительского DIV без использования позиции: абсолютный?

У меня проблема с тем, что динамические элементы меню находятся внутри контейнера Container, в то время как мне нужно, чтобы они отображались вне его без необходимости использовать абсолютное меню asp.net

Главное, что меню Asp.Net обрезается, поэтому остальная часть динамической части меню не отображается пользователю, потому что она скрыта внутри

Я надеюсь, что вы понимаете код и предлагаете некоторые решения проблемы. Спасибо за любые усилия

<!-- language: lang-html -->

        <!DOCTYPE html>

        <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
            <head runat="server">
                <link href="StyleSheet/MainStyleSheet.css" rel="stylesheet" />
                <link href="Content/themes/base/all.css" rel="stylesheet" />
                <link href="Content/themes/smoothness/jquery-ui.smoothness.css" rel="stylesheet" />
                <link href="StyleSheet/jquery-ui-timepicker-addon.css" rel="stylesheet" />

                <script src="Scripts/jquery-2.1.3.js"></script>
                <script src="Scripts/jquery-ui-1.11.4.js"></script>
                <script src="Scripts/jquery.ui.datepicker-ar.js"></script>
                <script src="Scripts/jquery-ui-timepicker-addon.js"></script>

    <style type="text/css">
        html,body, form {
            font-family: AmiriWeb, 'Amiri QuranWeb', Amiri, Arial;
            direction: rtl;
            overflow-x: hidden;
        }

        input, textarea, select {
            font-family: AmiriWeb, 'Amiri QuranWeb', Amiri, Arial;
            direction: rtl;
        }

        .Container {
            width: 1000px;
            margin: 0px auto;
            direction: rtl;
            overflow: hidden;
        }

        .TdGeneralStyle {
            padding: 10px 10px 10px 10px;
        }

        .AdminMenuStyle{
            background-color: black;
        }

        .AdminMenuStyle a{
            color: lightgreen;
            display: block;
            font-weight: bold;
            padding: 10px;
            width: 100%;
            background-position: 14% center !important;
        }

        .AdminMenuStyle ul, .AdminMenuStyle li{
            background-color: black;
            border: 1px solid #F75D59;
        }
         .AdminMenuStyle ul:hover, .AdminMenuStyle li:hover{
            background-color: #F75D59;
        }

        .AdminStaticMenuStyle{
            width: 100% !important;
        }

        .AdminDynamicMenuStyle{
            width: 180px !important;
        }
    </style>
            </head>
            <body>
                <form id="form1" runat="server">
                    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                    <div class="Container">
                        <table style="border: 5px solid green; border-collapse: collapse; width: 100%;">
                <tr style="background-color: green; ">
                    <td style="width: 20%; color: yellow; font-weight: bold; " class="TdGeneralStyle">إسم المستخدم </td>
                    <td style="width: 80%; " class="TdGeneralStyle"></td>

                </tr>
                <tr>
                    <td style="width: 20%; background-color: black; vertical-align: top;">
                        <asp:Menu ID="Menu1" CssClass="AdminMenuStyle" Width="100%" runat="server" StaticPopOutImageUrl="~/AppItems/AppImages/PalFlagIconMenu.png" DynamicPopOutImageUrl="~/AppItems/AppImages/PalFlagIconMenu.png" MaximumDynamicDisplayLevels="5">
                            <DynamicMenuStyle CssClass="AdminDynamicMenuStyle" />
                            <Items>
                                <asp:MenuItem Text="المقالات" Value="المقالات">
                                    <asp:MenuItem Text="جديد" Value="جديد" NavigateUrl="~/Admin/ArticlesAdmin/AddArticle.aspx"></asp:MenuItem>
                                    <asp:MenuItem Text="تعديل" Value="تعديل"></asp:MenuItem>
                                    <asp:MenuItem Text="الكاتب" Value="الكاتب">
                                        <asp:MenuItem NavigateUrl="~/Admin/WriterAdmin/AddWriter.aspx" Text="جديد" Value="جديد"></asp:MenuItem>
                                        <asp:MenuItem Text="تعديل" Value="تعديل"></asp:MenuItem>
                                    </asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="مستخدم" Value="مستخدم">
                                    <asp:MenuItem Text="جديد" Value="جديد"></asp:MenuItem>
                                    <asp:MenuItem Text="تعديل" Value="تعديل"></asp:MenuItem>
                                    <asp:MenuItem Text="تغيير الكلمة السرية" Value="تغيير الكلمة السرية"></asp:MenuItem>
                                </asp:MenuItem>
                            </Items>
                            <StaticMenuStyle CssClass="AdminStaticMenuStyle" />
                        </asp:Menu>
                    </td>
                    <td style="width: 80%; vertical-align: top;" class="TdGeneralStyle" >
                        <asp:ContentPlaceHolder ID="cphDefaultAdminMasterPageBody" runat="server">
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="border-top: 5px solid green; font-weight: bold; text-align: center; background-color: green; color:yellow;">
                        2015
                    </td>
                </tr>
            </table>
                    </div>
                </form>
            </body>
            </html>

-1

html css asp.net webforms aspmenu-control

Источник

user4678050 16 мар '15 в 20:58

1 ответ

Решение

Другие вопросы по тегам html css asp.net webforms aspmenu-control

user4678050 21 мар '15 в 09:34 2015-03-21 09:34 · Accepted Answer · 2015-03-21 09:34

Решение проблемы меню было с использованием абсолютного только это то, что я получил, и проблема решена:

.AdminMenuStyle {
    background-color: black;
    position: absolute;
}

    .AdminMenuStyle a {
        color: lightgreen;
        display: block;
        font-weight: bold;
        padding: 10px;
        width: 100%;
        background-position: 14% center !important;
    }

    .AdminMenuStyle ul, .AdminMenuStyle li {
        background-color: black;
        border: 1px solid #F75D59;
        width: 100% !important;
    }

        .AdminMenuStyle ul:hover, .AdminMenuStyle li:hover {
            background-color: #F75D59;
        }

.AdminStaticMenuStyle {
}

.AdminDynamicMenuStyle {
}


<script>
        function fixMenuBackContainerHeight() {
            var menuObject = $('#<%= mAdminMenu.ClientID  %>');
            var tdMenuContainer = $('#tdMenuContainer');
            var menuHeight = menuObject.height();
            tdMenuContainer.css("min-height", menuHeight);
            menuObject.width(tdMenuContainer.width());
        }

        $(function () {
            fixMenuBackContainerHeight();
        });
    </script>