0

So I have just started developing a theme with _s (underscores) as a basis. For three days straight (almost) I have been trying to make an accordion menu sort of like this:

Example: https://codyhouse.co/demo/multi-level-accordion-menu/animated.html

I know I have to make use of jQuery, but I have never used jQuery before and I do not know how to "integrate" a jQuery script in Wordpress.

I know I have to style the menu accordingly but I am not sure how to do this because it seems as if my php code for the menu* just automatically generates classes

* <?php wp_nav_menu(array( 'theme_location' => 'primary', 'sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu', 'menu_id' => 'primary-menu' ) ); ?>

So basically what I am saying is I want the menu in the example but I have no idea how to do it in wordpress. I don't expect anyone to just hand me the code but to be honest, I would appreciate any help here. I am pretty hopeless and I have really tried my best!

If anyone can help me out I would be much obliged!

This is what I have so far.

header.php

<div class="menu-container">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <?php wp_nav_menu(array(
        'theme_location' => 'primary',
        'sort_column' => 'menu_order',
        'menu' => 'Categories',
        'container_class' => 'main-menu',
        'menu_id' => 'primary-menu'
        ) ); ?>
    </nav><!-- #site-navigation -->
</div><!-- #menu-container -->

Rendered HTML (between <nav> and </nav>)

<nav id="site-navigation" class="main-navigation" role="navigation">
                <div class="main-menu"><ul id="primary-menu" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1046"><a href="#">Pages</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1695"><a href="http://localhost/about/page-image-alignment/">Page Image Alignment</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1693"><a href="http://localhost/about/page-image-alignment/">Page Image Alignment</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1696"><a href="http://localhost/about/page-markup-and-formatting/">Page Markup And Formatting</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1694"><a href="http://localhost/about/page-markup-and-formatting/">Page Markup And Formatting</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1047"><a href="#">Categories</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1048"><a href="http://localhost/category/markup/">Markup</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1050"><a href="http://localhost/category/unpublished/">Unpublished</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1051"><a href="#">Depth</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1052"><a href="#">Level 01</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1053"><a href="#">Level 02</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1054"><a href="#">Level 03</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1055"><a href="#">Level 04</a>
                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1056"><a href="#">Level 05</a>
                    <ul class="sub-menu">
                        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1057"><a href="#">Level 06</a>
                        <ul class="sub-menu">
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1058"><a href="#">Level 07</a>
                            <ul class="sub-menu">
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1059"><a href="#">Level 08</a>
                                <ul class="sub-menu">
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1060"><a href="#">Level 09</a>
                                    <ul class="sub-menu">
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1061"><a href="#">Level 10</a></li>
                                    </ul>
</li>
                                </ul>
</li>
                            </ul>
</li>
                        </ul>
</li>
                    </ul>
</li>
                </ul>
</li>
            </ul>
</li>
        </ul>
</li>
    </ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1062"><a href="#">Advanced</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1064"><a title="Custom Title Attribute" href="#">Menu Title Attribute</a></li>
    <li class="custom-menu-css-class menu-item menu-item-type-custom menu-item-object-custom menu-item-1065"><a href="#">Menu CSS Class</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1066"><a target="_blank" href="http://apple.com">New Window / Tab</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1063"><a href="#">Menu Description</a></li>
</ul></div>         </nav>

style.css (Only the part styling navigation)

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    width: 100%;
}

.main-navigation li {
    float: left;
    position: relative;
    width: inherit;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

.menu-toggle {
    display: none;
}
.main-navigation ul {
    display: block;
}


.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}
Improve this question
2
  • Can you also post the rendered html between the nav tags?
    – cnorthfield
    Commented Apr 19, 2016 at 22:36
  • I have edited the question with rendered HTML just now
    – Arete
    Commented Apr 19, 2016 at 22:59

1 Answer 1

Reset to default
1

Add the menu_class argument with value of cd-accordion-menu to your code, so that it looks like this:

<div class="menu-container">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <?php wp_nav_menu(array(
        'theme_location' => 'primary',
        'sort_column' => 'menu_order',
        'menu' => 'Categories',
        'container_class' => 'main-menu',
        'menu_id' => 'primary-menu',
        'menu_class' => 'cd-accordion-menu'
        ) ); ?>
    </nav><!-- #site-navigation -->
</div><!-- #menu-container -->

You can see more options to change here: https://developer.wordpress.org/reference/functions/wp_nav_menu/

About learning jQuery, it's really very easy. Just go to http://api.jquery.com/ and read as many pages from left menu as possible. It will definitely help.

For using jQuery with WordPress, preferrably enqueue it to prevent conflicts due to duplicate addition in source code. (read more here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ )

Improve this answer
3
  • Thanks, this helps a little but your answer does not explain styling or how to use jQuery with WP in the menu..
    – Arete
    Commented Apr 20, 2016 at 1:11
  • I've updated it :) However about styling, please elaborate your query
    – Nabeel Khan
    Commented Apr 20, 2016 at 4:13
  • and if it was helpful then please vote up and mark as correct.
    – Nabeel Khan
    Commented Apr 20, 2016 at 4:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.