WordPress.org

Ready to get started?Download WordPress

Forums

dynamic vertical sidebar accordion menu? (23 posts)

  1. gixxer188
    Member
    Posted 3 years ago #

    I have tried to write this myself and searched here and the Interwebs endlessly but I cannot get it to work or find an example that uses dynamic code in the sidebar.php file combined with code in the functions.php file that will generate a dynamic vertical sidebar accordion menu from a "custom menu" that includes both Pages and Categories. Has this ever been done before? Can anyone help?

    I can make this work as a static sidebar menu but I do not understand how to code the sidebar.php (<?php wp_nav_menu($arg); ?>) file with my CSS code so that it works correctly.

  2. gixxer188
    Member
    Posted 3 years ago #

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

  3. psimatrix
    Member
    Posted 3 years ago #

    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.

  4. gixxer188
    Member
    Posted 3 years ago #

    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; ?>
  5. gixxer188
    Member
    Posted 3 years ago #

    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.

  6. gixxer188
    Member
    Posted 3 years ago #

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

  7. gixxer188
    Member
    Posted 3 years ago #

    Bueller?

  8. gixxer188
    Member
    Posted 3 years ago #

    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!

  9. gixxer188
    Member
    Posted 3 years ago #

    Bueller?

  10. gixxer188
    Member
    Posted 3 years ago #

    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.

  11. sbabb
    Member
    Posted 3 years ago #

    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 http://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

  12. Ganners
    Member
    Posted 3 years ago #

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

  13. sbabb
    Member
    Posted 3 years ago #

    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: http://komotion.com/test-nice-navigation-widget/

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

  14. Ganners
    Member
    Posted 3 years ago #

    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.

  15. gixxer188
    Member
    Posted 3 years ago #

    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.

  16. gixxer188
    Member
    Posted 3 years ago #

    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); ?> ?

  17. vivalet
    Member
    Posted 3 years ago #

  18. gixxer188
    Member
    Posted 3 years ago #

    @vivalet, no, I mean like this http://www.townofyork.org/

    What you are seeing at http://www.townofyork.org/ is "static" and I want it to be "dynamic".

  19. comparco
    Member
    Posted 3 years ago #

    I am not sure if I am talking about the same thing discussed here. But I am trying to create a sidebar menu that is static ie does not scroll with the page. such as this site.
    any help would be appreciated

  20. gixxer188
    Member
    Posted 3 years ago #

    @comparco

    Have a look at their CSS and you'll see they have applied the following CSS to the sidebar using position:fixed

    /* Begin Sidebar */
    #sidebar
    {
    	font-size: 250%;
        position: fixed;
        top: 10px;
    	padding: 20px 0 10px 0;
    	margin-left: 745px;
    	width: 190px;
    	}
    
    #sidebar form {
    	margin: 0;
    	}
    /* End Sidebar */
  21. comparco
    Member
    Posted 3 years ago #

    Many thanks gixxer188 I will try that for my site.
    cheers

  22. comparco
    Member
    Posted 3 years ago #

    Hi gixxer I think I have it. Once I changed
    #sidebar
    to
    .sidebar
    many thanks

  23. gearu
    Member
    Posted 3 years ago #

    @gixxer188 I am investigating the same thing. I am trying to implement the accordion slider from here: http://www.i-marco.nl/weblog/jquery-accordion-3/

    as part of wp_nav_menu you are able to specify the class for the main parent

      , by doing this:

      <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'menu_class' => 'menu collapsible', 'theme_location' => 'primary' ) ); ?>

      The problem that i have is that there is no way to add a class to the children UL items.

      I think that to do this, one might have to write a custom walker for wp_nav_menu. but i have no idea how to do this.

      Like you, I wish to create a dynamic accordion menu!

      any advice would be appreciated.

      you might be able to figure out some of what you need by looking at this plugin (dcwp_jquery_accordion_menu). They seem to have the dynamic thing working, but i don't like the implementation of the slider.

Topic Closed

This topic has been closed to new replies.

About this Topic