dynamic vertical sidebar accordion menu?

BTW, the website and accordion menu to which I’m speaking of is https://www.townofyork.org/

From the looks of your HTML code on the homepage it appears that you are designating your CSS navigation elements with classes as “page_item” and “children”. Looking through your CSS files very quickly, I didn’t see any references to those two classes.

You may want to read the reference for wp_nav_menu as it has some examples of implementing it in the Twenty Ten default theme.

Well, what you were looking at was an attempt at making it dynamic. If you have another look you’ll see the menu as I want it to appear and function but, it’s static not dynamic like I need it to be.

This is the sidebar.php code, as I said it’s static.

<div class="urbangreymenu">
<h3 class="headerbar"><a href="/meetings/">Meetings</a></h3>
<ul class="submenu">
<li><a href="/meetings/meeting-minutes/">Meeting Minutes</a></li>
<li><a href="/meetings/meeting-agenda/">Meeting Agenda</a></li>
<li><a href="/meetings/annual-meeting-minutes/">Annual Meeting Minutes</a></li>
</ul>
<h3 class="headerbar"><a href="/town-board/">Town Board</a></h3>
<ul class="submenu">
<li><a href="/town-board/past-members/">Past Members</a></li>
</ul>
<h3 class="headerbar"><a href="/committees/">Committees</a></h3>
<ul class="submenu">
<li><a href="/committees/plan-commission/">Plan Commission</a></li>
<li><a href="/committees/plan-commission/members/">Members</a></li>
<li><a href="/committees/r-l-c-c/">R.L.C.C.</a></li>
<li><a href="/committees/r-l-c-c/members/">Members</a></li>
</ul>
<h3 class="headerbar"><a href="/finance/">Finance</a></h3>
<ul class="submenu">
<li><a href="/finance/budget/">2010 Budget</a></li>
<li><a href="/finance/property-tax/">Property Tax</a></li>
<li><a href="/finance/annual-financial-report/">Annual Financial Report</a></li>
</ul>
<h3 class="headerbar"><a href="/elections-voting/">Elections & Voting</a></h3>
<ul class="submenu">
<li><a href="/elections-voting/general-election/">General Election</a></li>
</ul>
<h3 class="headerbar"><a href="/local-history/">Local History</a></h3>
<ul class="submenu">
<li><a href="/local-history/now-then/">Then & Now</a></li>
<li><a href="/local-history/greens-prairie/">Green's Prairie Cemetery</a></li>
</ul>
<h3 class="headerbar"><a href="/resident-info/">Resident Info.</a></h3>
<ul class="submenu">
<li><a href="/resident-info/directory/">Directory</a></li>
<li><a href="/resident-info/code-of-country-living/">Code of Country Living</a></li>
<li><a href="/resident-info/dog-licenses/">Dog Licenses</a></li>
</ul>
<h3 class="headerbar"><a href="/forms-permits/">Forms & Permits</a></h3>
<!-- <ul class="submenu">
<li><a href=""></a></li>
</ul> -->
<h3 class="headerbar"><a href="/garbage-recycling/">Garbage & Recycling</a></h3>
<!-- <ul class="submenu">
<li><a href=""></a></li>
</ul> -->
<h3 class="headerbar"><a href="/event-calendar/">Event Calendar</a></h3>
<!-- <ul class="submenu">
<li><a href=""></a></li>
</ul> -->
<h3 class="headerbar"><a href="/frequently-asked-questions/">F.A.Q.</a></h3>
<!-- <ul class="submenu">
<li><a href=""></a></li>
</ul> -->
<h3 class="headerbar"><a href="/contacts/">Contacts</a></h3>
<!-- <ul class="submenu">
<li><a href=""></a></li>
</ul> -->
<h3 class="headerbar"><a href="/links/">Links</a></h3>
<!-- <ul class="submenu">
<li><a href=""></a></li>
</ul> -->
</div>

<table style="width: 75%" cellspacing="3" cellpadding="3" align="center">
<tr>
<td>
<h2><strong>News Updates!</strong></h2>
</td>
</tr>
<tr>
<td><a href="/subscribe/">Sign up to receive
news<br />updates via email.</a></td>
</tr>
</table>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

The question is this; how do I turn the above static code into dynamic code using <?php wp_nav_menu($arg); ?>? I have no idea how to assign the CSS tags to the <?php wp_nav_menu($arg); ?> WP code.

I have been reading wp_nav_menu but everything I have tried doesn’t work.

Bueller?

Bueller?

I find it hard to believe that no one in the entire WP Community has ever tried to implement a Vertical Dynamic Accordion menu before?

If you visit the site in question what you are seeing is NOT a dynamic menu, it’s static but it needs to be dynamic.

Thanks!

Bueller?

I see that a lot of people have been hitting the website to have a look at the menu but yet no one knows how to make it dynamic? There seems to be a lot of interest in a Dynamic Vertical Menu for WP.

I don’t have a solution for you, but I’m definitely interested in anything that will let me put an expand/contract menu in a sidebar and have that menu created from the same Custom Menu that I use for the horizontal nav bar at the top of my page.

I posted a comment at the Nice Navigation widget page at https://eskapism.se/code-playground/nice-navigation/ asking about using Nice Navigation with Custom Menus. No reply so far, but it’s only been a few days. I really like Nice Navigation, and having it work with my Custom Menus would be perfect for me.

Scott

A solution I can think of if I were to implement with, for example, the Twenty Ten theme would require just JQuery. You would use the jquery function called slideup and slidedown.

The sidebar container class is ul.xoxo, so you would have an event listener for children li, and then children h3 (the title of each widget). This would trigger the slide up on h3’s parent li’s children (which would hide the h3) so then you’d manually make that h3 visible.

Then the same for slidedown again. Reasonably simple but a bit messy.

It would be dynamic to a point, it would work for each item (assuming they all have h3’s),

I’ve never played with jQuery. I’ll look into it.

Why do you say it would be messy?

Here’s an example of the Nice Navigation widget in the left sidebar: https://komotion.com/test-nice-navigation-widget/

Unfortunately I haven’t found a way to make Nice Navigation work with Custom Menus.

It would be messy in terms of, if I were to make this from scratch, i’d have another sub list under the h3. Its really simple stuff though. An example where i’ve used it (not on a wordpress site but it demonstrates the jquery if you viewsource)

Here

$('.NavLink').click(function () {

                $('#served-menu ul li').children('ul').slideUp('slow');

                if ($(this).children('ul').is(":visible")) {

                    $(this).children('ul').slideUp('slow');

                }

                else {

                    $(this).children('ul').slideDown('slow');

                }

            });

Thats the code for it, its just making child elements slide and hide and such.

My current menu is already using jQuery in addition to CSS to make it function as an Accordion style menu. But this is all static and I want it to be Dynamic pulling the information from my Custom Menu.

How to structure the jQuery and CSS is not the issue.

The one part of making this work Dynamically is what code should be used in the sidebar.php to Dynamically pull the Custom Menu and format it correctly based on the current CSS? The WP code <?php wp_nav_menu($arg); ?> and how to configure it is the issue. What do I need to add to <?php wp_nav_menu($arg); ?> ?