Skip to content

Here each and every navigation menu has image respectively. When hover on menu, displays the hovering image when clicked on menu, displays the clicked image

Notifications You must be signed in to change notification settings

marafee1243/Image-Navigation-Menu-Tabs

Repository files navigation

Image Navigation Menu Tabs v 1.0

Special and all Credits goes to

jQuery Foundation / Developers Experts on Stackoverflow.com My Colleques [ who were looking for this type of navigation image tab system, but couldn't. At last.. We phew.. they got it. ] And Others.

// ----------------------------------------------------------------------------------- //

Live Demo
---------------
https://developer.mozilla.org/en-US/demos/detail/image-navigation-menu-tabs


Functionality
---------------

We have lot of Navigation menu tabs in jquery / css.

But this one is entirely on Image Menu Tabs

Here each and every navigation menu has image respectively.
When hover on menu, displays the hovering image
when clicked on menu, displays the clicked image


How to use it
---------------
There are 3 images for one Menu Tab
	ie 	normal	: its the normal image
		hover	: its the image when you hover on normal image
		clicked	: its the image when you clicked on normal / hover image
		
For example

We have 3 Navigation Menu  Tabs 

MenuOne, MenuTwo, MenuThree

We need to rename the images with -n , -h, -c respective functionality below


Functionality	|	MenuOne	|	MenuTwo		|	MenuThree 	|
-------------------------------------------------------------
				|			|				|				|
at Normal 		|	a-n.png	|	b-n.png		|	c-n.png		|
				|			|				|				|
on Hover 		|	a-h.png	|	b-h.png		|	c-h.png		|
				|			|				|				|
at Active		|	a-c.png	|	b-c.png		|	c-c.png		|
				|			|				|				|
-------------------------------------------------------------

Legends 
		-n : for Normal Image
		-h : for Hovering Image
		-c : for Clicked or Active Image.
		
		Just rename the image before executing 

// ----------------------------------------------------------------------------------- //

I love OpenSource, You share it, You enjoy it.

Feel free to implement new ideas, upgrade it and share it.

NOTE :

  1. Use it at your own risk, any damages or loss, no responsiblities taken.
  2. If you are upgrading please upload whole directory including jquery files and images in zip file.
  3. Please do mention your name and email, at username: user@domain.com below credits.
  4. Documentation is provided where ever it is necessary.

About

Here each and every navigation menu has image respectively. When hover on menu, displays the hovering image when clicked on menu, displays the clicked image

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published