Creating Menus with Easy Button & Menu Maker

Blumentals Easy Button & Menu maker is one of the best programs I have found for creating responsive menus quickly. I demonstrate the process of creating a menu and how to use the css and js files created by the program.

---

Closed Caption:

but when I was actually redesigning my
site I realized that to redesign and
redo the menus was going to take for me
probably about a day day and a half and
I had discovered a program for creating
menus the program that I found and that
I use is Bloom and talls Easy Button
menu maker this is one of the programs
that I really think is worth buying I
was able to completely redesign my menus
and get them on my website and they were
totally functional in 10 around 10
minutes so there's two versions of it
here there's the uh pro version which I
would suggest that you actually buy if
you decide to buy this it has a few more
features and things in it there's also
the personal Edition for $29.95 you can
download a trial version I think it's 14
days and and work with it uh it's
actually an amazing program so what I'm
going to do is I'm going to do a run
through of actually creating a menu and
putting it on your website my previous
videos a lot of people started asking
questions about WordPress and things
like that if you're using
Wordpress this may not be for you if
you've got an HTML site that you've
designed and built yourself or you have
access to an HTML site that you manage
and uh you need to redo menus and things
like this this might be a really good
option for you
so the first thing that you're going to
do is you can download the program or
buy it and install it and when you open
it up the default is to come up on the
new uh menu here and they have a ton of
templates in here that you can select
from and these templates have design
elements that are preset so you can
actually select one of these and start
working on it build your menu and not
customize anything at all
and it's going to be usable in just a
matter of minutes uh in each of these
menus however there is the ability to
customize these uh you can select colors
you can change the looks you can round
corners on the buttons you can do all
sorts of things a lot of the menus are
pure CSS and this is the uh for the
responsive design not relying on uh uh a
lot of JavaScript and things like that
so the ones that are marked
CSS you're not really going to need to
worry about the JavaScript and I'll talk
about the JavaScript in just a minute
because they actually do generate that
for you when you create the
menus some of their menus are
image-based uh and this uses com a
combination of images for the buttons as
well as CSS and JavaScript uh the
program will generate all that for you
the only difference is uh the image
based you actually may have to make sure
that you copy the images of the of the
buttons up to your website so I believe
that's the difference there so I'm just
going to select this but this is just a
stock basic menu here home product
support and you can actually take a look
at what they've already got here they've
added a drop down menu here uh you can
customize every one of these uh usually
the home button you know you're probably
going to leave that the same when you
click on that you get the option over
here of changing the text uh you can
change uh the colors backgrounds you can
change the borders you can change the
spacing uh you can round the
corners uh round the top corners only
you can do whatever you want and
um and you can change the width and
we'll we'll walk through a little bit of
that here in just a second if you want
to add a top level menu item if if
you're clicked into the top level menu
all you have to do is say add an
item and it's just going to add it and
the default name's going to be button
and I'm just going to change that and
call that info for right now soon as you
type it in it's there now you notice
that the size is a little bit different
you can either drag it out but what I
like to do is go to one of the other
buttons this gives you the width the
width on this one's 95 that's 16 that's
82 if you wanted to change the width and
make them all uniform you can do it here
I'm going to go here and I'm just going
to turn off auto size and change this to
95 to match the other one so uh if you
wanted to come here and you want to add
a submenu you'd come up here to the uh
add
submenu and come up with an item there
you can just call that item one if you
wanted to add more items you would just
click the add item
button and you could add as many as you
wanted so it's fairly easy and then you
can just rename them real quick the only
other thing you would need to do on each
of these items is you would have to
actually come in to where it says link
and you would actually write in the URL
or the path to your web page that that's
actually linking to the hint would be
something that you would type in and if
somebody Mouse is over it they're going
to get a kind of a tool tip that comes
up there so if I Mouse over that you see
the the word note comes up so that's
what that is that's for a tool tip so
Target this is an interesting feature
here on my website I've got a couple of
uh pages that index articles and things
and I have those set to actually open in
a blank uh or actually open in a new tab
in the browser so so you can select that
and put that here if you want to as well
style you can come in here you can
change uh the size of the letters you
can change the font you can change the
colors backgrounds all that kind of
stuff you can do anything you want uh
with this uh the corners again you can
round the corners and you can change the
radius on the rounded corners and things
of that nature so those options are all
there so this is the basic uh some of
the basic changes that you can make if I
was to Port that out to the code right
now and put it in a website it is going
to
Simply
occupy uh this area this amount of space
on the page and what I can do is I can
tell it that I actually want this menu
to span the full width of the web
page and now it's already filled in my
my background color there uh one of the
things you might run into is if you're
using a template that has it might have
colors in the buttons but the actual
background color might be white and if
you say full width it might actually
fill in or have either white or no color
here so if that happens then you just
want to make sure you're at the top
level and you want to make sure you come
over to your background and that you
actually select a background color as
you can see I've added buttons and I've
done all kinds of things it didn't take
that long you're probably going to spend
more time putting in the links and that
might be a good thing to if you're
designing your site or if you've already
got an established site you might want
to create another text document and just
write your target URLs out and then you
can just paste them in here okay so
right now this menu if I had links in
here for these items this menu would
actually be functional right now so the
process now of getting this into your
web page is fairly simple now you do
have an option of coming up here to the
publish section and actually inserting
that into a web page I've worked with
that and the thing about that is a few
times that I've done that it's it'll
insert it into the
page but not where I want it but I
usually tell it to save the menu as HTML
so I'm just going to hit
that and you can uh change the folder
where it's going to I'm just to leave
this there for right now that's the
folder where it's going to I'm going to
just leave everything here as the
default it's going to create a directory
called index files and it's going to put
things in that and I'm going to show you
one little uh wrinkle with that so so
I'm just going to hit
next uh this
basically uh is a reminder that it's
going to create all of the files that
are required but you're going to have to
pay attention to making sure that you
get the the required files all uploaded
to your website and then it gives the
option here of uh actually saving the
menu for you and I highly suggest that
you do this because I have forgotten to
save my menu a couple times closed it
and lost some changes so I just leave
all that set and then the preview button
here is kind of nice to leave that up
whatever your default browser is it's
going to bring that up so I just hit
finish
here and make a note of this
this is B that's the extension that it
puts to
this remember that and remember where
it's going because if you want to modify
this later on you're going to need to
open that file so just remember where
it's going so here's the folder where
I'm going to it's going to create the
index files folder and then it's going
to make the main file that we're going
to work with so I'm going to hit
save all right so now the menu is
created it's generated the CSS there's
some JavaScript out there so now we need
to go out and actually take a look at
that and get it into the uh web page or
into the into the HTML page okay so one
thing I need to mention here and this is
one of the little wrinkles it creates an
index files
folder and this is where all of your uh
CSS and your image files are so it's
going to put them all in here your
JavaScript file is here as well but what
you're not going to see in this folder
is the
actual uh HTML file and whatever the
parent folder is to this index files
folder is where that's going to appear
so here's the index.htm file that's been
created and I'm going to open that in
notepad++ that's what I'm using as an
editor here and the only thing that's in
this is the code for the menu that we
just created created it has a reference
to the Javascript file and it's going to
reference uh the CSS file for that
so all we have to do now is come in here
and I'm going to copy all of this
including this JavaScript reference down
here and I'll talk about that in just a
second so I've selected all of it I'm
going to go ahead and copy it now I'm
going to go back to my HTML file this is
the file for the website let me go ahead
and close that that's the preview this
is what it's going to look like so this
is the the page that I'm actually
working with so I'm going to go back to
notepad++ and below my banners and
things I'm just going to go ahead and
paste in that code so this is the actual
menu
code and we need to go back to the
folder over
here into the index files folder
and we're going to locate this CSS file
I'm going to open that notepad++ and I'm
just going to
select all of that and then I'm going to
copy it then I'm going to come back over
to the CSS file that I'm actually using
for that HTML file so all I have to do
is just right click that or contrl V and
just hit
paste okay
so I'm not covering minifying this or
anything right now now because what
we're interested in is just seeing how
this but later on when you get your CSS
you're going to Minify all this and then
get it back on your website because
right now this would be fairly
inefficient the way that it's written
out so now I should be able to go out to
the web page itself in the
browser and there's the
menu
so there's my drop- down list and right
now if I had URLs in there if I click on
these these would all be functional and
that really I've taken a little bit of
time here actually walking through it
but you can see that that actually would
not take that much time to do that and
you can do whatever this is a responsive
menu it will resize and space the menu
items to make them responsive so your
TAP targets are going to resize
themselves you're not going to have to
worry about doing that I mentioned
earlier that it generates a JavaScript
file if we go over to the um index files
folder you'll see that it's actually
created a Javascript file and if I edit
that with notepad++ brings it up and
this is actually a
minified Javascript file and what you
can do is you can select that and copy
it and what I have done with my web
pages is I've actually gone to the very
bottom of the page right above the body
tag put open and closing uh script tags
in and insert it there and it runs just
fine and it doesn't create any problems
with the load speed or anything like
that but the time that it takes to
actually do this is fairly minimal and
like I've said this is a really good
program there's a lot of customization
and everything that you can do in here
the Easy Button menu maker definitely is
a program that is worth investing in and
uh I'm just scratching the surface here
on using it but if you wanted something
that can create a menu very quickly and
you want to get it live this would be
the way to go so thanks for watching and
I hope this helps uh give me a like or
let me know what you think and I'll talk
to you later than thanks