Creating a Side Slide Menu with the Muse Motion Widget | Adobe Muse CC | Muse For You

news for you awesome websites without code [Music] hey what's up muses John with me is for you here to help you build awesome websites without code and a few weeks ago and one of my weekly updates I showcased this website here with the side slide menu so here I have the open button here in the upper left and if I click we have this nice side slide menu so this was created with the muse motion widget and this menu here is an Adobe muse menu and you can basically add anything you'd like to the side slide menu right within Adobe muse and with the muse motion widget you can have it slide from left to right when you click the Open button so in this video tutorial I'm going to showcase how to create this side slide menu with the muse motion widget and we also use the responsive browser height widget to to make the this panel here a hundred percent height so as I scroll down we see the menu stays fixed and full height within the browser I also use the scroll show widget here to reveal these images and I might showcase that in this tutorial or I'll do another video tutorial on the scroll show widget on revealing images like this as well so we're going to be using the muse motion widget and the responsive browser height widget and both those widgets can be found at muse for you shop comm and here you can click subscribe and here you can click subscribe now to get access to all widgets and templates I come out with 439 a year here we have the muse motion widget so you can preview check out the different features and this video is going to be part of the GS AP and Adobe muse series because we are using the muse motion widget which is powered by GS AP from green sock which is the green sock animation platform it's a really powerful animation platform so it's it's really great that it can be used within muse with the muse motion widget so we're also using the responsive browser height widget which is down here right here we're using the responsive browser hey widget and with both these widgets you can click Add to Cart to purchase individually or again you can click subscribe to get access to all widgets and templates I come out with 439 a year we're also going to be going to be using the image cursor widget to add a nice pointer cursor to the open button which is also in the widget in the shop here as well so I've set up the this site here we're just going to follow these instructions you know I have one through 15 we're just gonna follow it step by step to create the side slide menu and we're actually going to use a state button as well and the state button is built right into Adobe muse so I'll go ahead and get started so step one is add a state button so to do that we're going to go to object right up here and we're going to go to insert widget and we're going to go to button and I'm going to click on state button okay and I'm just gonna place it right here and when you first add a state button we have the state button and we have this text frame within the state button we don't need this text frame so I'll go ahead and just click in it or click in the text frame and just select delete so now we have this empty state button and one thing you'll notice when you first add the state button is that you have these rounded corners all around the the state button so I just want it to be a perfect or just angled and not kind of cornered there so I'll select the state button and then right up here we have the corner radius option in the upper control bar and you can click on each corner to remove the corner radius so now it's just a rectangle with no with no corner radius alright so there we have a state button so that was step two actually we moved corner radius and States from state button so yeah we also want to remove the states so if I go ahead and preview in the browser at the moment if I go to file preview page in browser and I hover over the state button we can see it turns black and that's because it has a different rollover state and it has a different active state as well so here I'll click on the state button and right up here in the upper left within Adobe news we have the state's panel so here if I click on the normal state we see we have normal rollover Mouse down and active so here we can see rollover is black it actually shows us the color right here within the state's panel and if I click on it we can see that the state panel turns black one thing I can do here I can either change the color to the same as the normal color or I can just click on this trashcan symbol to delete the state and reset it to the default state which would be the normal state all right so I'll go ahead and click the trashcan symbol and just like that all the states are the same as the normal state perfect and the same if they had a different state for active or mousedown you can just click on the trashcan symbol and it would delete the state so the reason I want to do that is because I don't want to rollover state I don't want the the color of the menu to change when I hover over it once it's opened okay so that was step two step three is set the width of the state button and place it at the side and top of the page so for my menu the this is what's going to slide out from the left to the right so I want it to be a certain width so I'll select the state button and you can either set the width manually by dragging out from the right or I can click on it and go to the width option here in the upper control bar and set the width in here so I'm going to set it to 200 pixels in width you can make sure that it's not constrained by making sure that these are not locked here it's linked and meaning that if you change the width the height will changed as well but if it's not locked then the width and the height will change independently all right so there we go we have the state button at 200 pixels in width and we're going to place it at the side of the site so that it's flush with the side of the website we want it off the page because it's not going to be visible but when we click the Open button it's going to slide from this from the left into the page here so we want to at the side and the top of the page so I'll bring it all the way at the top and to the side and I'll just add some height here we're going to change the height with the responsive browser hit widget but just so we can see it a bit better I've added some height to this to the state button okay so the next one is number four create an open button so I'll go ahead in muse and I'll just create a erect a rectangle for the open button the open button can be anything it can be an image you can fill the rectangle with an image it can be text so anything you'd like for now I'm just going to create a simple square for the open button and just select this color for the square all right so then we have the open button and let's see the next step set responsive option of open button and stay button to none so I'm gonna place the open button right up here in the upper left hand corner and we're gonna click on the open button and the resize option I'm gonna click the drop down in the upper control bar and say none because I don't want the the open button or the state button to to resize as the browser width changes I'm 200 pixels is great for mobile as well the state button is 200 pixels in width and that'll be fine for mobile as well they'll click the Open button and they'll be able to see the the menu on the mobile device because most mobile devices are less than 200 pixels and width okay so there we set it to none and if I select the state button I want to do the same we can see that the resize option is set to responsive width I'm going to say none as well for the state button all right so that was step 5 step 6 is pin the open button and the state button with the pinning option in the upper control bar in Adobe muse so I want these elements to stay fixed in the browser as the browser as the website Scrolls so with the open button I'll select it and I'll go to the pinning option option here in the upper control bar and just select the pin and the upper left okay and then I'll do the same for the state button select the state button and pin it to the upper left perfect all right looks good so that was step 6 and step 7 we're gonna add the muse motion with one motion so here I'll go to the library panel here to the right and if you don't see the library panel you can go to window and click on library all right so I'll just open the library panel and here I'll type in right in here I'll type in motion and then I'll scroll down and here we have the muse motion widget it's Muse motion widget 1.4 with one motion so here I'll just click hold and drag place into Adobe muse and perfect so there we have the widget alright so the next step step number eight is set motion start to on click with reverse so here I'll open the reason ocean widget by clicking on this little this blue circle with the arrow so I'll click there and we want to set the motion start so if you look at the widget options it says select motion start so here I'll click the drop down and I'll click on on click with reverse so basically what this does so here we have onload on hover on hover with reverse on click I'll click with reverse and on scroll so on click with reverse what it does is that it'll trigger the motion forward when you click and then when you click again it'll trigger the motion in Reverse so we'll have that effect of the of the state button going from left to right and then when you click again it'll go from right to left to close the state button all right so we have on click with reverse perfect and then the next setting is set the motion or the next step is set the motion settings within the widget so here I'll open up motion 1 oh yeah we have it right here motion 1 and we want to make sure that motion 1 is enabled and then here for the animation start we want it to go from its current position to the position we set here within the widget the transform property we're going to say translate X so it moves on the x-axis and the value we're going to set the value that to the same size as the width of the state button because that's what's going to move from left to right so we're going to set it to 200 because the the width of the state button is 200 pixels and then for the unit of measurement I'm going to say pixels all right so it's going to move 200 pixels on the x-axis we can leave the transform origin X&Y at 50 and 50 the duration I'm going to make it a bit quicker so I'm going to say one second so that motion will last one second the delay we don't need a delay or repeat or a repeat delay and here we can set the easing options so I'm gonna leave the easing options just as they are now we're going to play with this a bit later to add some different easing and different animations for the menu you can also say ease none ease in ease an out and ease out so we'll play a bit with this after we've gotten the menu to open and we'll just you know add a few different easing options there to really customize the menu all right so that's it for step 9 which is set the motion settings within the widget so here we have motion one and we've set all them all the settings translate X at 200 pixels so ya - and pixels if you had the menu on the right side you don't turn negative 200 so it goes from right to left and yeah I'll talk a bit more about adding it on the right in a second but yeah so we have all the settings there so step 10 is applied graphic style names from the muse motion widget to the Open button and state button so before we do that I'm gonna open the muse motion widget and if we notice in the muse motion widget we have graphic style name and we have trigger graphic style name so the graphic style name is motion one and this is what we want we want to apply to the state button and the trigger graphic style name is also motion one we want to change this because I don't want the state button to trigger itself I want the Open button to trigger the state button so we're gonna apply motion one to the state button and we're gonna change the trigger graphic style name to trigger 1 and we're going to assign this graphic style name to the open button alright so we have the trigger graphic style name and the motion graphic style name alright so now I'll open the graphic Styles panel it's here on the right and if you don't see the graphic Styles panel you can go to window and click on graphic styles right there alright so I'll go ahead and open or first I'll select the open button because we're gonna apply the trigger 1 graphic style name to the open button then I'll go to the graphic Styles panel and right down here we have this icon that looks like a piece of paper with the folded corner and the bottom left and this will create a new graphic style for the element so here I'll click that Icahn then we have a new graphic style called style within the graphic Styles panel I'll double click to open yet the the graphic Styles panel dialog box and here I'll rename it to trigger one because that's the trigger graphic style name within the music motion widget so when I click on this element I wanted to trigger the state button so we're going to assign the motion one graphic style name to the state button so here I'll select the state button and I'll create another graphic style name by clicking on this icon here and I'll double click on style and here we have the graphic style dialog box and I'll type in motion one okay and then I'll click OK so now the Open button has the graphic style name trigger 1 and the state button has the graphic style name motion 1 and they're right here within the graphic Styles panel alright so now let me go ahead and preview and see how it looks so I'll go to file preview page and browser and if I click and just like that we have that nice side slide menu looks good alright so the next step is to step number 11 is add responsive browser hit widget and apply to state button so here I'll go back to the library panel here to the right and I'll type in responsive browser height ok and here we have the responsive browser hit widget so I'll just click hold and drag and place into Adobe muse alright so here we have the graphic style name and the height within the browser so we know that the state button has the graphic style name emotion once so all we have to do here is change the graphic style name to motion 1 and just like that we've applied 100% height to the state button so I'll go ahead and preview file preview page in browser and I'll open and just like that we have that full height sized slide menu I can scroll and because we have it pinned in the upper left and the open button is pinned as well it opens the state button and they're perfect alright so let's move on to the next step which is step number 12 which is add a menu from they'll be amused to the state button and the element can be added to the state button so I'll go ahead and add a menu so I'll go to object right up here I'll go to insert widget then menu and then I'll add a vertical menu okay and I'll just place it here and then for the menu widget options for the menu type I'll select manual so it doesn't inherit any of the top-level pages or child pages from the plan of the website and we can manually add menu items all right so I'll just do something like this I can go ahead and place it within the state button you'll notice that it's going to be placed within the State button when the outline of the state book becomes a thicker or a darker blue or yet just kind of a more solid blue around it and it's saying hey this this element or this menu is going to be placed within the state button all right so I'll just place it in here and then I'll just add a few menu items and here for the menu okay so I'll just make it a bit wider there and let's go ahead and preview and I'll open and we can see we have the menu within the state button looks good all right so I'm gonna add a logo here so it looks similar to that first menu I showed at the beginning so here I'll go to my finder and I have this illustrator file here this is a a logo and kind of a design that I downloaded from pixel Buddha net I'll leave a link in the description area below to these different logos and designs at pixel Buddha dotnet so here I'm just going to copy this lemon here and I could add some text that says lemon kind of you know recreate this here within Muse and add that text within Muse so here I'll just copy this lemon icon and or logo and then just hit command V to paste and paste it right in muse alright so there we have it and I can place it within the state button and just really kind of customize my menu by adding different elements and things like that so let's move on to their team which is style the state button and menu because we can see we have this grey color here for the background of the menu I don't want that grey color for the for the state button here I'll click on the state button I'll go to the fill option and I'll change the color to this yellow color here alright perfect so now we have that color for the menu so it's just that simple you can change the colors within the fill option you can even add an image to the background of the state button yeah so everything's really customizable right in muse so you can create your your side slide menu all right so that's basically it we've styled the state button and menu so I'm not gonna stop the menu too much basically it's just you know formatting the menu within Muse you know you can change the text change the font type change the color of the menu and things like that alright so I'll go ahead and preview our preview page and browser and I'll open there we have that icon and we have the menu perfect I can close it looks good so the next step is to add the image cursor widget to the Open button because if we notice here the cursor is just it's not a pointer usually when you're when you hover over an element that you can interact with it'll joint change into that pointer that has a finger so I'm just going to bring in the image cursor widget from the library panel so I'll type an image cursor and I'll bring in the image cursor widget so here I'll click hold and drag place into Adobe muse and we're gonna change the graphic style name to trigger one because that's the graphic style name for the open button and the cursor type I want it to be a pointer you could select from a few different cursor types here or you can add an image if you did at an image the image would need to be 128 pixels by 128 pixels or less but just saw I just want a simple pointer so I'll just add it there and now when I preview and then I click we can see it turns into a pointer letting the user know that you can interact with this button here so again the Open button can be anything you know text an image anything you'd like for the Open button and just like that we have the side slide menu alright looks good and step number 15 is done so that is how you add a soft side slide menu in Adobe muse using the muse motion widget and the state button within Muse and the responsive browser hate widget as well and then we added the menu here from Adobe Muse to add a nice menu to the side slide menu alright so I'll just quickly show how to add it to the right side so I'll just here place it on the right and all we have to do here and I can place this on the right as well here we just have to change this the pinning so I'll change the pinning to the upper rate and here the same for the side slide menu I'll change it to the upper right and then for the muse motion widget we want it to go from the right to the left so I'll just open it open motion one and just say negative 200 all right and I'll go ahead and preview and when I click it opens from the right so it's just that simple you want to enter a negative 200 so it comes in from the right to the left and I'm going to go ahead and place it back on the Left because there's a few other things I want to go over like the easing options and things like that so I'll just select both of these and pin it to the upper left and we'll change it to 200 instead of negative 200 all right so let's play with the easing options a bit if we wanted a bit more animation to the to the opening of the side slide menu we could just go into the easing and here I'm going to select bounce it's kind of a really animated opening and we'll leave the easing type or we'll change it to ease in and out all right so now if I preview and I click it bounces in so you know that's quite a bit of animation it could be what you're going for if that's what your site kind of looks like if you have that type of animation for your site all right so I'll change it back here you can make it slower I'm going to change it back to power one and we'll leave it at easing out the duration I'm going to set it to two and I'll go ahead and preview in the browser and when I open it opens up really slowly all right and let's do a bit quicker I'll say 0.5 and I'll go ahead and preview and it opens up very quickly all right I do like that there alright I'll go ahead and change it back to one second okay so I'll say one here all right looks good so that's it for adding a slide side slide menu in Adobe muse with the muse motion widget it's a really fun menu and yeah it's a really nice way to present a menu in Adobe muse so that's it for this video tutorial that's how I created this site here so we can see I added a different bit of different easing here and it opens up really quickly this was just dialing within Adobe Muse for the menu I changed the different states if you want me to create a video tutorial on how I styled this let me know but yeah I was just changing the states for the menu items and the text within the menu items then we have the scroll show here I use the scroll show widget to reveal these images and I will be doing a video tutorial on the scroll show widget on how to reveal elements on scroll yep with the scroll show widget alright looks good so that's it for this video tutorial creating side slide menu in Adobe muse with the amis motion widget so to get access to the muse motion widget and the responsive browser hit widget you can go to muse free shop comm and here you can click subscribe today and here you can click subscribe now to get access to all widgets and templates I come out with 439 a year here we have the muse motion widget and here you can click Add to Cart to purchase individually or again you can click subscribe to get access to all widgets and templates I come out with 439 a year here are the features within the muse motion widget this video will be in the in the GSA P&W muse series and we also have the responsive browser hate widget which is down here right here we have the response of our height widget and we have the image cursor within the shop as well alright so that's it for this video tutorial I'll just scroll back up here yeah that's it for this video tutorial again I do this to help you both awesome websites without code if you like this video tutorial you can subscribe below also in the show more section below are links to other resources and link's Timmy's free shop.com so again thanks for watching and I'll see you in the next video tutorial thank you [Music] news for you awesome websites without code [Music]

Channel: Muse For You

Views: 3,249

Keywords: adobe muse, adobe muse cc, adobe muse 2018, adobe muse cc 2018, adobe muse video tutorial 2018, adobe muse menu, creating a menu in adobe muse, side slide menu in adobe muse, greensock, greensock gsap, gsap, greensock animation platform, greensock menu, website menu animation, menu animation with greensock, greensock animation, adobe muse state button widget, adobe muse menu widget, muse for you menu widget, tweenmax, greensock and adobe muse, muse for you

Id: 3hhbI_pRf_M

Length: 24min 20sec (1460 seconds)

Published: Sun Jan 28 2018