Adobe Muse 2016 Tutorial | Responsive Mobile Navigation Menu

hey everyone this week as promised I'm going to show you guys how to create a responsive navigation that goes from being your typical top navigation down to a mobile-friendly hamburger menu navigation and for those of you who are not familiar with a hamburger menu it's called a hamburger menu because this little three line icon looks like a hamburger with the top bun two meat patty and a bottom bun it is that simple that's why they call it a hamburger bun if we click on this hamburger button though on our mobile menu it turns into an X so we can close it it expands we get this nice behavior where it actually pushes everything down so if you were to continue navigating you're not missing anything the menus not even covering anything which is really cool I think it's really cool that Muse is even capable of that and then we have our X and we can click our X to close it and it turns back into the hamburger so it's really smooth and animated and responsive and I'm going to show you guys how to create that right now heading back into Muse here you could see that the problem that we're trying to solve is that at smaller screen sizes our navigation just doesn't fit you can see here how it overlaps the logo it just isn't right and that's not going to work so back to our desktop version here where it does fit we're still going to use these same buttons we're going to recycle these and in recycling these we just need to put them into an expandable container and maybe make the font a little bit bigger to be more mobile-friendly I'm going to be doing all of this on a second page there's a lot of stuff going on here a lot of layers and I don't want to get confused with all my layers and I don't want to be selecting the wrong thing all the time and I recommend doing this too because you can just copy and paste it over when you're ready so I have this extra page that just has the navigation at the top and that way I've just got more of a blank canvas to work with so now to get started this entire widget is based off the built in accordion panel that's built into Muse it's one of the available widgets built into Muse so you want to go over to the widgets library not the library not CC libraries they've made it a bit confusing now with all these library panels you want the one called widgets library which you can access from window widgets library if you don't see it on your screen already so once you're here there is well there are a bunch of folders there's one called panels and inside that there is a choice called accordion and when you drag in the accordion panel the idea is that it's an informational panel that has multiple sections to it we're only going to use one section the section that hides our navigation and reveals our navigation so we're going to click and hit delete to get rid of the other two there we go so now we're down to just one section now the next thing I want to do is click away and click back on it one time do a right-click or a two-finger click if you're on a Mac laptop and we want to choose clear all styling there we go now that we've cleared all styling we're not going to have to undo the border we're not going to have to undo any fills or anything it's now transparent and it's a fresh fresh start the next thing I want to do is another right-click and clear widget contents to get rid of the text box inside and the next thing I want to do is click again on the title and then one more time on the title bar you may have to double click to get in and edit the text but I want to get in there and I want to remove the text so I have a truly hollow shell and then escape will bring us back escape again will bring us back again escape again will bring us back again and now we have a truly empty widget here the next thing I want to do I want to scoot it up here to the top of the screen and I want to click on the top bar section and I want to drag the size of it down so it's the same height as my navigation bar so now I've got more of a fitment working for me in terms of making it fit my existing navigation bar and then I'll click the bottom content area and I'll make that a little bit taller now this can get a little weird with clicking one time clicking two times these accordion widgets composition widgets they're very finicky about how many times you click because you click once to select the entire widget you click again to select a part of the widget you click again to go into that part of that widget so if you make a mistake you can hit escape to go back or you can click away if you just hit escape a few times you'll go back to having the entire widget selected and you can then move that around so don't get too frustrated now another thing to consider is that this is expanded it's hard to tell it has no content in it but this is expanded and if I click at the top it's still expanded so it's not yet behaving like our hamburger menu where it collapses and expands and collapses and expands so to make it behave that way we click on this little blue disclosure triangle and we choose can close all when you choose can close all now clicking collapses it and expands it you can tell by this little plus sign that's going away and coming back to the bottom in order to see this really happening let's give our color fill to our content area down here so I'm going to click on the content area make sure you're in the content area and you have a solid border around the content area down here at the bottom if you don't you may have to click again and then I'm going to go up to fill and personally I'm doing a gradient fill to match my gradient at the top here and I'm going to set my start color to this pink color I'm going to set my end color to this purple color you can do whatever you want you can do a solid fill you could do an image fill anything you want I'm just trying to make it match my navigation bar at the top and now that I've done that when I expand and collapse it you can actually see it happening so we have this new behavior where it can be expanded or it can be collapsed if you double click it'll go inside this as a text box so don't do that unless that's what you want to do so now I've got my empty top section I've got my color filled gradient filled bottom section and I'm ready to start making this have content inside so the first thing I want to do I have a couple of icons here and you guys can use whatever icons you like I'm just using this generic hamburger icon SVG and this generic close icon SVG if you guys love icons you can head to muse resources comm you can get the icon mega pack for yourself it includes a bunch I believe 458 vector icons that are all SVG's that are compatible with muse so that's pretty cool and then you'll have a bunch of stuff like this so I've got this icon here that I need to be inside the top part of the accordion on the right hand side so that it can be clicked and in order to get this to behave responsibly and in order to get this to do exactly what I wanted to do it needs to be the background image for this bar pushed over to the right and scaled to fit so what I'm going to do is with this hamburger icon selected I'm going to hit copy I'm going to do command C for copy you can do command or control C for copy and then I'm going to click on this top half I'm going to make sure I have just the top half selected and you'll notice that up here it says normal when I click again it says active the hamburger the hamburger icon is for the normal state before it's expanded the close icon is for the active state when it's open because we want to close it when it's open we want to open it when it's closed so I just copied the hamburger icon so I want to make sure I'm in the normal state when I right-click and choose paste as background image when you choose paste as background image it may not go where you want it but then we're going to go up to fill and we're going to choose to align it on the right center or right middle and I'm going to switch fitting to scale to fit so that way if I make this bigger or smaller it'll look right it will continue to scale now I'm going to do the same thing again I'm going to click on the X I'm going to hit command C for copy you do command or ctrl C whether you're on a Mac or a PC then I'm going to expand this and with it expanded you'll notice the hamburger is still there so when we expand and collapse it doesn't really make much sense it's not indicating what it's doing here so in the active State with it expanded I'm going to do the same thing again I'm going to do a two-finger click or right click on this top half and I'm going to choose paste as background image again so now it's pasted the X is the background image for the active state and if I go back to the normal state we have the hamburger icons so we've got this switch back and forth taking place the way we want so the next thing I want to do is in the normal state I'm going to click up here and I'm going to add a fade transition and I'm going to make it point 2 seconds I want a really fast fade so that it fades from the hamburger icon to the X icon and I'm going to leave the speed on these really I just want a fade with a duration of 0.2 seconds and I'm going to go over to active and make sure that that applied and it did when you apply a transition to the normal state it automatically applies it to every other state which is pretty cool and if you're not seeing these transition settings hit the triangle next to the word trans or the word transition itself that will reveal those settings for you so then now that we've got all of this set I'd like to preview it in the browser just to make sure that this is working the way we want it to another thing to note before you preview it in the browser is if it's expanded already when you preview it in the browser when you publish your site it will be expanded already if it's collapsed already it will be collapsed already so I would like it to be collapsed already I'm going to hit shift command e to preview in the browser shift control if you're on a PC and now on this page because it's white on white we can't really see it but if you get your cursor in the right spot you'll be able to click on it what I should have done is scooted it up to the top so we could see it so let me go back and do that I'm going to scoot it up onto the navigation bar obviously this isn't what it's going to look like when it's done but I just want to be able to see the the hamburger button instead of it being white on white so when I click on that there we go so it is behaving the way it's supposed to behave it's a little glitchy because I'm doing a screen recording at the same time as I'm showing it to you guys so the computer's having a little trouble with the screen recording with the animation at the same time so now that I've got this established I've got to expand it and get my content inside so I'm going to make this a little bit taller I'm going to go and click on these buttons up here I'm going to hold shift so I can select them all I'm going to hit copy and then I'm going to go into this content area and hit paste and now that I've got these icons in here I just need to kind of line them up so I'm just going to click on visualize swipe get each one of these where it belongs see that single click versus two clicks thing becomes really important here because you can easily make some mistakes and now I'm going to get all four of these selected I'm going to move get it now up a little higher I'm going to get all four of these selected I'm going to go to the alignment panel I'm going to make sure a line is set on content area so it aligns in the center of its respective content area I'm going to choose center and then I'm also going to choose to distribute vertically but you'll notice when I choose distribute vertically it distributes it from the top edge to the bottom edge of the content area so I'm going to hit command Z to undo that when I distribute vertically I'm going to change that to align to selection so it just distributes from the top the top item down to the bottom of the bottom item and now those are lined up and evenly distributed you may need to make your box bigger or smaller at this point I'm going to keep mine right about here and then I'm going to go back in select all these and I'm going to make the font a few points bigger let me just go to actually let's demonstrate this real quick if I go up to 16 you'll notice that the the text gets a little cut off but we have these triangles that allow us to manage just our selection here and with that I can drag and it makes them all wider at the same time that's a relatively new feature used to have to do it one item at a time or you'd have to go and group them together and scale the group so now we have these little I guess it's not a triangle it's a diamond we have these little diamonds to click-and-drag and I can go back and I can align Center align these to my content area again so that's looking good now I actually have my items where they belong on the menu now a few more things to consider is how this is going to behave responsibly and there are a few considerations to make in getting a proper responsive result so I'm going to select all these again two things that I want to do I don't want them to resize I don't want these boxes to resize I want to leave them alone even if the browser gets more narrow I want to make sure that the text doesn't get smushed and end up on two lines these aren't paragraphs these are single blocks of text so I want to leave the resize on none the other thing is I want these to be pinned and positioned relative to the center of the browser I want this to remain centered and then I'm going to click away and click back on the widget itself and do the same thing for the widget itself pin it to the center I want it to remain centered I want its content to remain centered even as the device or the browser gets bigger and smaller that's a very important step otherwise this won't be centered so now I think I'm ready to copy and paste it where it belongs so I'm going to hit command C to copy it I'm going to go over to my welcome page here I'm going to go to the mobile breakpoint and now these are in the way so I'm going to choose each and every one of these and I'm going to right click don't hit delete don't don't just delete them otherwise they'll be gone from everywhere I'm going to do a right-click and I'm going to choose hide in break which is what last week's tutorial was all about so now that I've hidden those in this breakpoint they still show up in the desktop breakpoint and I'll go back to the mobile breakpoint and hit paste to paste in my menu and now that I've got my menu actually that's not it didn't copy and paste my menu that's not good all right I'm going to go back to my other page here click on this command C for copy come over here command V for paste there we go I don't know why it didn't work the first time I probably did something wrong so now we've got a layer ordering issue see how it's going underneath the nav bar now in my case my nav bar may be on a different layer altogether so what I want to do is do a right-click on my widget and I want to choose move to layer and make sure it's on my topmost layer in this case I do have this nav layer so now that it's on the top of that layer it shows up on the very very very tippy top the thing is the battle may not be over for you you may have to then bring it to the front it may be on the right layer but it may be behind something so you may have to do another right click and choose a range and then bring it to the front in my case I can't bring it to the front cuz it's already in the front and that's why my menu may look different from yours but just be sure that it's brought all the way to the front cool so now that it's here the other thing we have to do since we told it to Center itself relative really it's relative to its position remain centered relative to your position we don't want it pushed over to the right we want it to be the full width and that's one of the reasons that we made it a transparent top half instead of filling it with that gradient because we don't want it to interfere with anything the other thing is if your logo is a button or if your logo is a hyperlink here don't put your accordion on top of it otherwise it won't be clickable so you may want to do in my case command with the bracket keys if you do command and the right bracket brings it forward command on the left bracket sends it backward and you may have to send it backwards so that it's behind the logo it's really up to you guys if you have a conflict with the logo the other thing you could do is if I click and drag and select both of these and I end up with just the logo selected I could do shift command and the bracket with just the logo selected which can be tricky in fact I could scoot this / to select the logo and I could do shift command in the right bracket to bring it to the front and then I can grab this and pull it back and that will be on top shift command right bracket is the shortcut for bring to front shift command left bracket is the shortcut for send to back which are two shortcuts that I use a heck of a lot in Adobe muse so now I don't have that that overlapping issue anymore so let me preview this in the browser taking its sweet time here we go so at this breakpoint it should automatically hide that menu there we go and then when I click on it should expand there we go so it's looking good it's looking like we're almost done here I say almost done because some of you may have noticed that on this larger breakpoint the menu shows up because I told I specifically told Muse to hide this on the mobile breakpoint but I didn't specifically tell them use to hide this on the desktop breakpoint so there are two ways to go about this we've already done it the way where you right-click on something and you choose hide and break point what I'm going to do is from here where I want it I'm going to right click on it and I'm going to choose hide in other breakpoints so I have an issue here I've accidentally clicked inside of the widget here we go so sometimes you have to click away and click back on it but we do need to hide this in other breakpoints and for some reason I'm not getting what I expect here with hiding it in other breakpoints and you may have this problem sometimes with widgets as well and it's not a problem that right-click is not the only way to do it we can also go to the layers panel and from the layers panel we can go to the break point that we want to hide it from we can go find it and it is here accordion and we can choose to hide it on the layers panel in this particular break point and when we go back to this break point it doesn't hide it here because the visibility on the layers panel is specific to the break point that you're looking at which is something that we discussed last week so feel free to use the layers panel if the right-click menu isn't doing what you want it to do because trust me it won't always do what you want it to do so it looks like we're done we we pretty much nailed it so it is that easy it uses the accordion widget we're using a background fill for the icon which is kind of a curveball I thought that was kind of a curveball you may use an Viji file as a background fill to get the the best quality but you could also use the PNG you can use whatever you want really and that's all there is to it so hopefully you guys enjoy this tutorial stay tuned please subscribe if you haven't already next week I have something very interesting coming for you guys so be ready for that and subscribe if you haven't already so see you guys soon

Channel: Joseph Angelo Todaro

Views: 150,696

Keywords: adobe, muse, cc, creative cloud, Adobe Photoshop (Software), Adobe Systems (Organization), Adobe Muse, Tutorial, Live, photoshop, adobe photoshop, mac, osx, finder, howto, editing, graphic design, web design, sliding, panels, parallax, scrolling, icons, png, graphics, composition, slideshow, layers, Windows, OS X (Operating System), Mac OS (Operating System), scroll effects, scroll motion, 8.0, new features, top features, navigation, update, Tips And Tricks, 2016, breakpoints, hide, show, hamburger menu, nav

Id: TGQ7Y2dInGQ

Length: 18min 12sec (1092 seconds)

Published: Tue Mar 15 2016