Adobe Muse Tips – Scrolling menu

Adobe Muse Tips – Scrolling menu

Recently, I played with Adobe Muse CC, part of the Adobe Creative Cloud. This application is for designers who need (or want) to create websites without writing a single line of code. If you’re a designer who knows how to create amazing pages in InDesign, why not use your skills to target the web? Adobe Muse represents a great opportunity for classic designers who don’t have the energy to learn HTML and CSS.

Web design patterns

The real question is: Can a good print designer become a good web designer? This transition is not automatic, because design isn’t just a question of taste or “trained eyes”. It’s also a matter of culture, knowledge and context. Web designers have a specific knowledge of the web, just as Print designers know how to design efficient layouts. It’s not a question of technology, it’s a question of user context, how to please the user, how to make your work shine, how to guide the eye of your readers…

The web is full of “design patterns”: I’ll explain how to achieve classic web design patterns with Adobe Muse. In this article, I’ll show how to create a scrolling navigation bar in the header. You’ll find three techniques on the web: the fixed menu, the scrolling menu that is part of the design, the hidden scrolling menu that appears when the user scrolls down on single-page websites.

#1. Fixed menu

A fixed navigation bar sticks to the top of the page.

greatBeard

The website The great bearded reef is a perfect example. The navigation bar is part of the design and sticks to the top.

Here is a sample page produced with Adobe Muse:

fixedmenu

Click on the image and scroll down. To create this navigation bar:

  1. Make sure that your design is in a layer on top of your content. In my sample, I also use a PNG behind the content of the page to add more depth. 
  2. Use the “Horizontal menu” widget. By default, the menu will list your website pages. In the settings of the widget, you can manually create a menu and point to anchors in the page.
  3. Group everything (selection > right-click > Group) and make sure that you position your navigation bar at the top of the page.
  4. Select your new group of elements and “pin it” to the top of the page.
Pin your navigation bar.

Pin your navigation bar.

 

#2. Scrolling menu

A scrolling menu is part of the initial web design, below the logo of your company for instance. A good example is the Backbone Conf website.

backboneConf

The Parallax Scrolling effect introduced in Adobe Muse CC can be used to catch the eyes of your visitors, to tell a story and also to create a scrolling menu. This effect can be used for amazing effects. There are many good tutorials on the web that explain how to use this effect, but I particularly like this one by Rufus. I leverage this effect to create a classic scrolling menu in my second sample:

scrollingMenu

The basic principle is that the menu bar scrolls down with the page until its top matches with the top of the browser window. Then it stops scrolling. Here are the steps to enable a scrolling menu:

  1. As in the previous sample, make sure that your menu bar in a layer above your page content. 
  2. Position your navigation bar in your page. Add a horizontal guide. Click on the guide and get the Y coordinate. In my case, it’s 320 pixels.
  3. Select all the elements of your navigation bar and click on Effects.
  4. The settings for a scrolling menu with Adobe Muse CC.

    The settings for a scrolling menu with Adobe Muse CC.

  5. Open the fourth tab and select “Scroll motion”.
  6. The “Key position” is the Y coordinate of your guide (the top of your navigation bar). It means that when the user scrolls the page and the browser window reaches 320px, it will trigger an event and switch the behavior from “Motion Before Key” to “Motion After Key”.
  7. Before this Key position, we want the navigation bar to follow the flow of the page. So it will move up at the same speed as the user scrolls down. Enter “1”.
  8. After this Key position, we want the navigation bar to “freeze”. Enter “0”.

#3. Hidden scrolling menu

A hidden scrolling menu only appears once the user scrolls down the page significantly. It’s a discreet way to propose a fixed navigation on a single-page website. To see what I mean, check out the beautiful one-single page website of Arlen.

billy

The page starts with the logo and a tagline. Once you reach the “About” section of the page, the navigation appears. I’ve implemented this behavior with Adobe Muse in my third sample:

hiddenMenu

To create a hidden scrolling menu, follow these steps:

  1. Make sure that your menu bar is in a layer above your page content.
  2. Position your navigation bar in your page where it should “appear” first. In my sample, I want the bar to appear when the user is in the “Services” section. So I placed it just on top of the Services hero banner.
  3. Add a horizontal guide. Click on the guide and get the Y coordinate. In my case, it’s 370 pixels.
  4. Select your elements, click the “Effects” link and open the fourth tab (for Scroll Motion).
  5. hiddenMenuEffects

    Scroll motion settings for the hidden menu

  6. Select “Scroll Motion”and type the Key Position value. Again, it’s the Y coordinate of the top of your navigation bar.
  7. The Motion Before key will constantly move down the menu until it reaches its final position at 370px. But the progression of your navigation won’t be visible as the user scrolls down the page.
  8. Set the Motion After Key value to 0 to freeze the navigation bar once the 370px Y-coordinate is reached.

Get the samples

Here is the link to my Adobe Muse projects:

http://creativedroplets.com/samples/adobemuse/Website-Scrolling-menu-muse.zip

It contains the three samples showcased in this article.

Structure of the Muse project

Structure of the Muse project

The navigation bars are defined in the Master pages.

  • Home + A-Master = #3 Hidden scrolling menu
  • MovingMenu + B-Master = #2 Scrolling menu
  • FixedMenu + C-Master = #1 Fixed menu

I’ll cover more classic web design patterns in my next posts. Suggestions are welcome.

 

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)

15 Comments

  1. So useful! thanks for sharing!

  2. Great article. I will definitely have a use for this in future projects. Very nice to make the sample files available to everyone.
    Greetings from Switzerland
    Ludwig

  3. Good day,

    Have you found a way to make a hidden scrolling menu that’s also full page (as if was made by the rectangle tool) like the example http://www.billykick.com/ ? It seems that the scroll motion effect only work with placed images like png or jpg.

    Thank you!

  4. Hi, very nice work!
    How in Muse can scrolling trigger the fade in the opacity of the web-text and image-icon in the billykick logo at the top of the billykick.com site?
    Thanks!

    • Thanks. In the current version of Adobe Muse, you cannot add this fading effect. But this is exactly the kind of features I’d like to see in upcoming versions. Hopefully, it will be available one day. Good feedback. Thanks.

      • Thanks Michael… I hope so too! But looking at the BillyKick example, it’s good to know that maybe even now, this kind of effect can possibly be edited into a Muse site with some additional code. I’m gonna try to see if I can do this with some JS. Cheers!

        • Rflyx – Were you able to figure out how to do the fade using some JS? I have been trying to do that same thing on a site I am working on.

  5. Nice tutorial but i like navigation menu like in this site. Is that possible to make tutorial how to make navigation menu like in tis site ? Or that is a big secret ? :)

  6. How do you do it if you have multiple pages? Things from the pages will go over the meniu.

    • To display elements on the top, just place them in a layer on top of other layers.

  7. On the website of Arlen he has sliding pages for his WEB work.

    How is this done in Muse? Is there a example available on your site or does somebody know examples of this being explained?

  8. Anyone any ide how I can do the #1 Fixed menu in Adobe Prosite? I’ve seen it done before but can’t seem to find the option :(

  9. hi, i have a quick question how do we make the page go to the one that specific part, for example ‘portfolio’ by clicking portfolio if we design them all on the same page?

  10. **reposted because I’d entered my email address incorrectly)**
    Hi Michael. Thanks for this.
    I’m looking for a slightly different take on this though.
    What if I wanted it(or another element) to behave in this way until it reached a particular part of the page, and then scroll up off-screen along with the rest of the content?
    Taking your example here of the fixed-then-scrolling menu ( http://musemenu.businesscatalyst.com/movingmenu.html ) let’s say I wanted it to behave in exactly that way until it was sitting on top of, say, the work section, and then dock and scroll along with the other content as though it was a static element?
    Doable? Or am I dreaming of a chocolate beer tree?

  11. Michael, thank you very much for sharing this and other tutorials which I have found extremely useful.

Trackbacks/Pingbacks

  1. Adobe Muse tips – Catalog design pattern | Creative droplets - […] introduced in my previous post a classic web design pattern: the scrolling menu. Today, I’ll explain how to combine…
  2. Adobe Muse Tips: Hidden Hero | Creative droplets - […] already shared on this blog how to achieve classic web design patterns with Adobe Muse: the scrolling menu, the…

Leave a Reply to rflyx Cancel reply

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