Monday, 21 October 2013

How to create Fixed Menu When Scrolling Page with CSS and jQuery or JQuery - Leave menu bar fixed on top when scrolled or Creating a Floating Navigation Menu

Hi friends, in this article I will explain about JQuery - Leave menu bar fixed on top when scrolled or Creating a Floating Navigation Menu
I already explained in the previous articles about Numeric Validation: How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NETMVC:JQuery UI Datepicker Calender Control In Asp.Net Mvc Application || How to Use jQuery Calender In MVC3 and JQuery: Send (Pass) Data (Values) from one page to another using Form Post

In ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <style type ="text/css" >
      #navigation {
          background-color:purple;
          width:100%;
          padding:0 0 0 0;
          margin:0;
          line-height:33px;
          height:37px;
}
#navigation ul{
float:left;
padding: 0 20px 0 0;
margin: 0;
clear:both;
font-size:13.2px;
}

#navigation ul li{
display: inline;
}

#navigation ul li span{
padding:0 2px 0 2px;
display: inline;
color:#fff;
margin:0;
padding:0;
font-weight:bold
}

#navigation ul li a{
color: #fff;
padding: 0px 3px;
margin: 0;
text-decoration: none;
font-weight:bold
}

#navigation ul li a:hover, #navigation ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
/*background:#C11919;*/ /*THEME CHANGE HERE*/
color:pink;
}
.div
{
    height:200px;
    border:2px solid
}
    </style>
    <script type ="text/javascript" >
    $(function() {
        var fixed_menu_offset_top = $('#navigation').offset().top;
        var fixed_menu = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > fixed_menu_offset_top) {
            $('#navigation').css({ 'position': 'fixed', 'top': 0, 'left': 0 });
        } else {
            $('#navigation').css({ 'position': 'relative' });
        } 
    };
    fixed_menu();
    $(window).scroll(function() {
        fixed_menu();
    });

});
</script>
</head>
<body>
    <form id="form1" runat="server">
      <div id="navigation">
                <ul>
                    <li><a href="#my" >HOME</a></li>
                    <li><a href="#mvc">MVC</a></li>
                    <li><a href="#asp">ASP.NET</a></li>
                    <li><a href="#cs">C#</a></li>
                    <li><a href="#vb">VB.NET</a></li>
                    <li><a href="#con">CONTACT</a></li>
                </ul>
            </div>
            <div>
            <div id="my" class="div">
            <a href="http:\\aspdotnet-kishore.blogspot.com">Aspdotnet-Kishore</a>
            <p>Aspdotnet-Kishore offers ASP.NET,C#.NET,VB.NET,SQL Server,Web Services,WCF,WPF,MVC 4 Razor,AJAX,JQuery,XML,JavaScript,JQuery,Gridview articles, Interview Questions and Answers,HTML and code examples and more........</p>
            </div>
             <div id="mvc" class="div">
            <a href="http://aspdotnet-kishore.blogspot.in/search/label/MVC">Aspdotnet-Kishore MVC</a>
            <p>Aspdotnet-Kishore offers MVC  Razor Tutorial and code examples and more........</p>
            </div>
             <div id="asp" class="div">
            <a href="http://aspdotnet-kishore.blogspot.in/search/label/ASP.NET">Aspdotnet-Kishore ASP.NET</a>
            <p>Aspdotnet-Kishore offers MVC  Razor Tutorial and code examples and more........</p>
            </div>
              <div id="cs" class="div">
            <a href="http://aspdotnet-kishore.blogspot.in/search/label/CSharp">Aspdotnet-Kishore C#</a>
            <p>Aspdotnet-Kishore offers C# Tutorial and code examples and more........</p>
            </div>
               <div id="vb" class="div">
            <a href="http://aspdotnet-kishore.blogspot.in/search/label/VB.NET">Aspdotnet-Kishore VB.NET</a>
            <p>Aspdotnet-Kishore offers VB.NET Tutorial and code examples and more........</p>
            </div>
            <div id="con" class="div">
            <a href="http://aspdotnet-kishore.blogspot.in/2012/10/contact-us.html">Contact Aspdotnet-Kishore </a>
            <p>If you want to Contact or give suggestions,want to ask a doubt or questions about Aspdotnet-Kishore then your </p>
            </div>
            </div>
    </form>
</body>
</html>

The output of the above code as shown in the below figure. 

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.