Floating Navigation MenuThursday, April 23, 2009 Mary Anne Velasco
This is a tutorial on how you can create a floating navigation menu on your website. You can see an example of this type of menu at the bottom right hand corner of this blog. These icons are floating which means, whenever you scroll over the pages of this blog (up or down and left to right), the icons will always stay on place.
Floating navigation menus are useful for both your visitors and you (the admin) especially the Back to Top, Home, Subscribe and Admin icons. Of course, if you feel like you want to add some more icons to these four, you can always do so. As for me, i also added a Blogroll and Recent Comments icons to my floating navigation menu. If you are a member of Twitter, Digg, RedIt, Technorati (etc.), you can also create your icons for them.
Basically, what you need is this HTML code which you can play with. Don't be scared to do a trial and error floating nav. menu. If you create a mistake, you can just always delete or fix it.
<a style="position: fixed; bottom: 5px; right: 10px;" href="page link here" title="title of your icon here"><img src="direct link to image" /></a>
- Find a photo you want to display. You can go to Photobucket (and other websites) where you can create and personalize the icons. You can also find some icons by Googling but you need to either download the icon program or purchase the icons yourself. If you don't want to go through all these, feel free to use the icons I've created here.
So again, here's our code:
<a style="position: fixed; bottom: 5px; right: 10px;" href="page link here" title="title of your icon here"><img src="direct link to image" /></a>We then need to get our icon's direct link to image. When you already have the icon of your choice, right click the icon (or photo) and click COPY IMAGE LOCATION (not
COPY LINK LOCATION). Replace direct link to image of the given code with the link of your icon/image.
- Change the "title of your icon here" part of the code. It can either be your Back to Top, Home, Subscribe, Blogroll (etc.).
- Change page link here to the link where your readers will be redirected whenever the icon is clicked.
If it's your Back to Top icon, just replace page URL here to this symbol: # [only the # sign. If you change this to anything else, your Back To Top button will never work]
If it's your Home icon, replace page URL here to your homepage's URL. (http://www.yoursite.com or http://www.yoursite.blogspot.com etc.)
If it's your Subscribe icon, you need to get your Feedburner URL for this one or your RSS Feed URL. If you already have it, you can then replace page URL here with the URL.
(For example Ovah' Coffee's email subscription URL (provided by Feedburner) is http://feedburner.google.com/fb/a/mailverify?uri=OvahCoffee. So I just change page URL here to this URL and it's done.)
If it's your Blogroll icon, replace page URL here to the exact URL of your blogroll.
And so on....
<a style="position: fixed; bottom: 5px; right: 10px;" href="page link here" title="title of your icon here"><img src="direct link to image" /></a>I suggest that you change 5px by 40px starting from the bottom most icon. No worries! Just do trial and error until you get the spacing that you want.
I've created this floating nav. menu as an example: