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.NET, MVC: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:
The output of the above code as shown in the below figure.
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.NET, MVC: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