[Solved] Onclick of submenu other submenu displaying in ASP.Net

Last Reply 7 months ago By pandeyism

Posted 7 months ago

I use sidebar submenu in my project. but I have a problem in use nested submenu.

when I click on one submenu, the other submenu is shown. how can I fix this problem?

this is my code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="KDUIS_v0._1.Site1" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="CssFiles/StyleSheet.css" rel="stylesheet" />
    <title><%: Page.Title %> -موسسه غیر انتفاعی توسعه دانش</title>
    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        var toggle = true;
        $(".sidebar-icon").click(function () {
            if (toggle) {
                $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
                $("#menu span").css({ "position": "absolute" });
            }
            else {
                $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
                setTimeout(function () {
                    $("#menu span").css({ "position": "relative" });
                }, 400);
            }

            toggle = !toggle;
        });
    </script>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-36251023-1']);
        _gaq.push(['_setDomainName', 'jqueryscript.net']);
        _gaq.push(['_trackPageview']);
        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>
    <style type="text/css">
        .auto-style3 {
            font-family: tahoma;
        }
    </style>
</head>
<body style="background-color: #DCDCDC">
    <div class="sidebar-menu">
        <div style="border-top: 1px solid rgba(69, 74, 84, 0.7)"></div>
        <div class="menu">
            <ul id="menu">
                <li id="menu-home"><a href="ManagementControlPannel.aspx">
                    <div class="auto-style2">
                        <i></i><span>راهنمای سایت</span>
                    </div>
                </a>
                </li>
                <li id="menu-Education">
                    <a href="#">
                        <div class="auto-style2">
                            <span class="fa fa-angle-left" style="float: left"></span><span>مدیریت آموزش</span>
                        </div>
                    </a>
                    <ul>
                        <li>
                            <a href="#">
                                <div class="auto-style2">
                                    <span class="fa fa-angle-left" style="float: left"></span><span>واحد درسی</span>
                                </div>
                            </a>
                            <ul id="Menu-Course">
                                <li id="Menu-Course-sub1"><a href="#">تعریف درس و واحد درسی</a></li>
                                <li id="Menu-Course-sub2"><a href="#">ویرایش واحد درسی</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                <div class="auto-style2">
                                    <span class="fa fa-angle-left" style="float: left"></span><span>مدیریت انسانی</span>
                                </div>
                            </a>
                            <ul id="Menu-Person">
                                <li id="Menu-Person-Sub">
                                    <a href="#">
                                        <div class="auto-style2">
                                            <span class="fa fa-angle-left" style="float: left"></span><span>فرد</span>
                                        </div>
                                    </a>
                                    <ul id="Menu-Person-Manegement">
                                        <li id="Menu-Person-Manegement1">
                                            <a href="#">تعریف فرد</a>
                                        </li>
                                        <li id="Menu-Person-Manegement2">
                                            <a href="#">مدیریت فرد</a>
                                        </li>
                                    </ul>
                                </li>
                                <li id="Menu-Student">
                                    <a href="#">
                                        <div class="auto-style2">
                                            <span class="fa fa-angle-left" style="float: left"></span><span>دانشجو</span>
                                        </div>
                                    </a>
                                    <ul>
                                        <li id="Menu-Student1">
                                            <a href="#">تعریف دانشجو</a>
                                        </li>
                                        <li id="Menu-Student2">
                                            <a href="#">مدیریت دانشجو</a>
                                        </li>
                                    </ul>
                                </li>
                                <li id="Menu-Prof">
                                    <a href="#">
                                        <div class="auto-style2">
                                            <span class="fa fa-angle-left" style="float: left"></span><span>استاد</span>
                                        </div>
                                    </a>
                                    <ul>
                                        <li id="Menu-Prof1">
                                            <a href="#">تعریف استاد</a>
                                        </li>
                                        <li id="Menu-Prof2">
                                            <a href="#">مدیریت استاد</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                <div class="auto-style2">
                                    <span class="fa fa-angle-left" style="float: left"></span><span>انتخاب واحد</span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="auto-style2">
                                    <span class="fa fa-angle-left" style="float: left"></span><span>گزارشگیری</span>
                                </div>
                            </a>
                            <ul class="tert-nav">
                                <li><a href="#">لیست حضور و غیاب</a></li>
                                <li><a href="#">لیست حضور و غیاب جلسه امتحان</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <form runat="server">
        <asp:Label ID="LblFirstName" runat="server" Text="LblFirstName" Visible="False"></asp:Label>
        <asp:Label ID="LblLastName" runat="server" Text="LblLastName" Visible="False"></asp:Label>
        <asp:Label ID="LblPersonID" runat="server" Text="LblPersonID" Visible="False"></asp:Label>
        <div class="Content">
            <div class="HeaderDIV">
                <div class="ToseeDAnesh">
                    <strong>&nbsp;<asp:Label ID="Label5" runat="server" Font-Names="Tahoma" Text="موسسه غیر انتفاعی توسعه دانش"></asp:Label>
                    </strong>
                </div>
                <div class="LOGO">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/pictures/KDUni-Logo-New-ed2-xs.png" />
                </div>
            </div>
            <div class="Header">
                <div class="LoginBtn">

                    <asp:ImageButton ID="BtnLogout" runat="server" Height="52px" ImageAlign="Left" ImageUrl="~/Pictures/start_transport_oman_info_icon_vb_exit.png" ToolTip="خروج" Width="71px" Visible="False" OnClick="BtnLogout_Click" />
                    &nbsp;
                        <asp:Label ID="LblLogOut" runat="server" Font-Names="Tahoma" Text="خروج" Visible="False"></asp:Label>
                    &nbsp;
                        <asp:ImageButton ID="BtnLogin" runat="server" Height="47px" ImageUrl="~/Pictures/Login.png" OnClick="BtnLogin_Click" ToolTip="ورود" Width="58px" Visible="False" />
                    <asp:Label ID="Label4" runat="server" Font-Names="Tahoma" Text="ورود" Visible="False"></asp:Label>
                </div>
                <div class="LoginStatus">
                    <asp:Label ID="LblLogin" runat="server" Text="LblLogin" Font-Bold="True" Font-Names="Tahoma" Width="363px"></asp:Label>
                </div>
            </div>
            <div class="page-container">
                <div class="MainDIV">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
            <div>
                <br />
                <footer class="FoteerDIV">
                    <p>
                        <asp:Label ID="Label1" runat="server" Text="Label" CssClass="auto-style3"></asp:Label>
                    </p>
                    <p>
                        <asp:Label ID="Label2" runat="server" CssClass="auto-style3" Text="Label"></asp:Label>
                    </p>
                    <p>&nbsp;</p>
                </footer>
            </div>
        </div>
    </form>
</body>
</html>

 

Posted 7 months ago

Hi dorsa,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .auto-style2
        {
            text-align: center;
            height: 34px;
        }
        
        
        body
        {
            height: 100%;
            font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif;
            background: #eeeeee;
        }
        
        a, a:hover, a:active
        {
            text-decoration: none;
        }
        
        a
        {
            color: #008DE7;
            font-style: italic;
            font-weight: 700;
        }
        
        a:hover
        {
            transition: all 200ms ease-in-out;
        }
        
        .page-container
        {
            min-width: 1260px;
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            margin: 0px auto;
        }
        .content
        {
            max-width: 800px;
            min-width: 600px;
            display: block;
            padding: 50px;
            margin: 50px auto;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
            overflow: hidden;
        }
        
        .page-container.sidebar-collapsed
        {
            padding-right: 65px;
            transition: all 100ms linear;
            transition-delay: 300ms;
        }
        
        .page-container.sidebar-collapsed-back
        {
            padding-right: 280px;
            transition: all 100ms linear;
        }
        
        .page-container.sidebar-collapsed .sidebar-menu
        {
            width: 65px;
            transition: all 100ms ease-in-out;
            transition-delay: 300ms;
        }
        
        .page-container.sidebar-collapsed-back .sidebar-menu
        {
            width: 280px;
            transition: all 100ms ease-in-out;
        }
        
        .page-container.sidebar-collapsed .sidebar-icon
        {
            transform: rotate(90deg);
            transition: all 300ms ease-in-out;
        }
        
        .page-container.sidebar-collapsed-back .sidebar-icon
        {
            transform: rotate(0deg);
            transition: all 300ms ease-in-out;
        }
        
        .page-container.sidebar-collapsed .logo
        {
            padding: 21px;
            height: 136px;
            box-sizing: border-box;
            transition: all 100ms ease-in-out;
            transition-delay: 300ms;
        }
        
        .page-container.sidebar-collapsed-back .logo
        {
            width: 100%;
            padding: 21px;
            height: 136px;
            box-sizing: border-box;
            transition: all 100ms ease-in-out;
        }
        
        .page-container.sidebar-collapsed #logo
        {
            opacity: 0;
            transition: all 200ms ease-in-out;
        }
        
        .page-container.sidebar-collapsed-back #logo
        {
            opacity: 1;
            transition: all 200ms ease-in-out;
            transition-delay: 300ms;
        }
        
        .page-container.sidebar-collapsed #menu span
        {
            opacity: 0;
            transition: all 50ms linear;
        }
        
        .page-container.sidebar-collapsed-back #menu span
        {
            opacity: 1;
            transition: all 200ms linear;
            transition-delay: 300ms;
        }
        
        .sidebar-menu
        {
            position: fixed;
            float: left;
            width: 280px;
            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;
        }
        
        #menu
        {
            list-style: none;
            margin: 0;
            padding: 0;
            margin-bottom: 20px;
        }
        
        #menu li
        {
            position: relative;
            margin: 0;
            font-size: 12px;
            border-bottom: 1px solid rgba(69, 74, 84, 0.7);
            padding: 0;
        }
        
        #menu li ul
        {
            opacity: 0;
            height: 0px;
        }
        
        #menu li a
        {
            font-style: normal;
            font-weight: 400;
            position: relative;
            display: block;
            padding: 10px 20px;
            color: #aaabae;
            white-space: nowrap;
            z-index: 2;
        }
        
        #menu li a:hover
        {
            color: #ffffff;
            background-color: #333944;
            transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
        }
        
        #menu li.active > a
        {
            background-color: #2b303a;
            color: #ffffff;
        }
        
        #menu ul li
        {
            background-color: #2b303a;
        }
        
        #menu ul
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        #menu li ul
        {
            position: absolute;
            visibility: hidden;
            right: 100%;
            top: -1px;
            background-color: #2b303a;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.1s linear;
            border-top: 1px solid rgba(69, 74, 84, 0.7);
        }
        
        #menu li:hover > ul
        {
            visibility: visible;
            opacity: 1;
        }
        
        #menu li li ul
        {
            right: 100%;
            visibility: hidden;
            top: -1px;
            opacity: 0;
            transition: opacity 0.1s linear;
        }
        
        /*#menu li li:hover ul
        {
            visibility: visible;
            opacity: 1;
        }*/
        
        #menu .fa
        {
            margin-right: 5px;
        }
        
        .logo
        {
            width: 100%;
            padding: 21px;
            box-sizing: border-box;
        }
        
        .sidebar-icon
        {
            position: relative;
            float: right;
            margin-top: 32px;
            border: 1px solid #454a54;
            text-align: center;
            line-height: 1;
            font-size: 18px;
            padding: 6px 8px;
            border-radius: 3px;
            color: #888;
            background-clip: padding-box;
            text-shadow: 4px 4px 6px rgba(0,0,0,0.4);
        }
        .fa-html5
        {
            color: #fff;
            margin-left: 50px;
        }
        .auto-style2
        {
            text-align: center;
        }
        .auto-style3
        {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="sidebar-menu">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div style="border-top: 1px solid rgba(69, 74, 84, 0.7)">
        </div>
        <div class="menu">
            <ul id="menu">
                <li id="menu-home"><a href="ManagementControlPannel.aspx">
                    <div class="auto-style2">
                        <i></i><span>راهنمای سایت</span>
                    </div>
                </a></li>
                <li id="menu-Education"><a href="#">
                    <div class="auto-style2">
                        <span class="fa fa-angle-left" style="float: left"></span><span>مدیریت آموزش</span>
                    </div>
                </a>
                    <ul>
                        <li><a href="#">
                            <div class="auto-style2">
                                <span class="fa fa-angle-left" style="float: left"></span><span>واحد درسی</span>
                            </div>
                        </a>
                            <ul id="Menu-Course">
                                <li id="Menu-Course-sub1"><a href="#">تعریف درس و واحد درسی</a></li>
                                <li id="Menu-Course-sub2"><a href="#">ویرایش واحد درسی</a></li>
                            </ul>
                        </li>
                        <li><a href="#">
                            <div class="auto-style2">
                                <span class="fa fa-angle-left" style="float: left"></span><span>مدیریت انسانی</span>
                            </div>
                        </a>
                            <ul id="Menu-Person">
                                <li id="Menu-Person-Sub"><a href="#">
                                    <div class="auto-style2">
                                        <span class="fa fa-angle-left" style="float: left"></span><span>فرد</span>
                                    </div>
                                </a>
                                    <ul id="Menu-Person-Manegement">
                                        <li id="Menu-Person-Manegement1"><a href="#">تعریف فرد</a> </li>
                                        <li id="Menu-Person-Manegement2"><a href="#">مدیریت فرد</a> </li>
                                    </ul>
                                </li>
                                <li id="Menu-Student"><a href="#">
                                    <div class="auto-style2">
                                        <span class="fa fa-angle-left" style="float: left"></span><span>دانشجو</span>
                                    </div>
                                </a>
                                    <ul>
                                        <li id="Menu-Student1"><a href="#">تعریف دانشجو</a> </li>
                                        <li id="Menu-Student2"><a href="#">مدیریت دانشجو</a> </li>
                                    </ul>
                                </li>
                                <li id="Menu-Prof"><a href="#">
                                    <div class="auto-style2">
                                        <span class="fa fa-angle-left" style="float: left"></span><span>استاد</span>
                                    </div>
                                </a>
                                    <ul>
                                        <li id="Menu-Prof1"><a href="#">تعریف استاد</a> </li>
                                        <li id="Menu-Prof2"><a href="#">مدیریت استاد</a> </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">
                            <div class="auto-style2">
                                <span class="fa fa-angle-left" style="float: left"></span><span>انتخاب واحد</span>
                            </div>
                        </a></li>
                        <li><a href="#">
                            <div class="auto-style2">
                                <span class="fa fa-angle-left" style="float: left"></span><span>گزارشگیری</span>
                            </div>
                        </a>
                            <ul class="tert-nav">
                                <li><a href="#">لیست حضور و غیاب</a></li>
                                <li><a href="#">لیست حضور و غیاب جلسه امتحان</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Demo


Posted 7 months ago
pandeyism says:
 /*#menu li li:hover ul
        {
            visibility: visible;
            opacity: 1;
        }*/

 Above lin of code i have commented, then that's working.