Menu Buttons and Sliders, an implementation.

Discussion created by rialto on Mar 14, 2014

Hey guys, I 've been playing with sliders the past couple of months or so, as I am sure most of you here will be, and in particular button menus for the. There's no inherent menu system for sliders, that is filemaker premade so to speak, as there are in tabs. This poses some problems, but some opportunities too.


There are a few considerations when creating a top buttons menu to navigate a slider panel, in my mind:


1. Make the Current Button/Panel active, that is noticeable in the UI:


This can be achieved by putting the buttons within the slider panel, each slider panel, then aligning them across panels and highlighting the appropriate button for each one. This is something of a hassle, but it works great and is very intuitive in terms of ui. One downside is that when you slide across the panels the menus slide too, which I dislike (on panel slide trigger might come handy here to hide it some way, but I haven't figured it out yet).


Another option is to have the buttons outside the panel and only include a horizontal line, or some such design element (or a dot like they do in some versions of os x) on each panel, under the button, to highlight it as being active. This works great too, and is also a very current design.


2. Have the menus optimally appearing well adjusted across devices and platforms:


This was trickier to do. There's the onlayoutchange script trigger of course, but somehow I am not happy to keep switching between layouts to achieve what I can do without. I started out with an ipad template which by and large adjusts really well to layout changes. But for menu buttons it's less straightfoward. My approach has been to keep a set of buttons, a few layers of buttons actually one on top of the other, each is hidden based on device and/or user's computer resolution. It works perfectly and there's an element of great satisfaction to use one layer that adjusts to various devices. Here's a few pointers if you want to implement it:


- Start with an ipad interface, and keep that width as the layout interface. Tie the right items to the left and right and have them extend accordingly. Separating views in two, as in a tab interface, and a column of fields, say, can help.

- The menus that don't fit the ipad's portrait width will extend beyond the layout and into the grey area. To do that you initially extend the slider and the layout to accomodate any size of horizontal menu length.

- Then you group the buttons so you can universally apply the hide if option

- Include a simple get(systemplatform) and/or get user priviledges to show or hide menus.

- Do that across panels of course, and then rever the layout and slider size to ipad width. The menus function as grouped items so they stay put. One last thing tie the beginning of the menu to the left and leave the right free. That's how it works best.


That's all for now, looking forward to hear how others have gone about this.