Hamburger Menu for mobile

[SueB]

Hey there again. I'd like to make a mobile menu with the hamburger to pop open to the links either far left or in the middle, and then something to close it. If it's not too hard, might even do it for the computer size.

Can anyone give me the details on how to do this? I know how to make the graphic hamburger..lol

Sue

[Initiostar]

Sue, there are a quite a few options here, but this is a simple demo: https://initiostar.co.uk/demo/simpleHeader/ and here is the XAR: Simple Navbar.xar

One option is to add a mobile menu layer as a popup and to link your 'hamburger' icon to it. In the example these are just text links on the mobile menu layer, but open up the XAR and it will give you an idea. In the example, you will see it uses scale-to-fit-width and transitions from a desktop, through tablet to mobile.

There are countless tweaks, mods and ideas for mobile menus; just depends on what you want to achieve.

Gary

[SueB]

Sue, there are a quite a few options here, but this is a simple demo: https://initiostar.co.uk/demo/simpleHeader/ and here is the XAR: Simple Navbar.xar

One option is to add a mobile menu layer as a popup and to link your 'hamburger' icon to it. In the example these are just text links on the mobile menu layer, but open up the XAR and it will give you an idea. In the example, you will see it uses scale-to-fit-width and transitions from a desktop, through tablet to mobile.

There are countless tweaks, mods and ideas for mobile menus; just depends on what you want to achieve.

Gary

Okay, this is a wonderful visual. So I like the "scale-to-fit-width" so that it transitions. I'm not sure I like how it covers over part of the page when it opens. Can it be done that it covers over it all or that it pops the below downward? Or too complicated?

And can you explain the "Menu," the "Menulock" and then the "MouseOver"? I get the stuff that goes into the MouseOff I think.

[Chris M]

I went a very similar method to Gary as you can be as creative as you like with the way it looks and it's my default method.

I didn't go Scale To Fit Width simply because Gary did, and I wanted to show you another alternative.

Click MouseOff in the Page & Layer Gallery then click New Layer (tab)
Name the layer menu(lock). The (lock) is important as it stops the layer being closed automatically and allows you to have something prettier than that ugly 'X' Xara opted for.
Create hamburger button and copy it
Paste in place on menu(lock) layer, edit size, colour, shape, whatever
In the Link To Web Or Email Address (Utilities > Web Properties > Link (tab) type popup:close and softgroup with its partner on the MouseOff layer
I made 3 rectangles and made them Stretch Full Width (Utilities > Web Sticky/Stretchy)
Add the text
Select all on the menu(lock) layer and make Sticky (Utilities > Web Sticky/Stretchy)

Once the mechanics are done, you can do virtually anything on the creative front.

>>> Menu Lock.web <<<

[Initiostar]

Okay, this is a wonderful visual. So I like the "scale-to-fit-width" so that it transitions. I'm not sure I like how it covers over part of the page when it opens. Can it be done that it covers over it all or that it pops the below downward? Or too complicated?

And can you explain the "Menu," the "Menu(lock)" and then the "MouseOver"? I get the stuff that goes into the MouseOff I think.

The background shape on the Menu(lock) layer can be anything you want; just expand it to cover the page width. Chris has explained your second point and both he and I have used the same approach; take your icon of choice and link to the popup Menu(lock) - the layer name is your choice with (lock) on the end. Thereafter, you can design away with whatever style of link you want to use. My example uses the Web Properties MouseOver option. The ONLY value of MouseOver for a link on a touch-device, is depending on your design, it can highlight the current page. I retain it though for consistency through the transition from desktop to mobile.




The big proviso for all this stuff is you need to work out whether you intend to use a one-level menu (per the example), or whether your site requires multiple levels; I'd get this bit sorted with a structure first; mobile submenus is a new ball game!

I would play around with the two examples and get a feel for what you need and want to see.

Gary