Adobe Muse CC | One Page Scrolling Menu | Muse For You

you today's video I'm going be showing you how to create a menu in Adobe muse and how to link that menu to different sections of your Dobby muse page so let's get started first we're going to open Adobe muse this is the new version just updated June 18 2014 there is a new interface so I'll close this I'll go to file new site and click OK the interface looks more like Adobe Illustrator or Adobe Photoshop it's very nice it's black a little bit slicker ok so a new site and now we go to a home double click there now to create your menu you just go to object good object insert widget menu and I want to create a horizontal menu you can create a vertical menu but we'll do horizontal today okay then I click once and just right there I want to kind of Center it in the page so at first you'll know you'll notice that you can't edit this this menu you can add new menu items now that's because if you click on this little blue and white arrow here the menu type is set to top-level pages and what that means is that Adobe Muse is looking for pages and the plan view to create menu items out of since we only have the home page it only creates the home page now to change that we want to manually edit our menu so again we click on the one menu item click on the blue and white arrow or it says menu type click on manual now we can edit our menu and add new menu items so we click on the menu item again we'll click on it one more time and up now appears where you can add more menu items we can add a menu item to the right to the bottom or to the left of this menu item we want to add a menu item to the right so let's click the plus symbol there click the last menu item click the plus symbol again the plus symbol again and one more time I'm going to have five menu items when I have it at the center of the page and to make this menu wider you just click on the entirety of the menu and just drag all the way to the right okay my menu is going to be 960 pixels wide it's right in the center of the page and I want it to be right at the top of the page right there perfect and I want to want to make it a little bit more more height to it so we have some nice big menu buttons now I'm not crazy about this gray here so we'll click the menu click the first menu item any changes you do to this first menu item will do it for the other menu items as well so we click on over here fill click the color icon icon over here and I want this nice red right here very nice I like that red now to change the text you just double click inside the text and click a few times till you can edit the text and I'm going to pick a font I'm going to do alerta' okay perfect great now and I want to change the font height to let's say 18 okay now we need to give these menu items names so I'm going to go ahead and do home oops sorry about that home about services FAQ and contact all right very good so there's our menu items okay and I hit tab and okay there we go so just centered more of my page in the center okay so those are our menu items and right now they don't do anything it's just a menu doesn't linked to anything if we wanted to link the home button to let's say Google we just click on the home button which says hyperlinks you click add or filter links and we do HTTP google.com and let's preview it command shift e and we click on home and it takes us to Google great good we don't want these to link to external pages we want it to link and inside this particular page so what I'm going to do next is create some sections for the page so I'm going to click on the square tool right over here to the left and I'm going to just draw one square and I'm going to make it six hundred and fifty pixels high you think the average screen size is about 768 so creating a section that 650 pixels high will allow the user to see most of that section okay and we want the square are the sections gives me to be at a hundred percent with that way the width of the section changes with the width of the browser you can do that just by clicking the left and right and making sure that the width says a hundred percent very good if you notice this section covered our menu to change that we just right click arrange and send this section to the back and that brings our menu back to the front okay so I'm going to fill the section let's say with black we'll just do black and red tend to like those colors and we'll just kind of create that there and right there and like that okay I'm going to go ahead and yeah color these sections different colors just so you can see how this works and we'll do one more like that that's fine Oh other thing I forgot to mention if you notice you probably won't see it too well but these sections have a 1 pixel border around them I don't want them to have that so I'll just click on each each section go to stroke and set the stroke color to none and that takes off the stroke and there we go so these have no stroke the other thing I want to do is add some text to each section so we can tell the different sections give each section a name so I'll just create a text box you do that by clicking the tee over here and creating a text box and I'm just going to call this section one you can't see it could splack on black so I'll highlight it change it to white and make it a bit bigger 60 and again we'll change it to alerta' just keep the theme going and we'll Center this text very good all right okay Center one thing I like about it those news is these grids and how they let you know is everything's centered or you know proportionate to other items within your website it's very useful okay section three okay and section 4 and section 5 okay there we go okay we have all our sections now the next thing to do is to create anchor points so we can link these menu items to these anchor points to do that we click on the anchor right up here this is this thing that looks like an anchor you click once and you place it at the top of each section so this is section 1 you need to label each anchor and you want to have each anchor centered nicely in the middle so when you scroll your sections aren't scrolling a little bit to the left of the right section to will put it right here at the top of section two again you can see how Muse like use lines up everything is quite nice go to the anchor click here section three okay and this other anchor okay let's just delete that okay section four perfect and section five okay so we have our five anchors for our five sections and they're all aligned perfectly in the middle very good alright so the next step let's just preview this to see what it looks like in the browser now you notice the only thing we have linked is the home page but if you click any of these buttons they don't work and you have to scroll to see the different sections you know either scroll with your mouse wheel or up and down with the scroll bar all right we we want it so that when you click on about it goes to section 2 and so on home now they all go to the different sections let's close this so what we need to do now is to assign the different menu items to the different anchor points so we'll click on home and right where it says hyperlinks you will now see we have home we have section one two three four and five we want to links home to section one about two section two services to section three FAQ to section four contact to section five ok very good that's all there is to it now let's preview let's preview this page command shift e and if I click on about I get the About section services section three FAQ section four contact section five all right now there's one thing that I'm not crazy about the fact that you have to scroll all the way back to the top to see the menu we can easily change this by fixing the menu to the top and bringing it to the front so one thing you want to make sure is that you click the menu now right-click you want to make sure the menus in the front and you click bring to front okay now the menu is in front of everything in this website of all your elements in this page and we want the element to stay at the top so we click once to grab the to click on the whole menu and we want to pin it right over here there's this pin option and we want to pin it to the top and in the middle there you get now this menu item it's going to stay at the fixed at the top it's not going to move and it's going to be on top so let's take a look at how that looks okay so about perfect services FAQ contact ok so interesting this section doesn't go all the way to the top the reason for that is we don't have enough scroll space here at the bottom of the page the page ends right here we need to add more scroll space so that this section can go higher up in the page now to do that it's very simple you just go down here you pick this little tab here where it says bottom of the page and you just drag it down all the way down a few that that should be good this allows more scroll space for section 5 to go up now as you get more into development you'll know what you'll want to do with this section here because you don't want it to just be white and that's kind of you know playing around with muse and seeing what works best and you know what looks best you know you can try something maybe like this and you know see how that looks contact yeah there you go see somehow covers more the page and there's not so much weight this is kind of the footer area right down here where you can add you know a footer or you know something else you know you can make this the same color as this section and you know it's all about you know getting the design to look good so basically that's the end of this tutorial we just made a scrolling website hopefully you find this useful and can use it for your own websites and there will be many more videos to come if you like this video please subscribe below with the subscribe button and I will see you in the next video thanks

Channel: Muse For You

Views: 167,433

Keywords: adobe muse, adobe muse cc, adobe muse cc 2014, one page scrolling, menu, muse for you, web design, ux design, ui design, websites, hosting, web hosting, Bluehost (Business Operation)

Id: ngm5quHtJI4

Length: 14min 40sec (880 seconds)

Published: Sat Nov 08 2014