Creative Quick Tips

with Justin Seeley
please wait ...
Creative Quick Tips
Video duration: 0s 7h 1m Appropriate for all Updated Nov 09, 2015

Viewers:

Join Justin Seeley, lynda.com staff author and design enthusiast, each week for a new 5-minute, self-contained tutorial that you can use to instantly improve your design workflow. This series covers techniques for print, digital, and web design, addressing the tools that creative professionals like you use most. Learn new ways to leverage layer styles and vector shapes in Adobe Photoshop, work more efficiently with text in Illustrator, and embed videos and even tweets in WordPress posts, and much more. Check back each week for a new installment, and a new design hack.

Subjects:
Design Web
Software:
Illustrator InDesign Photoshop
Author:

Creating a mobile-friendly menu in Muse

- [Voiceover] Hi there. Welcome back to another addition of Creative Quick Tips. My name is Justin Seeley and today we're gonna be working inside of Adobe Muse. And I'm gonna show you how to quickly and easily add mobile navigation to your phone and tablet websites. Once you're on this webpage here you can click on Get this Widget and it will take you to the company's website where you'll be able to add it to your cart, download it and then install it. It's a free widget so it doesn't cost you any money but you will have to go ahead and go through a check-out process but don't worry it's not gonna charge you anything.

Once you have it downloaded and installed let's take a look at how you can actually put it into Muse. Here I am inside of Adobe Muse now and I'm gonna go over to my Master page. This is where you would add this because you want this menu to be persistent across all of your pages. What I'm gonna do now is go over to the Library panel. In the Library panel you'll see MusePen.com has been added. When I get MusePen Mobile Dropdown Widget and drag it into the window it's automatically gonna create this Mobile Menu for me. I'm then going to click and drag it up and put it into the header of my document.

If I click Preview, you can see exactly how this works. I'll click once to open the Menu. Click again to close the Menu. Now you notice when I open it that there are some scrolling issues that happen here. That's because some of the elements inside the widget are not set to 100%. What you're gonna wanna do is go into this and select the individual elements and then just make sure that they're either a little bit smaller or stretched out to 100% width. That way you avoid those scrolling issues that you just saw. You might also wanna change the color of the widget as well because as you can see it comes in bright purple.

It's very easy to change this just like it is any other widget that you've seen before. You click until you get to the object you wanna change, look up here in the Options bar, and change the color something kind of like that. So let's change it to something like grey which is a little bit more pleasing to the eyes in this particular case. You can also change the different States up here by dropping down the States menu and you can make changes that way. Once you're finished making changes hit preview again and you can see the Menu just like so. And again, if you wanna eliminate those scroll bars just go back through and make sure all of the elements are set to 100% instead of an actual pixel value.

So there you go. If you've ever designed a tablet or mobile based website and you've had trouble creating navigation this is a great way to quickly and easily add all of your top level pages into a mobile friendly menu setup.

please wait ...