WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Foundation 3, WordPress Menus, and dynamic class assignment (help‽‽‽) (4 posts)

  1. ianarmstrong
    Member
    Posted 1 year ago #

    If you've done this before, by all means, please share your code. You will save me a bunch of work and I'll owe you free dark side cookies for at least a week.

    I've been building a parent them boilerplate that supports Foundation 3 within WordPress. Now that I'm up to the actual integration by way of shortcodes and dynamic functions, I'm running into some things I don't know.

    Specifically, when using wp_nav_menu, I need to assign classes as follows.

    • If an LI tag has a child UL, the class "has-flyout" needs to be assigned
    • The submenu UL container then needs a class of "flyout" assigned

    Before anyone suggests it, I realize someone will say to do this:

    <script>
    	$(document).ready(function() {
    		$('.nav-bar').find('li:has(ul)').addClass('has-flyout');
    		$('.nav-bar li').find('ul').addClass('flyout');
    	});
    </script>

    Please bear in mind that this hack-around does not work. The classes appear in the document inspector but not in the rendered source. As a result, the flyouts do not fly.

    What I need is to better understand how dynamic class assignment works via the use of filters and custom walkers. Right now I have almost no understanding of how to go about assigning such a thing.

    In a perfect world, it'll be as simple as assigning a walker; or maybe someone will just dump a class like this on me because they have done it before. Out here in the real world, I expect to have to struggle a little bit.

    Anyone game to help me tackle the problem?

  2. ianarmstrong
    Member
    Posted 1 year ago #

    Huh, forgot the JS DOM changes never show in the source. Guess that's not the issue. I'd still prefer a custom walker though since I'll need to build one for all of the F3 menu types. Will post if I figure this out before someone else does.

  3. ianarmstrong
    Member
    Posted 1 year ago #

    Ok, Foundation 3 needs the classes in place well before they are added by jQuery. It'll have to be a custom walker.

  4. ianarmstrong
    Member
    Posted 1 year ago #

    Solution: https://gist.github.com/3184243

    Most people who stumble on this will want to comment out the part that adds page descriptions to each menu item. The author, in addition, has put out a full WP theme based on Bones + Foundation 3

    https://github.com/awshout/Foundry

    Cheers

Topic Closed

This topic has been closed to new replies.

About this Topic