The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.
Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.
Now lets see how to add it on blogger.
Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.
Now lets see how to add it on blogger.
How To Add Fixed Fade Out Menu To Blogger/Blog?
<link rel="stylesheet" href="http://helperblogger.googlecode.com/files/hb-fadeout.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
$undefinedfunctionundefined) {
$undefinedwindow).scrollundefinedfunctionundefined){
var scrollTop = $undefinedwindow).scrollTopundefined);
ifundefinedscrollTop != 0)
$undefined'#nav').stopundefined).animateundefined{'opacity':'0.2'},400);
else
$undefined'#nav').stopundefined).animateundefined{'opacity':'1'},400);
});
$undefined'#nav').hoverundefined
function undefinede) {
var scrollTop = $undefinedwindow).scrollTopundefined);
ifundefinedscrollTop != 0){
$undefined'#nav').stopundefined).animateundefined{'opacity':'1'},400);
}
},
function undefinede) {
var scrollTop = $undefinedwindow).scrollTopundefined);
ifundefinedscrollTop != 0){
$undefined'#nav').stopundefined).animateundefined{'opacity':'0.2'},400);
}
}
);
});
</script>
<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='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li class="search">
<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>
- Now replace Your Link Here with the link which you want to add to a text.
- And replace Text Here with the text which you want to appear on fade out menu.
No comments:
Post a Comment