you
welcome everybody today I'm going to
teach you how to create a mobile menu
similar to the ones shown in these three
examples so the first one shop skin when
you click on the menu menu comes in from
the left little middle one the main new
fades in and for the last example the
menu comes in on the top this is what
we're going to create today in action so
fire up your Axure let's get started to
open up a new document drag in a box and
define the sizes under style 375 by 667
duplicate this container by pressing alt
drag so first we're going to create our
landing page bring in a heading create a
logo a little bit of a description and
CTA to scroll down bring in a line just
an aesthetic let's zoom in by pressing
ctrl+ and there we have our landing page
we also need a menu icon
so I'll use my font awesome library but
you can also use icons find the menu
icon and drag it across I'll also need a
close icon and drag that across to the
second screen make sure both are lined
in the same position
the boss second screen we're going to
create a quick menu with the home page
about us services in contact
I'll just make sure these are not bold
and then we have it so both our landing
page and our mainly so what you want to
do firstly as the selection menu right
click and convert it to a dynamic panel
let's name this panel mobile menu they
want to select the menu so under the
properties tab double click on on click
we're gonna show our mobile menu by
making sure it fades in and press ok I'm
gonna do the same for the eggs but we'll
have to double click on the dynamic
panel select the first date select your
icon say unclick we want to hide the
mobile menu so make sure under
visibility it's hide it select fade say
ok double click on home to take you back
to my original page now select your demo
panel and set it to hidden then drag it
across over our landing page the last
thing that we'll do is to make sure that
our mobile menu is actually on top so we
would write like an under order we'll
bring it to front
you
now we can preview this once it loads in
you click on menu and our menu comes in
click on close and we end up on the
landing page so how do we define how the
menu comes in so let's go back to action
and on this menu panel double click
select refers state for now I'm just
gonna make sure this is a dark darker
shade for a background and I'd like to
shade for our font to define where the
menu comes in from would select the menu
and the properties you would double
click in your case for the on click
interaction and where we have animate
you can define whether you want the pen
to come in from the slide I mean from
the right left from the top or below so
if it was coming in from the top would
say slide down okay and let's preview
that
they we have it and if I had defined
that the animation is sliding in from
left I would say slide right and apply
it then let's run preview to this and
that is how you prototype a hidden menu
for mobile design
