Change Menu arrow direction in ASP.Net

Last Reply 9 days ago By pandeyism

Posted 9 days ago

I have a menu that I want to change the direction of the arrow to rtl. this is my code:

        <div>
            <div class="sidebar-menu">
                <div dir="rtl">
                    <asp:Menu ID="Menu1" runat="server" BackColor="#303641" BorderColor="303641" Font-Names="Segoe UI" ForeColor="White" Height="50px" Width="150px" Orientation="Vertical" Font-Size="Medium" VerticalPadding="5px">
                        <DynamicHoverStyle BackColor="#303641" Font-Names="Segoe UI" ForeColor="White" Height="50px" Width="150px" BorderColor="Black" Font-Size="Large" />
                        <DynamicMenuItemStyle BackColor="#303641" BorderColor="Black" Font-Names="Segoe UI" ForeColor="White" Height="50px" Width="150px" Font-Size="Small" VerticalPadding="5px" />
                        <DynamicMenuStyle BackColor="#303641" Height="50px" Width="150px" BorderColor="Black" VerticalPadding="5px" />
                        <DynamicSelectedStyle BackColor="#303641" BorderColor="Black" Font-Names="Segoe UI" ForeColor="White" Height="50px" Width="150px" VerticalPadding="5px" />
                        <Items>
                            <asp:MenuItem Text="راهنما" Value="راهنما"></asp:MenuItem>
                            <asp:MenuItem Text="مدیریت آموزش" Value="مدیریت آموزش">
                                <asp:MenuItem Text="واحد درسی" Value="واحد درسی"></asp:MenuItem>
                                <asp:MenuItem Text="مدیریت انسانی" Value="مدیریت انسانی">
                                    <asp:MenuItem Text="فرد" Value="فرد">
                                        <asp:MenuItem Text="تعریف فرد" Value="تعریف فرد"></asp:MenuItem>
                                        <asp:MenuItem Text="مدیریت فرد" Value="مدیریت فرد"></asp:MenuItem>
                                    </asp:MenuItem>
                                    <asp:MenuItem Text="دانشجو" Value="دانشجو">
                                        <asp:MenuItem Text="تعریف دانشجو" Value="تعریف دانشجو"></asp:MenuItem>
                                        <asp:MenuItem Text="مدیریت دانشجو" Value="مدیریت دانشجو"></asp:MenuItem>
                                    </asp:MenuItem>
                                    <asp:MenuItem Text="استاد" Value="استاد">
                                        <asp:MenuItem Text="تعریف استاد" Value="تعریف استاد"></asp:MenuItem>
                                        <asp:MenuItem Text="مدیریت استاد" Value="مدیریت استاد"></asp:MenuItem>
                                    </asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="انتخاب واحد" Value="انتخاب واحد"></asp:MenuItem>
                                <asp:MenuItem Text="گزارشگیری" Value="گزارشگیری"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="انتخاب واحد" Value="انتخاب واحد"></asp:MenuItem>
                            <asp:MenuItem Text="گزارشگیری" Value="گزارشگیری">
                                <asp:MenuItem Text="لیست حضور و غیاب" Value="لیست حضور و غیاب"></asp:MenuItem>
                                <asp:MenuItem Text="حضور و غیاب جلسه امتحان" Value="حضور و غیاب جلسه امتحان"></asp:MenuItem>
                            </asp:MenuItem>
                        </Items>
                        <StaticHoverStyle Font-Names="Segoe UI" ForeColor="White" BackColor="#303641" BorderColor="Black" Height="50px" Width="100px" />
                        <StaticMenuItemStyle BackColor="#303641" BorderColor="Black" Font-Names="Segoe UI" Height="50px" Width="100px" />
                        <StaticMenuStyle BackColor="#303641" BorderColor="Black" Height="50px" Width="100px" />
                        <StaticSelectedStyle BackColor="303641" BorderColor="#333333" Font-Names="Segoe UI" ForeColor="#FFFFCC" Height="50px" Width="100px" />
                    </asp:Menu>
                </div>
            </div>

 

.sidebar-menu {
  position:center;
  float: left;
  width: 200px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #303641;
  color: #aaabae;
  font-family: "Segoe UI";
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
  direction:rtl;
  text-align:right;
  padding-right:10px;
}

how can I change the direction of the menu arrow?

Posted 9 days ago

Hi dorsa,

 Refer below sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .sidebar-menu
        {
            position: center;
            float: left;
            width: 200px;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: #303641;
            color: #aaabae;
            font-family: "Segoe UI";
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
            z-index: 1;
            direction: rtl;
            text-align: right;
            padding-right: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="sidebar-menu">
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <div dir="rtl">
                <asp:Menu ID="Menu1" runat="server" BackColor="#303641" BorderColor="303641" Font-Names="Segoe UI"
                    ForeColor="White" Height="50px" Width="150px" Orientation="Vertical" Font-Size="Medium"
                    VerticalPadding="5px" StaticPopOutImageUrl="~/LeftCaret.jpg" DynamicPopOutImageUrl="~/LeftCaret.jpg">
                    <DynamicHoverStyle BackColor="#303641" Font-Names="Segoe UI" ForeColor="White" Height="50px"
                        Width="150px" BorderColor="Black" Font-Size="Large" />
                    <DynamicMenuItemStyle BackColor="#303641" BorderColor="Black" Font-Names="Segoe UI"
                        ForeColor="White" Height="50px" Width="150px" Font-Size="Small" VerticalPadding="5px" />
                    <DynamicMenuStyle BackColor="#303641" Height="50px" Width="150px" BorderColor="Black"
                        VerticalPadding="5px" />
                    <DynamicSelectedStyle BackColor="#303641" BorderColor="Black" Font-Names="Segoe UI"
                        ForeColor="White" Height="50px" Width="150px" VerticalPadding="5px" />
                    <Items>
                        <asp:MenuItem Text="راهنما" Value="راهنما"></asp:MenuItem>
                        <asp:MenuItem Text="مدیریت آموزش" Value="مدیریت آموزش">
                            <asp:MenuItem Text="واحد درسی" Value="واحد درسی"></asp:MenuItem>
                            <asp:MenuItem Text="مدیریت انسانی" Value="مدیریت انسانی">
                                <asp:MenuItem Text="فرد" Value="فرد">
                                    <asp:MenuItem Text="تعریف فرد" Value="تعریف فرد"></asp:MenuItem>
                                    <asp:MenuItem Text="مدیریت فرد" Value="مدیریت فرد"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="دانشجو" Value="دانشجو">
                                    <asp:MenuItem Text="تعریف دانشجو" Value="تعریف دانشجو"></asp:MenuItem>
                                    <asp:MenuItem Text="مدیریت دانشجو" Value="مدیریت دانشجو"></asp:MenuItem>
                                </asp:MenuItem>
                                <asp:MenuItem Text="استاد" Value="استاد">
                                    <asp:MenuItem Text="تعریف استاد" Value="تعریف استاد"></asp:MenuItem>
                                    <asp:MenuItem Text="مدیریت استاد" Value="مدیریت استاد"></asp:MenuItem>
                                </asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="انتخاب واحد" Value="انتخاب واحد"></asp:MenuItem>
                            <asp:MenuItem Text="گزارشگیری" Value="گزارشگیری"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="انتخاب واحد" Value="انتخاب واحد"></asp:MenuItem>
                        <asp:MenuItem Text="گزارشگیری" Value="گزارشگیری">
                            <asp:MenuItem Text="لیست حضور و غیاب" Value="لیست حضور و غیاب"></asp:MenuItem>
                            <asp:MenuItem Text="حضور و غیاب جلسه امتحان" Value="حضور و غیاب جلسه امتحان"></asp:MenuItem>
                        </asp:MenuItem>
                    </Items>
                    <StaticHoverStyle Font-Names="Segoe UI" ForeColor="White" BackColor="#303641" BorderColor="Black"
                        Height="50px" Width="100px" />
                    <StaticMenuItemStyle BackColor="#303641" BorderColor="Black" Font-Names="Segoe UI"
                        Height="50px" Width="100px" />
                    <StaticMenuStyle BackColor="#303641" BorderColor="Black" Height="50px" Width="100px" />
                    <StaticSelectedStyle BackColor="303641" BorderColor="#333333" Font-Names="Segoe UI"
                        ForeColor="#FFFFCC" Height="50px" Width="100px" />
                </asp:Menu>
            </div>
        </div>
    </form>
</body>
</html>

Screenshot