How to indicate a drop-down menu?

Just bought Sparkle and learning fast, but there seems to be one thing missing, or I just can’t find it: when I make drop-down menu’s, how can I indicate that it’s actually a drop-down menu?

In general it will be a little arrow pointing downwards.
Is there a way to do this in Sparkle? Am I just missing something?

There’s nothing built in, arguably there should be. What you can do is insert a special character via the special character picker.

Thanks for the fast reply.

Are you talking about the character picker of macOS, or is there a special character picker within Sparkle? (if there is, I missed that as well… :wink: ).

Yeah the macOS one, Emoji&Symbols from the Edit menu.

Or alternatively a unicode character, a couple mentioned here: https://stackoverflow.com/a/2701226/75656

For example ▼ or ▾ (and that’s just unicode text like an emoji or a letter with diacritics, you can copy/paste it into Sparkle).

Finally did it with the character picker of macOS, quite happy with the result. :grinning:

05

Hmm, turns out I was a bit too happy too soon… :neutral_face:

Adding characters like this makes the cell of that menu-item higher than the others, so the alignment is off. I’m including a screenshot again. Would there be a way to avoid this?

05

Another possibilty is to have a background-image and position it on the left or right of your text (just be aware the text doesn’t float over that). Sorry my Sparkle is in german, but i hope you find it (s. screenshot).

I’ve had this happen. Oftentimes, the pasted special character ends up being in a different font than the text. Make sure it’s the same font, and hopefully this resolves the height difference.

@ grafikvater: no problem about the German of your version, I’m Dutch and my German isn’t too bad… :wink:

But I’m hoping you can give me more pointers, because I’ve tried to add this as a background image, and so far no dice… :neutral_face:

@ habboud: I’m using Helvetica on my site, as far as I know there aren’t any special characters in that font. Tried it with some other (like Webbings), but no success so far…

My menu on http://wesen-tli.ch/Entwicklung-20112019/ has a height of 50 px. So i draw an icon on a canvas with size 50x50 px and put it on the left (like in the screenshot before). That’s all.

31

Since it’s an SVG, 50 px are ok in my case. If you have only JPG or PNG and it should work for Retina, then you need 3x the size of your menu-height for the canvas.

1 Like

This might be the solution to a bug we’ve been looking for for a long time :slight_smile:

@ grafikvater: great solution, will be using this (and a beautiful site as well…!).

(and I think you should ask for a discount for your next upgrade… :wink:).

@ REBB: thank you, glad i could help. I forgot to mention, that i split the menu, so my solution could have effect on all same-level menu backgrounds if not split, i don’t know exactly anymore. And an additional disadvantage is, that no other backgrounds then can be applied.

for the discount :wink: , it should be quite the opposite: Sparkle brought back life to my starving website branch after messing up with wordpress and other software, i’m totally happy to have that great and mighty tool to design websites, and some new customers are too. So i’d even pay more for Sparkle (but don’t tell Duncan) :wink:

1 Like