How do you create responsive menus (like jquery smart menu plugin) in the Skuid Mobile builder?

Hi Sravanthi,

Doing something like the Smart menus is not possible through the declarative, out of the box functionality of Skuid. However, from looking at their documentation, it should be possible to implement in your Skuid page, with a little bit of Javascript, CSS, and a template field. I have not actually tried this myself, but I think this should work.

1. Add the Smart Menu Zip file as a static resource.

2. Add the appropriate Javascript and CSS resources to your Skuid page.

3. Create a Template with your Smart menu code in it.

4. Add an “Inline” (Not Inline Snippet) Javascript resource with something like this in it.

skuid.$(function() {

skuid.$('#main-menu').smartmenus(); });

Just make sure the id for the

• tag matches the one you use in your jQuery selector. Again, I have not tried this, but in theory, it should work.

Hi Ben,

Thank you for the reply. I did try that-  first thing, I was not able to include js/ css as a static resource in Skuid Mobile builder either from the .zip static resource or the individual file static resources. The html for the static resource always rendered src empty. Anyway I copied the smart menu .js and .css contents as inline resources and I called the smartmenus function. It did not work, the menus did render but they don’t go vertical all at the same time as they are supposed to, on a smaller view, instead, they adjust to different lines as divisions would do.
Any idea?

-Sravanthi.

Update:  The smart menu plugin did work, other than calling the smartmenu function, I had to also change css according to the viewport size, for it to work.

-Sravanthi.

Glad you got that worked out Sravanthi, Did you ever get the resources loading from the zip file worked out?  Or are you still putting the code inline?