This routing bar will get semi-transparent whenever you scroll listed below and it is somewhat showing up by fading aside and getting nearly transparent. When the consumer hovers on it, the menu becomes opaque once more.
Inside the navigation there are several links, a look input and a top and bottom part key that permits the consumer to navigate for the top or bottom of the page.
Let's start adding it...
</head>
3. Just above/before the </head> tag, add this code:
<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>
4) Now search for this tag:
<body>
If you can't find it, search for this one:
<body expr:class='"loading" + data:blog.mobileClass'>
5) Just below/after this code, copy and paste the following code:
<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li>
<li class="search">
<form method="get" action="/search">
<input name="q" type="text" placeholder="Search..."/><input type="submit" value="" class="searchbutton"/>
</form>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>
Note: swap URL address with the Address of your own pages and hyperlink 1, 2, 3, 4, 5, 6 with the name of the hyperlink that can come in the menu.
6) Now mouse click on the protect Template key and you are completed ;)
Comment Policy : Lorem ipsum dolor sit amet, saepe gubergren sed id, et est posse insolens temporibus, alterum blandit offendit est et. Quando vocibus nam at. Quo malis detraxit ut, eu nulla decore mentitum, eu ferri postulant urbanitas pri. Nihil consul viderer vel ea, vel doctus accusamus gloriatur ut. Elitr iuvaret.