Drop down vertical menus.

ndweekes · 2013-12-26 09:09:37

I am in the process of upgrading my site from CE2 to CE3. Having looked at the various implementations I particularly like the vertical menu structure as use by Daniel Leu. I followed both the tutorials by Matthew and Daniel and was able to create and style a vertical menu. However what I would like to achieve is to have a drop down function when clicked on the way Daniel has been able to. I tried activating the various site wide menu functions in the php plugins hoping this would do it but no luck, am I missing something? My new site is not online yet but the old CE2 version is at http://www.nathanweekes.com Any help would be appreciated, and must remember to make that contribution to Daniels wine and pizza fund.

rod barbee · 2013-12-28 00:48:15

there are no actual "drop downs" in the vertical implementation. Sub-menus are indented. You're not seeing this indentation?
Are you viewing your site online or in a virtual server rather than the Lightroom preview area?

ndweekes · 2013-12-28 10:24:13

I do see the indentations, I have tried it out online, and the menu structure closely mirrors that shown in the TTG tutorial. However when I look at Daniel Leu's site if I click on Blog for example, a sub menu appears, if I then click on Galleries a different sub menu appears whilst that under Blog disappears. That was the effect I was hoping to be able to recreate.

Matthew · 2013-12-28 13:33:35

What you're looking for is an "accordion" menu. Not something we supported, but you can build and implement one via PHPlugins. Search for "jquery accordion" or maybe "jquery accordion menu" and I'm sure you will come up with some examples.

Daniel Leu · 2013-12-30 05:32:00

I created my submenus with conditional code; when I am on a gallery page, I show the gallery submenu.

Following code fragment shows the principle:

// SITE-WIDE NAVIGATION MENU
function ttg_header_navigation( $style, $path ) { 
    echo '
    <div id="navigation" class="tab-content clearfix">
    <div class="mantle clearfix">
        <div class="core clearfix">
        <ul class="my_menu clearfix">
            <li><a href="/galleries.php">Galleries</a>
                ';
                if ((G_STYLE == 'CE3-PAGES-GALLERIES' && CURRENTPAGENAME == 'galleries.php')
                    || 
                    (( G_STYLE == 'CE3-GALLERY' || G_STYLE == 'CE3-AUTOINDEX') && strlen(strstr(CURRENTPAGEURL,'/galleries/'))>0) 
                   )
                {
                        echo '<ul class="my_sub_menu clearfix">';
                        //
                        // Here goes the sub-menu code
                        //
                        echo '</ul>';
                }
            echo '/li>';

            echo '
            <li><a href="/about.php">About</a></li>
            <li><a href="/contact.php">Contact</a></li>
            ';

        echo '
        </ul>
        </div>
    </div>
    </div> 
    ';

    return false;        // Replaces normal menu
} // END

ndweekes · 2013-12-31 00:36:07

Thanks for your help so far. I have been trying the approaches suggested and currently I am tending to favour a jquery accordian. I am assuming that I need to reference javascript and jquery files in the head function of the phpplugin file. Various examples of such menus that I have looked at use a jquery script similar to the one below but I can't work out where I should put! I have tried putting it in the head and also in the site wide drop down menu function directly above the menu html and in both cases I just get a blank page.

<script type="text/javascript">
    $(document).ready(function () {
        $('.accordion li').click(function (ev) {
            if (!$(ev.target).is('a')) {
                if (!$(this).find('> ul').is(':visible')) {
                    $(this).find('> ul').show();
                    $(this).find('> span.spanarrowdown').addClass('spanarrowup');
                    $(this).find('> span.spanarrowdown').removeClass('spanarrowdown');
                } else {
                    $(this).find('> ul').hide();
                    $(this).find('> span.spanarrowup').addClass('spanarrowdown');
                    $(this).find('> span.spanarrowup').removeClass('spanarrowup');
                }
                return false;
            }
        });
    });
</script>

Matthew · 2013-12-31 16:14:14

The gallery already includes the jQuery script, so don't call that again.

You should put your accordion script either into the head or the foot, depending on the script. You will need to gauge that on your own. But looking at what you've supplied here, and without having tried it, I don't think it matters.

I think you will also need this in your CSS, so use the custom CSS PHPlugins function as well:

.accordion > ul { display:none; }

That should close your accordions by default. The script will then open them on click. Again, I write this without having tried it.

Community @ The Turning Gate

#1 2013-12-26 09:09:37

Drop down vertical menus.

#2 2013-12-28 00:48:15

Re: Drop down vertical menus.

#3 2013-12-28 10:24:13

Re: Drop down vertical menus.

#4 2013-12-28 13:33:35

Re: Drop down vertical menus.

#5 2013-12-30 05:32:00

Re: Drop down vertical menus.

#6 2013-12-31 00:36:07

Re: Drop down vertical menus.

#7 2013-12-31 16:14:14

Re: Drop down vertical menus.

Board footer