Any way to break long lists in nav menu?

beardedgit · October 22, 2013

Hi folks.

I've got my nav menu set up to show links to folders, subfolders and galleries as per the following screenshot:

I'd like to be able to break the long lists into two columns (or more if required) when they return more than, say, 20 entries. Can it be done? I've not found any such option in the menu setup.

I've searched Dgrin for various combinations of "break", "menu", "nav" and "list" but only find break-hacks for Legacy.

If anyone could point me in the right direction I'd be much obliged :thumb

If it helps, my ongoing tinkerings can be found at http://beardedgit.smugmug.com/

brandofamily · October 22, 2013

As far as I know there is no way to automatically break the list into parts, but you could add another level in the folders, maybe by years.

beardedgit · October 22, 2013

brandofamily wrote: »

As far as I know there is no way to automatically break the list into parts, but you could add another level in the folders, maybe by years.

Thanks for the suggestion, I'll think about it but I must admit that I'm reluctant to introduce more folder-levels just to address this matter.
It's a shame that we're not allowed to throw a bit of custom javascript at it :cry

thenickdude · October 23, 2013

You can actually do this with CSS. This would make just your day-walks submenu two columns, but only on screens that are wide enough:

@media only screen and (min-width: 970px) {

.yui3-menu-label[href$="/Fellwalking/Day-Walks"] + .yui3-menu-children {
	width:40em;
}
.yui3-menu-label[href$="/Fellwalking/Day-Walks"] + .yui3-menu-children > .yui3-menu-item {
	display:inline-block;
	width:20em;
}

}

I would recommend against having such a deeply nested menu, because using a multi-level pop-out menu is a usability nightmare. It requires mouse pointing precision at a similar level as playing a game of "operation" to avoid menus accidentally collapsing or being eclipsed by an option you didn't mean to select.

It also makes it impossible to open multiple galleries from the same menu at the same time (because middle-clicking on a link causes the menu to close and you have to start over).

juanheredia · October 23, 2013

Lamah wrote: »
You can actually do this with CSS. This would make just your day-walks submenu two columns, but only on screens that are wide enough:
@media only screen and (min-width: 970px) {

.yui3-menu-label[href$="/Fellwalking/Day-Walks"] + .yui3-menu-children {
	width:40em;
}
.yui3-menu-label[href$="/Fellwalking/Day-Walks"] + .yui3-menu-children > .yui3-menu-item {
	display:inline-block;
	width:20em;
}

}
I would recommend against having such a deeply nested menu, because using a multi-level pop-out menu is a usability nightmare. It requires mouse pointing precision at a similar level as playing a game of "operation" to avoid menus accidentally collapsing or being eclipsed by an option you didn't mean to select.

It also makes it impossible to open multiple galleries from the same menu at the same time (because middle-clicking on a link causes the menu to close and you have to start over).

Nice trick. Thanks for sharing. May I ask something? I've put this code in the theme CSS section, but it's not working for me. Is that the correct place?

thenickdude · October 23, 2013

That's the right place, but that code is hard-coded to only activate on a submenu whose parent link is "/Fellwalking/Day-Walks". You'll need to edit that part to be the link that heads the submenu you want to apply it to.

beardedgit · October 23, 2013

Lamah wrote: »
You can actually do this with CSS. This would make just your day-walks submenu two columns, but only on screens that are wide enough:
see original response
I would recommend against having such a deeply nested menu, because using a multi-level pop-out menu is a usability nightmare. It requires mouse pointing precision at a similar level as playing a game of "operation" to avoid menus accidentally collapsing or being eclipsed by an option you didn't mean to select.

It also makes it impossible to open multiple galleries from the same menu at the same time (because middle-clicking on a link causes the menu to close and you have to start over).

Thanks for that interesting solution which I'll use on a temporary basis, but it's not quite what I'm after as there are too many downsides to class it as a set-and-forget solution:

It only works on the hard-coded item, so for any other sub-menus that grow to an unwieldy length I'd have to go in and change the CSS rule;
It changes the original list order (not sure if that's a bad thing though);
It wouldn't cope if the next item I add (latest, therefore at the top) returns text longer than the 20em width, so another change to the rule would be necessary:
The break-point can't be defined - it spreads the list over 2 columns by default, it doesn't overflow to a second column only when a set number of entries in the original column is exceeded.

I'll keep it and tinker with it, it's a good starting point for casual enhancement. Thanks again

juanheredia · October 29, 2013

Lamah wrote: »

That's the right place, but that code is hard-coded to only activate on a submenu whose parent link is "/Fellwalking/Day-Walks". You'll need to edit that part to be the link that heads the submenu you want to apply it to.

Yes, of course I've edited that, but it's not working. I'll still research more. Thanks.

Sent from my Galaxy Note 8

thenickdude · October 29, 2013

juanheredia wrote: »

Yes, of course I've edited that, but it's not working. I'll still research more. Thanks.

I noticed that in your CSS you've got several C++ style comments (lines beginning with //). This is not actually valid CSS (the only comments allowed are enclosed by /* */) and is breaking this customisation on your site!

AceCo55 · October 29, 2013

beardedgit wrote: »

Thanks for the suggestion, I'll think about it but I must admit that I'm reluctant to introduce more folder-levels just to address this matter.
It's a shame that we're not allowed to throw a bit of custom javascript at it :cry

From my perspective, I would have thought it would make for a better user experience if you DID add another level to your menu. Scanning down long lists seems, to me, less efficient than going to a another level.
However, you of course know your site and site users infinitely better than me.
I would just urge you to maybe reconsider as see if it WOULD work for you.

beardedgit · October 29, 2013

AceCo55 wrote: »

From my perspective, I would have thought it would make for a better user experience if you DID add another level to your menu. Scanning down long lists seems, to me, less efficient than going to a another level.
However, you of course know your site and site users infinitely better than me.
I would just urge you to maybe reconsider as see if it WOULD work for you.

Thanks for that

There are pros and cons either way. More levels allows for shorter lists but each extra level pushes the lowest level further to the right which can lead to an "exit offstage right" condition. Fewer levels keeps the lowest level on the pitch horizontally but makes the upper levels longer which can lead to the lowermost links going below the fold.

It's a question of screen real-estate, and the number of items that lay claim to it will only grow as more albums are created.

I'm coming to the conclusion that a better solution might be to have the lowest levels open in their own scroll-boxes instead of forcing columns. That's what I've been playing with lately but so far there's nothing that I'm happy to put live. Scroll-boxes aren't my strong suit.

AceCo55 · October 30, 2013

Well on my site, as I go deeper into more levels ... if the next level doesn't have enough room to show completely on the right, then it automatically repositions itself on the left of the previous level. I never get a situation where the menu leaves the screen's real estate.

beardedgit · October 30, 2013

AceCo55 wrote: »

Well on my site, as I go deeper into more levels ... if the next level doesn't have enough room to show completely on the right, then it automatically repositions itself on the left of the previous level. I never get a situation where the menu leaves the screen's real estate.

I suppose it depends on the length of the text in the menu.

By way of a demo I deployed Lamah's excellent code, adapted for a column width of 30em to accommodate the long titles in my Wildcamping folder, to show how it goes East in extreme cases. As you can see, there was nowhere else for the thing to go except sideways:

Anyway, it's no longer an issue for me, I've gone for scroll-boxes instead. Currently I have them in only two specified places but they reduce screen-clutter fairly well without being too intrusive, IMHO:

All I need now is a way to target each right-most menu level, instead of targeting specific folders by href$=

AceCo55 · October 30, 2013

Thanks for taking the time to show me your issue. It's not something I have ever come across.
I like the look of your solution - I think its neat and I would image easy to use.
Good luck going forward :andy

beardedgit · October 30, 2013

AceCo55 wrote: »

Thanks for taking the time to show me your issue. It's not something I have ever come across.
I like the look of your solution - I think its neat and I would image easy to use.
Good luck going forward :andy

Cheers!

FWIW, here's the CSS that I'm using currently in "Entire Site", I expect it'll change if I find a better way of targeting:

@media only screen and (min-width: 970px) {

.yui3-menu-label[href$="/Fellwalking/Day-Walks"]
  + .yui3-menu-children {
max-height: 260px;
overflow-y: scroll;
}

.yui3-menu-label[href$="/Everything-else/Local-Places"]
  + .yui3-menu-children {
max-height: 260px;
overflow-y: scroll;
}

}

brandofamily · October 30, 2013

beardedgit wrote: »
Cheers!

FWIW, here's the CSS that I'm using currently in "Entire Site", I expect it'll change if I find a better way of targeting:
@media only screen and (min-width: 970px) {
 
.yui3-menu-label[href$="/Fellwalking/Day-Walks"]
  + .yui3-menu-children {
max-height: 260px;
overflow-y: scroll;
}
 
.yui3-menu-label[href$="/Everything-else/Local-Places"]
  + .yui3-menu-children {
max-height: 260px;
overflow-y: scroll;
}
 
}

Is there a way to apply this code for ALL drops in the nav that go longer than 260px or do I HAVE TO specify the category?

beardedgit · October 30, 2013

brandofamily wrote: »

Is there a way to apply this code for ALL drops in the nav that go longer than 260px or do I HAVE TO specify the category?

That's what I'm trying to find out, so far the Internet's been reluctant to provide a suitable method.

The goal is to set it and forget it, having it lying in wait for drops that grow too large.

beardedgit · October 30, 2013

BTW, I use max-height = 260px only because it holds 10 items when I see it from here, and I've jiggered about with the padding and borders as per the following CSS:

/* Adjust the spacing of dropdown items in the horizontal navigation menu */
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-label {
    padding-top:1px!important;
    padding-bottom:1px!important;
    padding-left:6px!important;
    padding-right:33px!important
}

/* Add 1px black border to dropdowns in the horizontal navigation menu */
.yui3-menu-children{
    border:1px solid black!important
}

As usual, YMMV according to what rules you have in force:

beardedgit · October 30, 2013

Update:

overflow-y: scroll; changed to overflow-y: auto;

brandofamily · October 30, 2013

beardedgit wrote: »

Update:

overflow-y: scroll; changed to overflow-y: auto;

What's the change do for you that the original did not?

beardedgit · October 30, 2013

brandofamily wrote: »

What's the change do for you that the original did not?

"auto" invokes scrollbar only when 260px height is reached, "scroll" forced scrollbar for all px heights.

brandofamily · October 30, 2013

beardedgit wrote: »

"auto" invokes scrollbar only when 260px height is reached, "scroll" forced scrollbar for all px heights.

Hopefully someone smart with this stuff like Lamah will chime in.

brandofamily · October 30, 2013

beardedgit wrote: »

Update:

overflow-y: scroll; changed to overflow-y: auto;

Only works on 2nd level flyout drops huh?

juanheredia · October 30, 2013

Lamah wrote: »

I noticed that in your CSS you've got several C++ style comments (lines beginning with //). This is not actually valid CSS (the only comments allowed are enclosed by /* */) and is breaking this customisation on your site!

Thank you for your advice, I'll check it out.

beardedgit · October 30, 2013

brandofamily wrote: »

Only works on 2nd level flyout drops huh?

I've now got it applied to every lowest level on my site, it invokes a scroll-bar only wherever the number of galleries exceeds 10, currently it's working on the lowest 2 levels because they're the only places where I have enough galleries to activate it.

Code as follows:

/* Define the scroll-box and the folders to which it applies */
@media only screen and (min-width: 970px) {

.yui3-menu-label[href$=/Day-Walks] + .yui3-menu-children,
.yui3-menu-label[href$=/Wildcamping] + .yui3-menu-children,
.yui3-menu-label[href$=/Holidays] + .yui3-menu-children,
.yui3-menu-label[href$=/My-Astropics] + .yui3-menu-children,
.yui3-menu-label[href$=/My-Astrogear] + .yui3-menu-children,
.yui3-menu-label[href$=/Local-Places] + .yui3-menu-children,
.yui3-menu-label[href$=/General] + .yui3-menu-children,
.yui3-menu-label[href$=/In-the-garden] + .yui3-menu-children,
.yui3-menu-label[href$=/Our-Outdoor-Gear] + .yui3-menu-children,
.yui3-menu-label[href$=/Family] + .yui3-menu-children {
  width:auto;
  max-height:260px;
  overflow-y:auto
}
}

/* Adjust the spacing of dropdown items */
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-label {
  padding:1px 33px 1px 6px !important
} 

/* Add a 1px border to the dropdowns */
.yui3-menu-children{
  border:1px solid black!important
}

OK, so it's not pretty code and there's probably a better way of doing it, but it'll be fine for my lowly needs.

beardedgit · October 30, 2013

brandofamily wrote: »

Only works on 2nd level flyout drops huh?

The way that items are nested, and the "folder contents" settings used, influence whether further levels are displayed:

Any way to break long lists in nav menu?

Comments