Saturday, December 24, 2011

menu open on click and hide when we click outside of div or blank body

Most of time I got stuck when I see click menu into facebook and gmail for opening their account information.
I tried lots of time to make same kind of script or jquery code. But not able to find it anywhere on websites.

So tried to make it by myself and create a little jquery code which perform same work for me.

I hope this will help my designer friends to achieve that kind of functionality.


Example

<div class="userinfo">

        <a href="javascript:void(0);" class="selnot">User Info</a>
        <ul class="hide">
            <li class="user"><asp:Label ID="lblUserName" runat="server" Text=""></asp:Label></li>
            <li class="to"><asp:Label ID="lblTotalPost" runat="server" Text=""></asp:Label></li>
            <li class="fa"><asp:Label ID="lblTotalFcebookPost" runat="server" Text="Label"></asp:Label></li>
            <li class="in"><asp:Label ID="lblTotalLinkedinPost" runat="server" Text="Label"></asp:Label></li>
<li class="tw"><asp:Label ID="lblTotalTwitterPost" runat="server" Text="Label"></asp:Label></li>
<li class="out"><asp:LinkButton ID="lnkBtnLogout" runat="server" OnClick="lnkBtnLogout_Click">Logout</asp:LinkButton></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(".selnot").click(function() {

            if ($(this).next("ul").attr("class") == "show") {
                $(this).next("ul").removeClass("show");
                $(this).next("ul").addClass("hide");
            }
            else {
                if ($(this).next("ul").attr("class") == "hide") {
                    $(this).next("ul").removeClass("hide");
                    $(this).next("ul").addClass("show");
                }
            }
        });

    $(document).click(function(e) {
            if (e.target.className != "selnot") {
                $("ul").removeClass("show");
                $("ul").addClass("hide");
            }
        });

    </script>

This Jquery use DOCUMENT Click to find on which Class we have made click.
If its not our menu class it disable our Menu to show.

No comments: