I have a few links in a ‘navigation pane’ that appear well on desktop, and when putting my screen smaller, the navigation pane is getting rendered differently so it suits better on mobile devices.
Doing this, a “menu” button shows so users can click to see the navigation links.
However, this only seems to work on my desktop. Trying this on my smartphone, only the menu button shows, but when clicking them, the links are not appearing.
However I don’t like the way you have implemented the menu as it won’t disappear once opened, You have also made it appear both on hover and onclick! I would just use onclick but you should also allow the menu to be closed as it just sits there blocking your content.
Look at implementing a proper ‘hamburger type’ menu where you can open and close the menu easily and neatly.
Also I wouldn’t use the a element without an href as that may cause some problems with clicking/focus etc. I would use a button element perhaps as you are opening a menu and not navigating somewhere.
Nice to see you’re still around here, as a dinosaur.
I’ve been away from this forums here for years (sometimes I get back for a little question, but I used to be a sticky member years ago)
Yes, I added both the hover and onclick this morning to test, and left it there (until I would have the final solution maybe today)… as no one passes by on that page, it doesn’t do any harm.
I’ve been testing some other kinds of hamburger menu’s, but it doesn’t seem te be working right away. Hmm
But replacing the a element with a button was a good idea. However, the buttons style (background transparency) was different on both devices I tested.
That’s what frustrates me on coding: the compatibility.
Even when I would get it to work, I cannot test it on another device that I don’t own. There are so much devices/OS’s/browsers that can make zillions of combinations together.
So i’ll never know if it will work out the right way.
I always try to work with the W3Schools standards… and a couple of months ago it all worked out fine, on both of my devices. And now that I tested yesterday again, it seemed not to work anymore. That’s the problem with browsers/os’s getting an update, … and then suddenly things that worked fine don’t seem to work anymore.
It’s one of the reasons why I stopped creating websites years ago, I really do get a conehead from these situations.
Finding a solution to close the menu again, doesn’t come up on my priority list yet, as I’m not even getting it shown up in the first place (on all devices).
You can remove all the styling from the button element and style it exactly the same cross browser these days. Don’t rely on any of the defaults just create your own backgrounds, borders, padding, font-size, border-radius.
Here’s an old demo showing anchors and buttons side by side.
Oh, PaulOB, I didn’t mean to be negative about the ‘dinosaur’ thing, I just wanted to tell I’m happy to still see you around here! Maybe I didn’t formulate this the appropriate way … (English is not my mother tongue)
It’s always nice when you come back to a forum after a very very long time and you see nicknames appearing that you still know from that time… a time when the forum still had an old school design. I just can’t find my way in the new forum layout/design.
Anyway, just to say the button trick helped me out! Thanks so much.
The transparent image I used first seemed to appear different, but the code was right. After clearing the cache/cookies of my browser it rendered good.
