Adobe Muse Tips: Sliding Menu

Adobe Muse Tips: Sliding Menu

Salin (@salinsuilecume) asked me on Twitter: “How to create a sliding menu with Adobe Muse CC?”. Good question. With the default tools and settings, it’s not possible. You must add some lines of code (CSS and JavaScript) to achieve this experience. I’ don’t like adding code in Muse, because, without writing any line of code, you can already design and publish amazing websites. But sometimes, it’s necessary, and I had to answer Salin’s question on Twitter.

EDIT: New version of Adobe Muse

With the latest update of Adobe Muse, you cannot use the same element. Just take the <ul> Menubar element. In my sample, it’s menuu459, and it will work the same way. Adobe Muse generates a cleaner HTML structure, that’s why I had to change my code.

Sample and Video Tutorial

Here is the link to my final samples:

I’ve also recorded a video tutorial:

Step-by-step tutorial

Sample 1 – Sliding menu on Mouse Over

First, create a menu using the Vertical Menu Widget available in the Widgets library of Adobe Muse. You can add some visual elements, like the logo of your company (I’ve added a Muse Icon in my sample). Group everything (Object > Group) and place the menu in a layer on top of all other layers. Move this group to the left of your page.

Group the menu items and place it on the left of your page.

Group the menu items and place it on the left of your page.

Pin this group to the top left corner of the page.

Pin the menu

Pin the menu

Now we need to create the “Sliding” transition when the mouse goes over the menu. To do so we need to add some CSS in this page. Open the “Page > Page properties” window and add code in the “HTML for <head>” section:

You just need to declare a transition on the left property. In the second part, we declare that if the mouse is over the element with the id “u611”, this “left” property will be set to “0”. The element with the id “u611” is our menu obviously. You cannot get this id directly in Muse. To get this id:

  1. Preview your page in Google Chrome (File > Preview Page in Browser)
  2. Open the Developer tools (View > Developer > Developer tools)
  3. Click on the “Magnifying lens” tool at the bottom.
  4. Click on the menu element of your page.
  5. Get the “id” of the <DIV> element.

 

Legende ici

Use the Inspector in Chrome and get the “id” of your menu element.

Once you get the ID, you should be able to update the code I’ve just shared. You can try this page here: http://musechaize.businesscatalyst.com/

Sample 2 – Sliding menu on Mouse Click

To get a sliding menu on Mouse Click, you need to add some JavaScript code. In my sample, I’ve added a “close button” image.

Again, you need to preview the page in Chrome, and use the Inspector to gather some IDs: the Group (that contains everything), the Menu icon and the “Close button” image. Once you get the IDs, add this code in the <head> section of your page (Page > Page properties):

It’s basic Javascript and I explain what the code is doing in the video tutorial.

If you want to test the sample: http://musechaize.businesscatalyst.com/click-to-open.html

Download the Adobe Muse project

Get Adobe Muse in the Creative Cloud, and download my project to get the code and play with my sample: http://creativedroplets.com/samples/adobemuse/museClouds.muse.zip

I hope that it answers Salin’s question. Don’t hesitate if you have any question about Muse and the Creative Cloud apps. I’d be happy to answer them on this blog.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

29 Comments

  1. I’ve been looking for a way to do this, I have downloaded the files to check it and there are problems in running it in IE10 – also Muse beta 4 does not work for either pages and the click-to-open.html does not work at all. Would the id’s have changed?

    I will create the project from scratch and see if I can work out the problem

    • Hi Pete. Maybe the ID changed with the beta. It’s easy to check in Chrome with the dev tools.

  2. Hi. I like your tutorials and I learned a lot of new things. Thank you. But I have one question. I was trying to implement a simple js webpage preloader. The problem is that the elements that are pinned to stay on top of anything else are also on top of my animation of a preloader. Have you ever had a problem like this? Maybe you could help me somehow. Or maybe you have some idea how to make a preloader to a webpage done in Muse?

    • I don’t think that you should add a preloader to your Muse webpage. A webpage is supposed to load smoothly… but maybe you can use some tricks… and some JavaScript. The easiest way is to integrate jQuery and use this tutorial: http://w3lessons.info/2013/07/18/jquery-preloader/

  3. Hi Michael, thank you for this tutorial. Is it possible to have two “sample 2” slide out menu on one page? I tried to put two of the slide out menu on my page, but I can only get one of them to work.

  4. hello! I have a question, how many master pages need to create this effect or you just need a single page?

  5. Hi !!! I Love your Work. Its really inspirational and amazing.

    ( Adobe Muse related ): I was hoping if you could also teach us on how to animate the Font-Awesome using CSS/Jquery etc on mouseover. I mean the fonts changing size , color etc smoothly and some awesome animations occurring likewise !!!

    • Thanks so much for the wonderful tool. please explain exactly how you update for Muse 7.. the instructions are not clear for my capabilities.

      • With Adobe Muse 7, the group doesn’t work anymore. Just place a vertical menu, take the ID with the Google Chrome tools and add the CSS. It’s exactly the same. The main difference is that you cannot add an “icon” like in my sample.

        • Thanks!

        • Is there any way to include icons in Adobe Muse CC 2014? (The example on my site is the bar on the left with social media icons on it. The icons are exposed, the menu is not)

  6. Hello Man,

    I will Pay you, Please help me. I had someone write the css and html code for me and Java Script. I wasn’t sure which one would work better. i know you mentioned CSS. When he created it he created a generic Accordion. I want to have the ability to add and remove learnt and child pages. Would you please create it as a .mulib file for me PLEASE!! I WILL PAY YOU MAN via Paypal!!

    This is the link to the code i had him write. he does’t have muse so this is all he was able to do.
    https://www.dropbox.com/sh/cucpbxb7ad4kwuc/AlzBHAjZmJ

    • Sorry, it’s impossible to apply this script to the Muse menu (the widget one). But maybe you can create it manually. Let me try.

    • ok check this sample: http://montestdujour.businesscatalyst.com/contact.html
      I’ve included in the page properties the menu.css code between “style” tags (in Muse, open your page, Page > Page Properties > HTML for head). At the same place, paste the code from menu.js between script tags. Then in the Muse page, copy the html code of menu.html and paste it. You get the menu. Now you have to customize yourself the menu.html, add the links by yourself, etc… but it will work.

  7. Hello Michael,

    Thank you for taking time to help us learn. I’m having a hard time figuring out the code particularly where the element is suppose to go. I tried to follow you but can’t seem to get it correct. Here is what i did in DW

    {
    transition-property: left;
    transition-duration: 0.2s;
    transition-timing-function: ease;

    -webkit-transition-property: left;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function:ease;
    {
    :hover{
    left:0px;
    {

  8. Hey Michael. Thank you very much for this nice solution. Is there any way to make it closing the menu when you click again on the same button? I am very beginner on javascript but I understand that with this code, setting the same id for contrary actions, it can’t work at all.

    Thanks in advance!!

  9. Hi Michael, thank you for this tutorial.
    Is there any way to use this nice solution also for the tablet and phone?

  10. Thank you for your tutorial. I just wonder if I want to let the menu slide from the top, How many code should I change? I change the ID and the transition-property(left>top), but it doesn’t work….

  11. Dear Michael,

    Thank you so much for the tutorial. I have gotten the menu to slide, but want to get the whole group to slide together (div box for background, trigger image, heading, menu). Is this possible?

    Since it’s not working, I slid the whole thing out a little to the left for easier viewing.

    http://billb3.businesscatalyst.com/down.html

    Thanks in advance!

    • I’ve got the exact same problem.. (How) Did you manage to solve it? Maybe Michael could help?

  12. Hey! I have a question. Is it possible to open and close the menu using the same button?

  13. Hi Michael,

    Thank you so much for the update on the menu bar code.
    Im very new to Muse and do not really know what to do with the code do I just replace it with the old one and edit the ID on it?

    Because I have tried that and it doesn not seem to work.

    Please help.

    • Check my video to see how I get the ID of a component in Chrome. Then you update the CSS code with the correct ID.

  14. I was wondering if we could make a Youtube like progress bar at the top of our site using Adobe Muse CC 2014? If we could that would be great!

  15. I’m having some trouble adding css in muse, I would like to do something like the menu icons animation as seen in this website: http://www.hoborg.com/

    Thanks,
    Zack
    #zack_gorham

  16. Trop fort, quel talent.
    merci beaucoup,
    c’est beau et j’apprends plein de trucs,
    A+
    E.

  17. As far as I can tell, the methods described here do not work in the latest release of Muse. After downloading the sample source and previewing without editing, the results are not as described in the demos. Only the parent div is behaving. The menus full label text does not expand out.

  18. Hello , is it possible to do the same thing , but for a menu that pushes the entire page to the right ( in case the menu just left) ???

    thank you in advance

  19. Sir I want to make same sliding menu which is sliding up to down like this Website —>>http://moviesovie.net/
    plz help me.

Trackbacks/Pingbacks

  1. Adobe Muse: <Style> the menu and text in group (<nav> in <div>) - […] am using the code from following tutorial: and found both menu and text don’t slide out when they are…

Submit a Comment

Your email address will not be published. Required fields are marked *