Skip to main content
WordPress Development

Return to Question

Added code
Source Link
Arete
Arete
  • 318
  • 1
  • 3
  • 18

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>

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>
Source Link
Arete
Arete
  • 318
  • 1
  • 3
  • 18

jQuery accordion menu

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 -->

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%;
}