Here are 3 simple steps to add this to your blog page:
- Paste the following html code between your <head>...</head> tags:
<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style> - Add a Page Element (HTML/Java Script) to your blog page where you would like the show/hide navigation to appear.
- Paste the following html code within this Page Element
<span style="cursor:pointer;" onclick="ShowHideNav();">
Show/Hide Navigation
<a a style="visibility:hidden;">
</a></span>
That's it! Enjoy!
8 comments:
People should read this.
Hi Richard, sorry to bother you, but my navigation bar doesn't show up when I click on the link. I placed the code in my HTML and I added the HTML code in a new page element, the words show up, but when I click, nothing happens. I'm not a techie...any thoguhts?
Nevermind! Figured it out! Nice addition to my blog! Thanks so much!
How's Life?
Is there something that we could add to our post to help someone in the future?
Thanks so much! This helped a ton!
Thanks for share these things.
Hi! my problem is exactly the reverse: I imported a template which doesn't have the navbar visible, which is quite unpleasant.
how can I make it visible?
You can see the blog here: storytellingdrawings.blogspot.com
Thanks a lot in advance!
Chris
Thanks for the information. I did find that your version was a little verbose (the visiblity lines simply aren't required.) and I chose to go after "navbar" instead of "navbar-iframe", but in the end, the result was the same.
Post a Comment