Tooltip Effect Navigation Menu Widget For Blogger

Tooltip effect navigation menu bar widget for blogger. It displays the name of the icon when you hover your mouse over the icon on the menu. Created in html and css.

Tooltip Effect Navigation Menu Widget For Blogger
Tooltip Effect Navigation Menu Widget For Blogger

After sharing lots of different blogger widgets and navigation menu bar widgets for blogger. This time we are sharing a tooltip effect navigation menu. We have shared many other navigation menu that is best and with some animation. Take a look on this navigation menu.

3D flying book navigation menu widget for blogger.
Animated horizontal navigation menu widget for blogger.
Responsive mega drop down navigation menu widget for blogger
Call to action navigation navigation menu widget for blogger.
Hammer effect navigation menu widget for blogger.



And many others navigation menu widget for blogger.

This navigation menu is created in html and css. I am providing you a demo of how it will look like. Hope you like it.

Below is the download icon through which you can download the entire full code.

You have to copy the complete code of this widget and paste it in the gadget and you are done. It works fine with almost every browser. So use it freely and make your blogger template more attractive and user friendly.

How to add this navigation menu widget to blogger.



  • Login to blogger.
  • Go to layout.
  • Click to add a gadget.
  • Choose html/javascript.
  • Copy the below code after downloading it.
  • Paste it and you are done.



Now when you have downloaded the complete code now here are some custmoization that you have to make.

Html code customization


As you can see in the code. There are two layers of menu. The first is with the icons and second is with the text.

If you want to change the icon than replace the default icons with your icons.
And if you want to change the text then replace the default like home, blog, action and others with your texts.


<nav>
<menu>
<li><a href="#">☀</a></li>
<li><a href="#">✈</a></li>
<li><a href="#">❄</a></li>
<li><a href="#">☎</a></li>
</menu>
</nav>
<nav class="menu2">
<menu>
<li><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ACTION</a></li>
<li><a href="#">NEWBIE</a></li>
<li><a href="#">SLOW</a></li>
</menu>
</nav>


DOWNLOAD FULL CODE


You can see the icon of flower, airplane and telephone. You can change this with yours and in menu 2 you can change home, blog, action, newbie and slow with your own.

It has tooltip effect when you hover your mouse over the icon all the text and icon move towards the up and their background become brighter and it is called tooltip effect. We have also shared such tooltip effect based widgets take a look at the below.

Tooltip effect on link hover 
Window effect social media widget for blogger
Horizontal focus social media sharing widget for blogger

These are all created in html and css with some animations. If you like this tooltip effect based navigation menu bar widget for blogger than please share it and comment. 

Next Post Previous Post