Part 1 - Bar and Image Sizing

A user on G+ recently asked if it was possible to recreate the menu on the Pandora Products website. Given the nice implementation of this menu I decided it was time for another TopBar styling exercise. This post details how it was done.

You can see what we are trying to achieve on the live demo site here. Scroll the page and hover over the menu items to see the effects.

Complexities

This is not a simple CSS exercise. Particularly given that we have to fight with some of the Foundation for RapidWeaver TopBar CSS it is actually a lot more difficult than writing it from scratch. Never the less, that is the point of the post so we should crack on with it.

Modularise The Problem

We have several aspects to style with this menu so I will split them up. Hopefully this will mean that you can cherry pick elements to use in projects without reproducing the entire thing verbatim.

The Main things we need to consider are as follows.

  • The resizing of the bar height as the page is scrolled
  • Similar resizing of the logo
  • The underline and hover underline effects
  • The dropdown menu
    • Offsetting from the menu items
    • Applying a top border
    • Formatting the menu text

Resizing the bar height when scrolled.

This is the simplest of the tasks ahead as we can use the ScrollUp stack.

It is simple enough to do this with vanilla CSS but ScrollUp gives us a big advantage. It adds classes when the scroll threshold has been reached. We can therefore use these classes to control all the aspects of the bar that change upon scrolling without having to get our hands dirty with JavaScript.

I say our hands, I obviously mean your hands as mine are already filthy dirty with the ScrollUp code

TASK 1:
Drop TopBar into a Scrollup stack and set its background color to zero opacity - scrollUp will control the colors.
Also set TopBar position to static as ScrollUp will do the fixing.

Setup ScollUp as normal, adding colors for the bar background and dropdowns as required. In this case the bar is black 70% opacity before scroll and 50% opacity when scrolled.

We also need to set some top and bottom padding to keep the menu items centered when the bar expands in height. How much really depends on the size of your TopBar text.

Logo resizing

So its time to write some CSS. We will be prefixing our TopBar classes with the ones provided by the ScrollUp stack to indicate when the page has been scrolled. They couldn't be more obvious:

.scrolled Tells is that the page has been scrolled beyond the threshold set in the stack settings.

.notScrolled Is the class present before the user has scrolled the page.

So the first thing to do is to make the logo larger than the defaults set in Foundation. Lots of people ask about this and it is incredibly easy.

Here is the code not forgetting our .notScrolled class (which is not strictly necessary here but it makes the code clearer). All we do is set a position relative and a fixed width, letting the height auto scale to retain the image proportions.

The transform instructions are simply to produce a smooth animated transition between the two sizes. The final -webkit-transform:translateZ(0) is a trick to force hardware acceleration in webkit browsers which smooths things out further.

NOTE: Vendor prefix codes are omitted in this article, you must add them to ensure cross browser compatibility

.notScrolled .top-bar .name img{
    position: relative;
    width:200px!important;
    height:auto!important;
    transition: all 0.7s ease;
    transform-origin: left center;
    -webkit-transform: translateZ(0);
}

Now, similarly for the scrolled state, we can make the logo smaller. There are several ways we could do this. We could reduce the size defined above, we could even swap out the image for a smaller version. Neither of these techniques will give us a smooth animation though, so instead we will use the CSS scale function to simply scale down the logo. This will give us the smooth animation that we want.

Note how this time we are specifying the .scrolled class. Remember this is being applied to the scrollUp stack in which the Top Bar sits and so it is the "outer" element and goes first in our selector.

.scrolled .top-bar .name img{
    transform: scale(0.7)!important;
    transform-origin: left center;
    position: relative;
    padding-top:10px;
    transition: all  0.7s;
    margin-left: 10px;
}

And it is as simple as that. As soon as ScrollUp has detected a page scroll as per its stack settings, a class of .scrolled is added to it. At this point the above code becomes applicable and the title image in TopBar is scaled down to 70% of its original size.

TASK 2:
Copy the above code, like good little squirrels and paste it into either your page inspector or site wide code.
Make sure you use the Paste as Plain Text feature on the edit menu.

Now, all this is great but we don't want these transforms applied to the mobile menu or it will look terrible. In addition, because TopBar uses the site-title area in mobile mode to form the bar, the animations will send everything wild.

So our final job is to wrap the above code in a media query. This should be set to the same screen width as the setting in the TopBar stack. If you have it set to use the mobile menu for small screens only, this will be 40.063em. If you using a different size then see the Foundation Media Queries Page for the value you need.

TASK 3:
Wrap the code in a media query to exclude the effects on small screens;
 
@media screen and (min-width:40.063em){
//Code goes here
}

In Part 2 of this series, we will cover the hover effects and constraining them to just the text. We will also, in so doing, create a load of problems for ourselves with the drop-down menu which will be sorted out in Part 3.

And one more thing.....

Everyone is always asking about overflowing logos for TopBar. You can simply use the above code to do it - without the transforms of course. You can either use an image with an aspect ratio that is taller than the Pandora one above and it will overflow, or use can force the issue using a margin-top: to push it down.

Here is the Pandora image with a top margin of 40px overflowing the bar.



Now Go Forth