Auto-hide menu-bar

[EstherMoellman]

Hi @TinyRaindrop ,

I found your menubar_visible_on_hover.css code at Reddit (here is the one year old post, and I wonder if you (please) can help me. I’m trying to build the following auto-hide menu-bar:

• Menu-bar appears only when a specific area is mouse-hovered (at nav-bar, after window controls on left, and before nav-buttons on left of url-bar).
• Working with both window control versions (on left and right side of nav-bar).
• Working with tabs on bottom (tab-bar under nav-bar).
• Title-bar off.
• Bookmarks toolbar appears on the left, when menu-bar is shown.

Here is my logic: Menu-bar is enabled by default, but hidden. Menu-bar bottom area is enlarged (until tab-bar), but is disguised because it has same background-color than nav-bar (it ends blended with nav-bar – no elements in this area of the nav-bar). So menu-bar is shown when this invisible bottom area is mouse-hovered.

Here is my script. This is not my complete layout, it covers only the auto-hide menu-bar, so this attached script visually will appear ugly and incomplete. But this script alone is enough to describe and present my auto-hide menu-bar concept.

Please, my requests:

1. In my script, when menu-bar is shown (on mouse-hovering), and a menubar-item is clicked, and a menubar-item-popup is opened, the menu-bar is hidden, and the popup “jumps” following the hidden menu-bar position. The desirable behavior will be: When menu-bar is shown (on mouse-hovering), and a menubar-item is clicked, and a menubar-item-popup is opened, the menu-bar always is shown, and the popup stays in same position until the mouse leaves the popup. At line 26 of my script I found the problem (here is the culprit). And I know that if I change “#toolbar-menubar:hover > #menubar-items” with “#toolbar-menubar:hover > #menubar”, the situation improves. But I still wasn't capable to have a full fix. Your help will be appreciated!

2. For window controls on left/right (of nav-bar) I was forced to build two very different versions of my script. I wonder if it is possible to have just one version of my script, working for both left/right window controls. Or at least, it’ll be great to have one version of my auto-hide menu-bar, and two small additions for window controls on left/right.

My css knowledge is basic. So, if you find a simpler way to do what I want, and you want to forget my script, and you prefer to build a new brand script from the scratch... please, do it! I'm not emotionally attached to my script. I'm aware of my css limitations. So in this case, your new script will be more than welcome!

Thank you in advance! : )