• Registered: 2010-04-08
  • Posts: 21

Topic: inline multi-level drop down menu. (plz help)

Here's a mockup of what I'm trying to achieve:
http://i134.photobucket.com/albums/q93/jeffreyandsavannah/nav_mockup-1.png

- want it to be animated

- It differs from the accordion menu because it opens with hover on the main link and lays over the top of the page content.

- I don't want the sub menus to close if you click on another sub menu (if there are two) user will click the parent item to hide its child links.

any idea on where I should start looking for information on how to build this thing? I looked high and low for something similar but they all seem to have sub menus swing out to the right instead of staying directly underneath their parent item.

thank you so much for your help in advance!

Last edited by pixeltarian (2010-04-11 07:04)

Thumbs up

  • From: Romania, Bucharest
  • Registered: 2009-07-17
  • Posts: 24

Re: inline multi-level drop down menu. (plz help)

- want it to be animated

So you have to use javascript. I recomend you good old jQuery.
It's not hard to make. You said you want to get the "accordion" on click, so I suggest you should just make a unordered list, with a <div> inside with overflow hidden and 0px height, and bind on click to increase the height. I'm not good at explaining so here's a example, just to point you out, not tested.

<ul id="menu">
    <li>
        <a href="#">Link one</a>
    </li>
    <li>
        <a href="#">Link two</a>
    </li>
    <li>
        <a href="#">Link three</a>
    </li>
    <li>
        <a href="#">Parent level two</a>
        <div class="holder">
            <ul id="submenu">
                    <li>
                        <a href="#">Sub-Link one</a>
                    </li>
                    <li>
                        <a href="#">Sub-Link two</a>
                    </li>
            </li>
        </div>
    </li>
</ul>

And the javascript code (jQuery based) :

$(function() {
    //bind on click event to list
    $('ul#menu li').click(function() {
        //check if it has a div wrapped
        if($(this).children('div').length) {
            //check if div is expanded
            if($(this).children('div').attr('class') == 'expanded') {
                //increase height to 100%
                $(this).children('div').slideUp(500);
                //set class to collapsed / identifier
                $(this).children('div').attr('class', 'collapsed');
            }
            else { 
                //decrease height to 0%
                $(this).children('div').slideDown(500);
                //set class to expanded / identifier
                $(this).children('div').attr('class', 'expanded');
            }
        }
    });
});

If you have further questions, just ask.

Bdesign's Website

Thumbs up

  • Registered: 2010-04-08
  • Posts: 21

Re: inline multi-level drop down menu. (plz help)

Thanks Bdesign!  I didn't see this till just now, but it looks like I, at the very least, was in the right place on my html and css. I went off on my own and hit up the IRC for help along the way. This is what I came up with:

http://designvassal.com/MAGchurch/

I use .slideToggle instead of the accordion plugin. I think the accordion may have been the better choice because sliding on hover gets kind of glitchy. if you move up and off then down over the sub links the menu will bounce up and down like crazy. i'm pretty much the worst at javascript. the thing I made at that link took me literally 7 hours. kept running into little bugs and quirks. maybe padding and margins will fix the glitchyness of the way I did it. at this point I don't really want to start over, but I will if I must. I'd rather it be done well then to keep pursuing a bad implementation.

anyone have anything thoughts on the way I did it? is the accordion a better way?

Last edited by pixeltarian (2010-04-11 15:33)

Thumbs up

  • From: Romania, Bucharest
  • Registered: 2009-07-17
  • Posts: 24

Re: inline multi-level drop down menu. (plz help)

Well .slideToggle() does exactly what I did, but in a faster way. It might get glitchy because of the computer you're testing on. You can always try and test effects in Opera, because it has some javascript acceleration. Anyway, you can always check the jQuery UI , more exactly this : http://jqueryui.com/demos/accordion/ . Have fun!

Bdesign's Website

Thumbs up

5 Reply by David

  • David
  • Wolf CMS support
  • Offline
  • From: Edinburgh, UK
  • Registered: 2009-07-16
  • Posts: 1,663
  • User Karma: 10

Re: inline multi-level drop down menu. (plz help)

@pixeltarian - in addition to Bd's suggestions (and your hard work!), you could have a look at Stu Nicholls' work: CSS slide, another CSS slider, and a jQuery slider (on click, not hover). Might suggest other possibilities.

Have to wonder, too (can't help it! sorry!) ... what's the aversion to the second-level horizontal fly-out? Check out the menus on the Notepad and SimpleFolio Wolf themes. Wouldn't something like that do the job? and elegantly? wink

It will be interesting to see how this goes!

P.S. - have you seen a working site with the system you're after? That might be a help, too! Got any links?

David's Website

Thumbs up

  • Registered: 2010-04-08
  • Posts: 21

Re: inline multi-level drop down menu. (plz help)

David wrote:

@pixeltarian - in addition to Bd's suggestions (and your hard work!), you could have a look at Stu Nicholls' work: CSS slide, another CSS slider, and a jQuery slider (on click, not hover). Might suggest other possibilities.

Have to wonder, too (can't help it! sorry!) ... what's the aversion to the second-level horizontal fly-out? Check out the menus on the Notepad and SimpleFolio Wolf themes. Wouldn't something like that do the job? and elegantly? wink

It will be interesting to see how this goes!

P.S. - have you seen a working site with the system you're after? That might be a help, too! Got any links?



$(this).find("#whohov").slideToggle("fast" },{queue: false});
is that syntaxually wrong?

I can't find any sites with this navigation. I have vague, haunting memories of seeing a good implementation of it, but I can't remember where for the life of me.

thanks for all the tips, the Vertical concertina slide menu is pretty close to what I want. I've been scoring the web for an example like that with no luck. thanks a million billion.

@Bdesign: it's glitchy because it needs a stop command, but I can't figure out how/where to put it. I'm basically working off of this (using queue instead of stop, but it SHOULD work):

$("#who").hover(function () {
        $(this).find("#whohov").slideToggle("fast" },{queue: false});
    }).find("#whohov").hide();

I must not be putting queue: false in properly because it doesn't work. the glitchy-ness is happening because the animation has to fold all the way out and back in, if you hover twice before the entire animation is done, it does it again.

David wrote:

Have to wonder, too (can't help it! sorry!) ... what's the aversion to the second-level horizontal fly-out? Check out the menus

I just think horizontal fly-outs are sloppy looking. especially for this design. I want it to be as minimalistic as possible and give users control over what elements of the navigation will be shown. keeping it inline is mostly a personal visual cleanliness preference. I wouldn't disagree that horiz fly-outs can be clean, I'm just of the opinion that all-vertical flyouts are wonderful looking (especially how I'm picturing it in my head. wich me luck getting it out!)

I found this:

$(document).ready(function() {
    $('ul.anim_queue_example2 a')
        .hover(function() {
            $(this).stop().animate({ left: 20 }, 'fast');
        }, function() {
            $(this).stop().animate({ left: 0 }, 'fast');
        });
});

on this site:
http://www.learningjquery.com/2009/01/q … ue-buildup

so it explains what is happening and how to fix it. I am just so new to javascript that I'm not sure how to put it into my current code:

$("#who").hover(function () {
        $(this).find("#whohov").slideToggle("fast");
    }).find("#whohov").hide();

it's seems like the "don't queue" thing might work better for what I'm doing. I found another good page here:
http://css-tricks.com/examples/jQueryStop/

If I was just a little bit smarter... I could have it all!

Last edited by pixeltarian (2010-04-12 09:49)

Thumbs up

  • Registered: 2010-04-08
  • Posts: 21

Re: inline multi-level drop down menu. (plz help)

This works. but it initially shows the menu and then zips it shut right away:

var $newhov = $("#newhov"), oHeight = $newhov.height();
    $("#newlink").hover(function () {
        $newhov.stop().animate({height: oHeight}, "fast");
    }, function(){
        $newhov.stop().animate({height: 0}, "fast", function(){ $(this).hide() });
    }).mouseleave();

Last edited by pixeltarian (2010-04-12 12:06)

Thumbs up

  • From: Romania, Bucharest
  • Registered: 2009-07-17
  • Posts: 24

Re: inline multi-level drop down menu. (plz help)

It shows the menu because it has the initial height, not 0. So you can do in css #newhov { height: 0px; overflow:hidden; } , or modify your js code like this:

var $newhov = $("#newhov"), oHeight = $newhov.height();
    $newhov.css('height', '0px');
    $("#newlink").hover(function () {
        $newhov.stop().animate({height: oHeight}, "fast");
    }, function(){
        $newhov.stop().animate({height: 0}, "fast", function(){ $(this).hide() });
    }).mouseleave();

It's better to use the JS fix, because if the user has JS disabled, the menu will be shown expanded.
Btw, it's good practice to wrap your code into the window load event, so the code will be parsed after the HTML and CSS are, like this :

$(window).load(function() {
// your code here
});

OR the short-hand one :

$(function() {
// your code here
});

Have fun.

Bdesign's Website

Thumbs up

  • Registered: 2010-04-08
  • Posts: 21

Re: inline multi-level drop down menu. (plz help)

Bdesign wrote:

It shows the menu because it has the initial height, not 0. So you can do in css #newhov { height: 0px; overflow:hidden; } , or modify your js code like this:

var $newhov = $("#newhov"), oHeight = $newhov.height();
    $newhov.css('height', '0px');
    $("#newlink").hover(function () {
        $newhov.stop().animate({height: oHeight}, "fast");
    }, function(){
        $newhov.stop().animate({height: 0}, "fast", function(){ $(this).hide() });
    }).mouseleave();

It's better to use the JS fix, because if the user has JS disabled, the menu will be shown expanded.
Btw, it's good practice to wrap your code into the window load event, so the code will be parsed after the HTML and CSS are, like this :

$(window).load(function() {
// your code here
});

OR the short-hand one :

$(function() {
// your code here
});

Have fun.

if the menu is shown expanded, it will lay over the page's content, so I think CSS is the way to go. I can always put little accessibility links at the bottom.

I am using

$(document).ready(function () {

I like to keep all my javascript packed into a .js file and just include it in the header. it makes the page look cleaner for editing the html.

this is the same as window.load right?
I just didn't include it in the quote because is wasn't vitally relative.

the latest: http://designvassal.com/MAGchurch/

now the very last thing is to make the div containers not go further than the end of the link list. when you mouseover, you can see the darker grey box going much further down than it needs to. it should only extend to the end of the links listed.

Thumbs up

10 Reply by David

  • David
  • Wolf CMS support
  • Offline
  • From: Edinburgh, UK
  • Registered: 2009-07-16
  • Posts: 1,663
  • User Karma: 10

Re: inline multi-level drop down menu. (plz help)

pixeltarian wrote:

... the latest: http://designvassal.com/MAGchurch/

Progress! I know nothing about the JS/jQuery side of things, but looking at your source ... it's going to be interesting generating those links! But one step at a time, I suppose. wink

David's Website

Thumbs up

  • Registered: 2010-04-08
  • Posts: 21

Re: inline multi-level drop down menu. (plz help)

David wrote:

it's going to be interesting generating those links! But one step at a time, I suppose. wink

can you explain what you mean by that? I was just planning on just using raw html links. I hope you are not seeing some big scary conflict that I didn't notice!  if you mean how will I add new pages from wolf and get the placed properly in the menu. yes. that's a tough one, I think it can be done with ID selectors and such. in the end I'll have to come up with a selector that just determines location in the menu. then I'll probably have to add a custom drop down field called "menu placement" where it will simply add the ID tag associated with the location. maybe? does that sound like a place to start? can you force an ID tag to the navigation items dependent upon their level in the "pages" section of Wolf? I'm thinking of using perch instead of wolf for just this project. it's a pretty small site and I'm not sure I have the time to learn how to make wolf work with the design. I am definitely using wolf for my own site though. it's going to be wicked awesome. 

I also am drawing a blank on what css property will make these lay over the top of content instead of pushing the content down the page. anyone remember?

Last edited by pixeltarian (2010-04-12 15:05)

Thumbs up

12 Reply by David

  • David
  • Wolf CMS support
  • Offline
  • From: Edinburgh, UK
  • Registered: 2009-07-16
  • Posts: 1,663
  • User Karma: 10

Re: inline multi-level drop down menu. (plz help)

pixeltarian wrote:

can you explain what you mean by that? I was just planning on just using raw html links.

"Raw links"?! yikes One of the advantages (obviously!) to using a CMS is that you don't need to do that kind of thing. Your site can change, grow, shrink, "dynamically" and you don't need to make any interventions into your navigation. Were you thinking of the pastors "blogging", for example? wink

I hope you are not seeing some big scary conflict that I didn't notice!  if you mean how will I add new pages from wolf and get the placed properly in the menu. yes. that's a tough one,...

No, no conflict per se. But if you can build your system with structured data (UL lists are the most common, but there are other possibilities), then Wolf can take care of your navigation for you. If you're doing some mix-n-match kind of thing with these navigation items, then it gets much trickier. And what's the point of that? big_smile

David's Website

Thumbs up

  • Registered: 2010-04-08
  • Posts: 21

Re: inline multi-level drop down menu. (plz help)

David wrote:
pixeltarian wrote:

can you explain what you mean by that? I was just planning on just using raw html links.

"Raw links"?! yikes One of the advantages (obviously!) to using a CMS is that you don't need to do that kind of thing. Your site can change, grow, shrink, "dynamically" and you don't need to make any interventions into your navigation. Were you thinking of the pastors "blogging", for example? wink

I hope you are not seeing some big scary conflict that I didn't notice!  if you mean how will I add new pages from wolf and get the placed properly in the menu. yes. that's a tough one,...

No, no conflict per se. But if you can build your system with structured data (UL lists are the most common, but there are other possibilities), then Wolf can take care of your navigation for you. If you're doing some mix-n-match kind of thing with these navigation items, then it gets much trickier. And what's the point of that? big_smile


can wolf differentiate ?

<ul>
<li></li>
<li></li>
<ul>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
</ul>

can it take a that nested ul and do something different with it? be default, with no css reset junk, the nest ul would be indented. hmm... I guess there's no way to change how the page reacts to a nested UL is there? I mean without using classes and etc.

Thumbs up

14 Reply by David

  • David
  • Wolf CMS support
  • Offline
  • From: Edinburgh, UK
  • Registered: 2009-07-16
  • Posts: 1,663
  • User Karma: 10

Re: inline multi-level drop down menu. (plz help)

pixeltarian wrote:

can it take a that nested ul and do something different with it? be default, with no css reset junk, the nest ul would be indented. hmm... I guess there's no way to change how the page reacts to a nested UL is there? I mean without using classes and etc.

As long as its consistent and logically structured, the rest is up to you. But in the situation you give, that's not "valid" HTML. It should rather be:

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
    <li></li>
</ul>

Can your system cope with that?

David's Website

Thumbs up

  • Registered: 2010-04-08
  • Posts: 21

Re: inline multi-level drop down menu. (plz help)

David wrote:
pixeltarian wrote:

can it take a that nested ul and do something different with it? be default, with no css reset junk, the nest ul would be indented. hmm... I guess there's no way to change how the page reacts to a nested UL is there? I mean without using classes and etc.

As long as its consistent and logically structured, the rest is up to you. But in the situation you give, that's not "valid" HTML. It should rather be:

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
    <li></li>
</ul>

Can your system cope with that?


oh yes. I'm silly. that's actually the way I did it on the site. I forgot to nest the UL properly in my little example there. oops.

Thumbs up

  • From: Leiden, The Netherlands
  • Registered: 2009-07-15
  • Posts: 2,233
  • User Karma: 22

Re: inline multi-level drop down menu. (plz help)

If you can program it in PHP, Wolf can do it. wink

Wolf CMS founder and lead developer
Please always check the Support forums and Wiki before asking. (My Ohloh account.)
Like Wolf CMS? Consider making a financial contribution.

mvdkleijn's Website

Thumbs up