Designing a Sidebar Widget Navigation

I am in the process of building a school website. On certain pages, I want to add a sidebar navigational widget which looks like this.

This is a live demo of how I want the website to look and the sidebar Nav widget will sit on the right-hand side of the page besides the school fees table.

I have not made the website responsive(I’m in the process of doing that) yet, so anyone viewing on a mobile device will have layout problems.

For the navigational items which have a submenu, for example, ‘Primary Fees’, I have included an arrow. Now when I hover over the Main Menu Item, I have included an animation which rotates the arrow and highlights the Main Menu item with red. In order to rotate the arrow, I added a .rotateOnHover class to all the Main Menu Items which have the arrow. then I use CSS to perform the rotation animation.

Now to the problem. When I hover over the submenu Items, I want to keep that particular Main Menu item highlighted and keep the arrow rotated. For example, when I hover over ‘Grade 1-3 Boarding’, I want to keep ‘Primary Fees’ highlighted and I want to keep the arrow rotated. I did some searching on the interwebs, and in particular StackOverflow, and I was encouraged to use Jquery to achieve this task. Since this is in essence, hovering over a child element and changing the style of its parent element.

The problem is when I hover over the submenu items e.g. ‘Grade 1-3 Boarding’, it applies the rotating arrow animation to ALL the main menu items which have the same arrow and arrow class, .rotateOnHover.

How can I hover over a submenu item and apply my desired hover effects to its parent Menu Item Only and not all the menu items?

Any help will be appreciated.

Also, any styling tips for the sidebar and the website, in general, will be appreciated. This is my very first website and I’m learning on the job.

I have put all the code on Stackoverflow.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.