438 posts
  • Exclusive Author
  • Has been a member for 3-4 years
  • United States
christopherjon says

I wanted a lightweight and simple drop down menu so I thought I’d give the old Kriesi tutorial a try.

create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

It’s a great little piece of code but I can’t figure out how to get it working with the current wordpress (wp_nav_menu) menu system.

I’m sure it’s something really simple but I’m not seeing it.

Save me from ddsmoothmenu, it’s way too much code for what I need.

438 posts
  • Exclusive Author
  • Has been a member for 3-4 years
  • United States
christopherjon says

And not a minute after posting this I figured it out.

Doh!

Remember kids, working for more than 12 hours straight and your brain turns to mush.

3192 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
  • Exclusive Author
organicbee says
352 posts
  • Bought between 1 and 9 items
  • Has been a member for 5-6 years
al_m473 says

I use this dropdown menu code on the site I maintain, one thing I would like to do with it that I have not figured out how to do is to highlight the menu item for the page you are on. I have tried this but it also highlights the dropdown list items as well. other than tha, it works well in all browsers (including IE6 ).the code has been out there for a couple of years.

the thing I do notice about dropdown menus is that they can be set up to work on IE7 + but often don’t work wit iE6 (Twentyten, for example) and lots of the users accesssing the web site I look after use IE6 so it does not become an option to drop it.

most tutorials on dropdown menus do not show you how to highlight the menu item on the page you are on, perhaps because of the problems in doing it as I have run into.

OrganicBeeMedia, thanks for the link, will check it out.

Al

3418 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Community Moderator
  • Bought between 100 and 499 items
  • Referred more than 2000 users
  • Has been a member for 4-5 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+4 more
sevenspark Volunteer moderator says

I use this dropdown menu code on the site I maintain, one thing I would like to do with it that I have not figured out how to do is to highlight the menu item for the page you are on. I have tried this but it also highlights the dropdown list items as well. other than tha, it works well in all browsers (including IE6 ).the code has been out there for a couple of years.

the thing I do notice about dropdown menus is that they can be set up to work on IE7 + but often don’t work wit iE6 (Twentyten, for example) and lots of the users accesssing the web site I look after use IE6 so it does not become an option to drop it.

most tutorials on dropdown menus do not show you how to highlight the menu item on the page you are on, perhaps because of the problems in doing it as I have run into.

OrganicBeeMedia, thanks for the link, will check it out.

Al

I haven’t looked at the tutorial in detail, but WP offers the classes .current_page_item or .current-menu-item (for WP3 Menus) that is applied to the current menu item. You can target just the current level, then, like this:

#mymenu ul li.current_page_item > a{
    color: #000; /* Current Item Highlight Color */
}

Note if you don’t include the > in the CSS selector, it will apply to all items hierarchically beneath it.

Hope that helps :)

352 posts
  • Bought between 1 and 9 items
  • Has been a member for 5-6 years
al_m473 says

“it will apply to all items hierarchically beneath it”

thanks for that, that does work in IE7 + but does not highlight the menu item for the page you are on in IE6 (according to IEtester anywy), I think I can live with that

it did look like that was what was happening, that the attributes of the “a” was propogated across all of the “a”’s including those under the first one in the list, just could not find any doc that would tell me that

I guess that tells me that li:hover will set the attributes defined on all li tags underneath the one you might be trying to set, I guess that is what they mean by cascading though

OK thanks

Al

438 posts
  • Exclusive Author
  • Has been a member for 3-4 years
  • United States
christopherjon says
Try this, this shoud change your top level item, .nav .current-menu-item a { color:#007ba8; font-weight: bold; }

and this should keep the rest of your list from changing.

.nav .current-menu-item li a { color:#666666; font-weight: normal; }
by
by
by
by
by
by