Dynamic Menu where each menu item is styled differently

  • $menu = array(
					'menu' => 'Main Menu',
					'echo' => true,
					'before' => '<li>',
					'after' => '</li>',
					'link_before' => '<span>',
					'link_after' => '</span>'
				);

    This works well with creating my dynamic menu — however I want the ‘before’ tag to be <li class = “current”> for the menu item of the current page.

    I can get the current page and determine if it’s the current page, but how do I/is it possible to change one ‘before’ given a condition here?

    I’m thinking I’d have to overwrite this array after the fact, but I haven’t started yet — would that work? If so, any tips?

Viewing 4 replies - 1 through 4 (of 4 total)

  • You can just use CSS to target each menu item separately (nota bene: the menu has already been created in the backend). For example, consider the code below:

    #menu-item-xx{
  //put your CSS attributes here
}

    Replace the number xx for the appropriate menu id of the item you are targeting.

    Another Nota Bene: Make sure you are working with a child theme or a custom CSS plugin.

    Thread Starter s.wooo

    (@swooo)

    Thanks for the quick reply, respectyoda (I will) :D.

    It’s a dynamic menu though, as it’s generated via “Main Menu”

    I want to current page you’re on to have <li class = "current">About Us </li>
    with all other pages tagged as
    <li>News</li>
    I don’t want a static menu item to be tagged differently, I want to current page you’re on to be different — so programmatically setting the ‘before’ tag based on the URL/page ID.
    Hopefully I’m clear, and if I misunderstood your post, sorry I’m not the greatest with CSS.

    From my thoughts I’ll need to either (1) pass all the menu’s to a CSS function, and there determine if it’s the current page/to give it certain attributes
    or (2) after the fact, modify the array — changing the styling of the current page item

    You could use jQuery to apply the class of “current” when the user is on that specific page and it will take on whatever attributes you set for that class in your CSS file.

    Thread Starter s.wooo

    (@swooo)

    Okay, I guess there’s no easy fix?

    I fail to see why I would use jQuery in this instance, as there’s zero dynamic input from the user — I’ll go with (2) searching through $menu for the current page, and modifying $menu’s ‘before’ with PHP

    I’ll let you guys know how it goes

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dynamic Menu where each menu item is styled differently’ is closed to new replies.