Log in

View Full Version : Creating a selection class for second and third level items that opens a new sub menu



Harleyy
10-07-2013, 01:06 PM
Hi.

I am using ddlevelsmenu for creating multi level navigation. Below is the link.

http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

From the example that you find on the above link, when I mouseover on for instance "CSS Library", which opens a submenu, when I move to its menu items like "Item 1a", "Item 2a", etc., the mouseover color for "CSS Library" stays at black and does not get removed until I move to the next items.

But when I go to "Item folder 3a" under the same sub menu, when I move to its sub items, the selection color gets removed.

What I want is when I move to any item that has the submenu, on mouse over, the background color should stay for the list item that opens the sub menu.

Awaiting solutions.

Thanks.

- Harleyy

jscheuer1
10-07-2013, 01:18 PM
Try:

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

In it the top level menus and the sublevel menus are styled the same, but they don't have to be (see its stylesheet for styling those separately). Any item that's showing a dropdown has a class of "selected".

Harleyy
10-07-2013, 01:30 PM
Thanks a lot sir for your reply.
But I have been using this menu and have created it on a lot of pages, so replacing it would be very difficult for me. Is there a way where we can make the same functionality for the ddlevelsmenu??

Awaiting replies.

Regards,
- Harleyy.

jscheuer1
10-07-2013, 02:34 PM
OK, use this modified version of the script (right click and 'Save As'):

5245

Once installed, this selector will govern the class of the selected items:


.ddsubmenustyle li.selected > a

So for instance, using demo.htm from the distribution archive, in its ddlevelsmenu-topbar.css file, at the end, I added the highlighted:


.mattblackmenu a.selected, .ddsubmenustyle li.selected > a {
background: black; /*background of tab with "selected" class assigned to its LI */
color: white;
}

Demo:

http://home.comcast.net/~jscheuer1/side/demos/alllevels/demo.htm

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Harleyy
10-08-2013, 06:03 AM
Thanks a lot sir. It worked perfectly well.

Harleyy
10-09-2013, 09:04 AM
Thank you sir for your solution. Is there a way to keep the selection selected when we click and select any of the list items?

For Instance, from your demo, http://home.comcast.net/~jscheuer1/side/demos/alllevels/demo.htm
if I go to "CSS", under that select "Item folder 3b" and click on "sub item 3.2b", is there a way when I get redirected to the page linked with "sub item 3.2b" and on load of that page, the selection for "CSS", "Item folder 3b" and "sub item 3.2b" with their hover background characteristics remain as selected?

Awaiting replies,

Regards,
- Harleyy