Nav Menu Update
Closed this issue · 29 comments
Improve nav menu behavior to where users don't have to navigate to a chapter landing page in order to see section entries in nav menu.
@coiko I started to experiment a bit with our idea of having the nav menu chapters expand as you hove over them, revealing their sections. However, I ran into a couple of issues that I think might have been overlooked in our discussion.
In the gif below, hovering over a nav menu chapter will reveal its sections (with no smooth animations or transitions). The gif shows an attempt trying to see chapter 7 sections while currently viewing chapter 6 sections. As you might be able to see, the problem is that as chapter 6 shrinks, the mouse is no longer hovering over chapter 7, but instead hovering over the chapter that happened to "land" on the mouse when the menu shrinked. This led to 2 thoughts:
- The section list could expand upwards instead of downwards in this specific situation, so the mouse can stay at the bottom of chapter 7 section list.
- However, chapter 6 has 13 sections while chapter 7 has 7 sections. Even if chapter 7 expanded upwards, the nav menu will still have to shrink further to fully collapse chapter 6. So in the end, a different chapter will still "land" on the mouse position.
Do you happen to have any ideas on ideal behavior for this type of menu we are trying to create? I can only seem to come to the conclusion I came to above. One workaround I suppose is making all the section lists the same height. That way, it does not matter how many sections each chapter has. Chapter 7 section list will be as tall as chapter 6 section list. The "position" of the nav menu in relation to the mouse could be more predictable. But I am not sure if that is an ideal aesthetic for you.
Lastly, it looked like there was some discussion on hover-able nav menus and accessibility with keyboard navigation and screen readers. So there might be a chance we have to take a different route if we wanted move in the direction of accessibility. A different route that might solve possible accessibility issues and the issue I described above are dropdown buttons. Maybe clicking a dark grey-ish downarrow to the right of the chapter entry will expand the section list and keep it expanded. This could also be used on mobile. What are your thoughts on that possibility? It would be similar in functionality to our appendix pages. I'm also not sure if this is an ideal aesthetic.
Gif
@KianBadie Ah, I see the problem (thanks to your great gif!). Yes, that's definitely unworkable. I really like the idea of a clickable dropdown arrow for each chapter. Then could you have a behavior where the menu stays open when an arrow is clicked, but auto-closes when a section is clicked?
@coiko I see what you are saying. So when you click a section, all currently expanded section lists will be closed when the page loads? So when the new page loads, it will just be the current chapter section list open? In a sense, "resetting" the nav menu?
@KianBadie Sorry for the sloppy description. I was actually thinking that the whole nav menu would close when a section is chosen (so the user doesn't have to click out of it after they've made their selection).
But I also like the idea of resetting the nav menu to show only one chapter section list at a time!
@coiko No worries at all! How does this look? After seeing it, would you still like the nav menu to close when a new section is clicked?
Gif
@KianBadie it's beautiful! That looks fantastic! After giving this some more thought, I think my idea of closing the whole nav menu was a dumb one. If the user is trying to find something they remembered, they might click through several sections and it would be maddening if they had to re-open (and re-expand the chapter) each time. So scratch that. It might be a good idea, though, to have only one chapter expanded at a time to keep the menu from becoming too long and a pain to scroll through. Do you think it would be a good idea (and feasible) to have the previously-expanded chapter compress when another chapter is expanded?
@coiko No worries, always keep the ideas coming! I suppose there wouldn't be too many reasons to keep multiple section lists open at a time, so I think it wouldn't be a bad idea to close one list when another opens! I don't see a scenario where someone would want to compare section names from different chapters or something.
@coiko Here is what the nav looks like with the behavior you most recently described. Please let me know if any further changes should be made!
Gif
Thanks @KianBadie! I think it's perfect!
@coiko I was working on some updates to the nav menu and a question came up. When you say "switch bold/non-bold font of chapter and section titles", does that mean to make the section numbers (2, 2.1, 2.2, etc) non bold and make the titles (Cells, Membrane, Cell Wall) bold? Or does it mean something else?
@KianBadie Sorry for the confusing message! The numbers are fine. I was thinking of swapping the font appearance of the chapter titles (e.g. Cells) and the section/page titles (e.g. Membrane). Currently, the section titles appear more bold than the chapter titles, which seems backwards to me (I think the higher level should have more emphasis than the lower). Does that make sense?
@coiko Ah I see exactly what you are saying. Funny thing is that it only appears on Mac, which made me initially confused but I see what you are saying now.
@coiko I posted a screenshot of how the chapter titles look when bold. Is this what you had in mind? The screenshots below compare the bold to the current version where only the section numbers are bold.
Screenshots
@KianBadie Perfect! (And so funny that it was only a Mac problem.) Thanks!
@coiko It looks like Mac hides scrollbars by default when not in use (not just Safari, I think Mac in general), with an option to change them in the system settings. If we want the scroll bar in the nav menu to be guaranteed to always show, we would have to style a custom scrollbar. The downside to this is that the scrollbar will looks the same across operating systems. So we would lose the system default theme. Styling a scrollbar to look like a Mac scrollbar would also look like a Mac scrollbar on windows (just for whatever element you target. In this case, the nav menu).
Maybe a minimalist scroll bar could look fine on Mac (pretty much like the windows scroll bars in the images above: a grey rectangle). I am not sure if a Mac styled scroll bar in the nav menu would mesh well on Windows in my opinion. An alternative is to let Mac do it's thing and leave it up to the user and their settings for scrollbars. There are also other ways to indicate more content like having a curved shadow at the bottom of the nav menu to signal that there is more content. What do you think?
@KianBadie Ah, Mac is always so annoying. I don't think it's worth messing with the defaults for such a small issue. Let's leave it for now and if anyone reports any confusion (unlikely), we can think about something like the curved shadow you suggested. (Unless you're excited about it and want to try it out - in which case, of course feel free!) Thanks for looking into this!
@coiko Sounds good and no problem. I will leave experimenting with that for a future time!
@coiko I added the scrollbar to be the default behavior now. As you can see in the gif, the scroll bar only shows up when the content overflows. There is an option to have it always there (shown in the 2nd gif). I wanted to show an option where the scroll bar adds width instead of taking width and shifting everything to the left. But it seemed like it might take some trickery so I decided to return to it if there is time. Having said that, do you feel like either of the 2 options below are satisfying in any way?
Gif
Scrollbar always showing
@KianBadie This is fantastic! I think it's great! I prefer the second option slightly just because it doesn't shift the elements over when it appears. And since it looks like nothing gets pushed to a second line with standard zoom level, I definitely wouldn't worry about the width issue. Thanks!
@coiko The nav menu updates are live on our testing site! Please let me know if anything comes up with them.
@KianBadie Beautiful! And will do.
@coiko I was fixing a bug for the nav menu on mobile and realized that there is no transition when opening/closing the menu and I have forgotten why that is. Was that a design choice by us, or was that something unintentional?
@KianBadie Unintentional I think. (I certainly can't remember a reason for it.) So if you'd like to add a transition, please go for it. Thanks!
@coiko Also, I unfortunately decided to turn off the nav menu animations for mobile. There was some height calculating issues that kept cutting off the bottom portion of the nav (The Caltech Library part was not visible). I tried some fiddling for a little, but figured it would be better to turn off the animations and continue checking the rest of the site. Turning off the animations got rid of the need for any height calculations. What do you think?
This is just for the animations when the nav menu opens. Opening a section list still has its animations.
@coiko Is this what you had in mind for the navigation? The nav will only be as tall as it needs to be and it now covers the footer. The only catch is that the animation is not as consistent as it was before. Before, the nav would always take half a second to expand, with a nice ease-in/ease-out animation (as in having slower animation speeds at the beginning and end. A speed up and slow down). Since the height is a bit more responsive than fixed, the animation will be quicker when the nav menu is shorter (and skip the easing-out). When the nav menu is full height, the animation is normal. It's minor, but I thought I would mention it anyways. How do you feel about that?
Also, I made the nav menu only stay open when someone clicks on a chapter heading (chapters 1-10 and outlook). Clicking any other link will load the next page with the nav menu closed. Does that sound good as well?
Gif
@KianBadie This looks perfect! I think all the behavior is just right. Thanks!
@coiko Awesome! I just merged it into the testing site, so you should be able to see the changes soon.
@KianBadie It's there and it looks fantastic! Thank you so much!