Drop Menu in Vanilla - Post ID 283381

User 122279 Photo


Senior Advisor
14,447 posts
Online Now

So, here is the test file.

And uploaded: www.horgenhonning.net/test
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,533 posts

The test file looks good to me. Well done!

As to the handheld media query, I don't know the answer, but I suspect it wouldn't help: from Googling around I find comments like -
"neither iPhone or Android browsers supports CSS @media handheld";
"@media handheld refers only to those ancient tiny proto-html cellphones from years past which couldn't even really display web pages"

Frank
User 379556 Photo


Registered User
1,533 posts

I've been messing about with onclick toggling in Vanilla, and it seems to me that a Vanilla drop menu can be created simply by having the following in a menu container (flex, row, wrap, justify center) -

Button holders, button-size width & height, & onclick attribute*, containing
1. Main menu button.
2. Inner container, display none, containing -
(a) Mask, position fixed, top 0, left 0, width 100vw, height 100vh.
(b) Sub buttons, display block, position relative, z-index 1.

I have put a sample RSD file here, and an export of it here, just to demonstrate the ultra simple principles above.

Frank
*
var x = this.children[1]; x.style.display = (x.style.display !== "block") ? "block" : "none";
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

As soon as I get some time I will check this out and see how it differs from the one you made earlier, the one I also messed with.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,533 posts

The menu looks similar to my first (overflow hidden) one, as I used the same buttons etc. The mechanics and effect are entirely different in that -
1. it is a click menu, not a hover menu;
2. clicking the top buttons toggles the display of the drop-down;
3. the toggle off works whether one clicks on the top button or anywhere else on the screen.

Item 3 above works by the 'mask' container: clicking anywhere on it triggers the onclick attribute of the button holder. The principle can be tested by
(a) putting a small link container (with a suitable href) on a blank page;
(b) putting a normal container inside it, but moving it (e.g. by margins or fixed position) to appear elsewhere on the page.
It will be found that clicking the container at (b) triggers the href of (a). This was probably obvious to others, but it wasn't to me, and it seemed to be an a useful technique for a click-menu. Hrefs of the sub-buttons failed to trigger if I used 'outoffocus'.

Frank

PS. If there are other z-indexed items on the screen, it may be best to give the 'mask' a high z-index, and the sub-buttons yet one z-index higher. It is the z-index that excepts the sub buttons from the 'mask'. FC

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.