Mobile Menu

[randyt21702479]

Hello ...

I am trying to create a mobile menu ... Problem with the accordion is that the entire header is a trigger and I don't have a lot of customizing options. I would like to create a menu for mobile that acts like the accordion but that I can customize the trigger, i.e., size, fill and even use animated hamburger widgets with.

Look forward to your reply.

Thanks,

Molly

[Günter Heißenbüttel]

Perhaps a simple standard menu widget would be enough. Here you find an example including a downloadable .muse sample file: http://menu-tap.businesscatalyst.com/index.html

This is highly customisable – including image backgrounds with scroll effects.

[randyt21702479]

Hi Gunter,

Thanks for your reply ... I could use a simple menu(manual) in combination with a blank composition. That would allow me to use an animated hamburger icon with the menu. I still have to solve the problem of getting the accordion effect without using the accordion as the trigger.

Molly 

[Günter Heißenbüttel]

Concerning accordion: What customisation exactly do you lack?

The only thing, I am aware of is the width of the trigger. You might hide parts of this area by placing rectangles on top.

[randyt21702479]

The width of the trigger is the problem ... I want the trigger to be my 50 x 50 animated hamburger icon only, not the entire header.

[randyt21702479]

What do you mean hide parts of this area by placing rectangles on top?

[Günter Heißenbüttel · Accepted solution]

A trigger only works as a trigger, as long there is no element before it. So you can make (parts of) a trigger "inactive" by placing another element in front of it.

[nolder3193]

Correct!  I had this same idea and it works beautifully.  Only drawback is that if you are using a fluid width site, the rectangle (like all other elements in Muse) resize in such a way that the 50 x 50 "trigger" (or what's left of it after placing a rectangle on top) will only be 50 x 50 on the breakpoint at which you set it.  As you resize the browser the once 50 x 50 uncovered area will expand and shrink because the rectangle can't maintain a set padding from any element or browser edge for that matter.  Maybe there is a way but at the moment I don't know how to do that.

[randyt21702479]

I am working with a fixed width site and pages ... I designed for desktop, mobile and working on tablet instead of fluid width with breakpoints. Good to know though.

Thanks for your reply!

[randyt21702479]

Are you saying that I could place a rectangle for example and set the stroke to none before the trigger and this would make parts of the element inactive? Would really like to not have the screen blink and for the entire area to not be the trigger ...