438 posts
  • Has been part of the Envato Community for over 3 years
  • Sells items exclusively on Envato Market
  • Located in 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
  • Has been part of the Envato Community for over 3 years
  • Sells items exclusively on Envato Market
  • Located in 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.

3247 posts
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in United States
  • Has been part of the Envato Community for over 4 years
+1 more
organicbee says
353 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 1+ items on Envato Market
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

3446 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Located in United States
  • Helps us moderate the forums
+10 more
sevenspark 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 :)

353 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 1+ items on Envato Market
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
  • Has been part of the Envato Community for over 3 years
  • Sells items exclusively on Envato Market
  • Located in 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