Suppose you have a menu at your site, and you don't want to reload the whole page to see the content of a certain div. Instead, you want to load it using jquery and ajax!
What I will show you here is, how we can achieve the hover effect, without affecting the clicked element. Don't you understand what I mean?
Go to http://www.snap2design.com, and have a look at the menu. When you mouseover a menu item, you see that its background-color becomes black and when you mouseout, it becomes grey again, except of course from the clicked menu, which remains black!
How can we achieve this? The answer is by using Jquery! A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Here we will use the click and hover function of this wonderful library.
Click Function
Seems all this strange to you? Well, let me explain you a little bit what I am doing here.
Firstly, when we click the h3 element of a navigation_item,
***Just to say that selected class is defined in a seperate css file
Finally we add "selected" class to the clicked item.
***I want to clarify that I refer to the situation of a menu which loads content via AJAX, and not by reloading whole page. The link with the example I gave you above, has a menu with submenus. I explain the case of the first level menu. The same technique is used for the second level as well. You can see the html markup below:
So til now, when we click a navigation item, its background-color becomes black(selected class). The other ones have a grey background-color (#424242).
Hover Effect
Well, let's explain the hover effect now! When we mouseover a menu item, we make its backround-color black. That's easy!
When we mouseout, we have to make a check. The menu item that has "selected" class, keeps its black background-color, otherwise it becomes grey (#424242).
What would happen, if we didn't make the check? Every menu item would become grey and we wouldn't know, which one was the selected one.
Conclusion
Well, in the above example I wanted to show you the technique I use, in order to check which menu item is the selected one when we use AJAX, and keep its "selected" class, when we mouseover that!
I am glad to hear, what you do in a similar situation!
What I will show you here is, how we can achieve the hover effect, without affecting the clicked element. Don't you understand what I mean?
Go to http://www.snap2design.com, and have a look at the menu. When you mouseover a menu item, you see that its background-color becomes black and when you mouseout, it becomes grey again, except of course from the clicked menu, which remains black!
How can we achieve this? The answer is by using Jquery! A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Here we will use the click and hover function of this wonderful library.
Click Function
Seems all this strange to you? Well, let me explain you a little bit what I am doing here.
Firstly, when we click the h3 element of a navigation_item,
- we remove "selected" class and
- change background color of each item to #424242
***Just to say that selected class is defined in a seperate css file
Finally we add "selected" class to the clicked item.
***I want to clarify that I refer to the situation of a menu which loads content via AJAX, and not by reloading whole page. The link with the example I gave you above, has a menu with submenus. I explain the case of the first level menu. The same technique is used for the second level as well. You can see the html markup below:
So til now, when we click a navigation item, its background-color becomes black(selected class). The other ones have a grey background-color (#424242).
Hover Effect
Well, let's explain the hover effect now! When we mouseover a menu item, we make its backround-color black. That's easy!
When we mouseout, we have to make a check. The menu item that has "selected" class, keeps its black background-color, otherwise it becomes grey (#424242).
What would happen, if we didn't make the check? Every menu item would become grey and we wouldn't know, which one was the selected one.
Conclusion
Well, in the above example I wanted to show you the technique I use, in order to check which menu item is the selected one when we use AJAX, and keep its "selected" class, when we mouseover that!
I am glad to hear, what you do in a similar situation!
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου