Please disable your adblock and script blockers to view this page
 

jQuery stylish dropdown menu example like Facebook,Linkedin in asp.net

jquery dropdown example in asp.netIntroduction: In this article i will explain how to create stylish drop down menu like Facebook,Twitter and Linked in etc using jQuery and CSS in asp.net. 

 Implementation: Let's create an application to see the menu in working.
  •  First of all create a style sheet to give the styles to the drop down menu. So to add style sheet in the website go to website menu and click Add New item.. -> Select StyleSheet.css and rename it to menu.css
  • In the menu.css paste the following
 body {
}
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: Georgia;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#3B5998;
color: #FFFFFF;
text-decoration: none;
}
a.mainmenu
{
font-size: 14px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.menuitems
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

.icon{
color: #0099FF;
}
 .toggle-login
 {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
}
and save the file.
  • In the <Head> tag of the design page (.aspx) add the following jQuery reference and functions.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<%--Toggles the icon --%>
<script type="text/javascript">
    $(document).ready(function () {
        $('.toggle-login').click(function () {
            $(this).next('#login-content').slideToggle();
            $(this).toggleClass('active');

            if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
            else $(this).find('span').html('&#x25BC;')
        })
    });
</script>

<%--Handling Menu and items--%>

<script type="text/javascript" >
    $(document).ready(function () {

        $(".mainmenu").click(function () {
            var X = $(this).attr('id');
            if (X == 1) {
                $(".submenu").hide();
                $(this).attr('id', '0');
            }
            else {
                $(".submenu").show();
                $(this).attr('id', '1');
            }
        });

        //Mouse click on sub menus
        $(".submenu").mouseup(function () {
            return false
        });

        //Mouse click on my account link
        $(".mainmenu").mouseup(function () {
            return false
        });


        //On Document Click
        $(document).mouseup(function () {
            $(".submenu").hide();
            $(".mainmenu").attr('id', '');
        });
    });
</script>

  • In the <form> tag of .aspx page design the page as
<div>
    <fieldset style="width:119px; height:160px; padding:30px;" >
    <legend>jQuery Dropdown</legend>
    <div class="dropdown">
<a class="mainmenu toggle-login">My Account  <span class="icon"></span></a>

<div class="submenu">
<ul class="menuitems">
<li ><a href="#">Account setting</a></li>
<li ><a href="#">Privacy setting</a></li>
<li ><a href="#">Logout</a></li>
<li ><a href="#">Help</a></li>
</ul>
</div>
</div>
    </fieldset>   
    </div>

Note: Replace the # with your page name.

Now over to you:

"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon