Top menu button customization in OutSystemsUIWeb (OutSystems 11), Part Two

In the previous post, we’ve explored the OutSystems top menu and stripped it of its’ style. Now, let’s customize it!

To better show the differences between ‘normal’ CSS and the CSS you’ll write for OutSystems, we’ll ‘translate’ a well-loved CodePen by Paraskevas Ntinakis into the OutSystems ecosystem. Here’s the Pen:

We’ll be using the ‘From Left’ button.

First, we’ll define a more decorative font for our button text and adjust the button padding. We already used the class we need before to get rid of a tiny default OutSystems animation, so we’ll simply add our new properties to it.

.header .Menu_TopMenu {
    border-bottom: 0;
    border-top: 0;
    position: relative;    
    padding: 0 3.0rem;
    font-family: monospace;
    font-weight: lighter;
    font-size: 0.8rem;
    letter-spacing: 0.55rem;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

make1

Now, we’ll add a simple hover pseudo-class to the link text to change the text colour to white when we move over it with the mouse. We don’t want to differentiate between an icon, a link, and a visited link, so we’ll throw all three classes in there. To make it a bit more pleasant on the eyes, we’ll add in a transition delay, too.

.Menu_TopMenu:hover > div .fa, 
.Menu_TopMenu:hover > div a,
.Menu_TopMenu:hover > div a:visited {
        color: #ffffff;
        transition-delay: .15s;
}

make2

Next, we’ll ‘prime’ our top menu for animating and add a background colour change on hover, so we can see our results. We’ll be using the before and after pseudo-elements here for our animation.

Our first ‘priming step’ is adding the content property to our before and after elements. Without it, our animation won’t be visible because CSS thinks there’s nothing to animate. We can trick it by just leaving the content empty. Our content property also needs a position: absolute; setting to keep it in place, and we’ll define a top, width and height for that position. We’ll inherit the transition property because we’ll define it in .header .Menu_TopMenu later, and we’ll set the z-index to -1 so our animated background will stay behind the button text.

.Menu_TopMenu::before, .Menu_TopMenu::after {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    transition: inherit; 
    z-index: -1; 
}

We can’t see the results of this preparation yet, so let’s do one more preparation and then add a background animation on hover. For our last preparation, we’ll set width to 100% on the class we’re going to animate. (If we don’t, we aren’t going to see anything happen, because we set our width to 0 previously.) Next, we’ll set our ::before to have no transition delay (we can play with that later if we like), and our ::after will have a dusty blue background colour and a transition delay of .3 seconds.

.Menu_TopMenu:hover::before,
.Menu_TopMenu:hover::after {
    width: 100%;
}

.Menu_TopMenu:hover::before {
    transition-delay: 0s;
}

.Menu_TopMenu:hover::after {
    background-color: #1da6cf;
    transition-delay: .3s;
}

make3

It’s horribly off-centre, but something is happening! You might notice a quick animation from left to right which you might not expect since we did not specify any transitions yet. Thanks to our transition: inherit property though, we have inherited the default transition specified in the BaseTheme – transition: all 150ms linear. Since we’re going to override it anyway, it wasn’t really worth stripping up until now. Let’s override it right away:

.header .Menu_TopMenu {
    border-bottom: 0;
    border-top: 0;
    position: relative;    
    padding: 0 2.0rem;
    font-family: monospace;
    font-weight: lighter;
    font-size: 0.8rem;
    letter-spacing: 0.55rem;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: all 600ms cubic-bezier(0.8, 0, 0.30, 1);
}

make4

It’s still horribly off-centre, and we’re still missing the top and bottom bars. The right and left properties in the bar-animation will fix that, and our ‘bars’ are actually just the top and bottom borders of our box. Our border-bars will go from right to left, so our ::before gets right: 0 and our ::after gets left: 0. We’ll define the borders to be 2px thick and the colour will be the same blue as our background. (Note that this is not the same class as is not defined inside our :hover pseudo-class.)

.Menu_TopMenu::before {
    right: 0;
    border: 2px solid #1da6cf;
    border-left: 0;
    border-right: 0;    
}

.Menu_TopMenu::after {
    left: 0;
}

make5

Better, but there’s a mysterious gap between the background and the border-bottom. We’re missing one general override on our ::before and ::after items.

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

It’s also possible to put these inside our existing .Menu_TopMenu::before, .Menu_TopMenu::after{} classes, but let’s make it more ‘reusable’ and keep it separate for now.

make6.gif

Now, all that’s left is to tune it like our CodePen example! We’ll leave the border size at 2px instead of 1 and adjust the transition and transition delays. This is the complete CSS, so you can see where I edited them:

/*=========================================
       Top Menu Button Customization
     Button design: Paraskevas Ntinakis
     OutSystems Adaption: Monique de Vos
  =========================================*/
  
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

.header .Menu_TopMenu:hover, 
.header .Menu_TopMenu.Menu_TopMenuActive {
 border-bottom: 0px;
}

.Menu_TopMenuActive > div a,
.Menu_TopMenuActive > div a:visited, 
.Menu_TopMenuActive > div a:hover, 
.Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: var(--color-neutral-8);   
    font-weight: normal;
}

.Menu_TopMenu:hover > div .fa, 
.Menu_TopMenu:hover > div a,
.Menu_TopMenu:hover > div a:visited {
    color: #ffffff;
    transition-delay: .6s;
}

.header .Menu_TopMenu {
    border-bottom: 0;
    border-top: 0;
    position: relative;    
    padding: 0 2.0rem;
    font-family: monospace;
    font-weight: lighter;
    font-size: 0.8rem;
    letter-spacing: 0.55rem;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
}

.Menu_TopMenu::before, .Menu_TopMenu::after {
    content: '';
    position: absolute;
    top: 0;
    width: 0; 
    height: 100%;
    transition: inherit;
    z-index: -1;
}

.Menu_TopMenu:hover::before,
.Menu_TopMenu:hover::after {
    width: 100%;
}

.Menu_TopMenu:hover::before {
    transition-delay: 0s;
}

.Menu_TopMenu:hover::after {
    background-color: #1da6cf;
    transition-delay: .4s;
}

.Menu_TopMenu::before {
    right: 0;
    border: 2px solid #1da6cf;
    border-left: 0;
    border-right: 0;    
}

.Menu_TopMenu::after {
    left: 0;
}

And this is the result!

make7

I hope you enjoyed our long trip down OutSystems’ CSS lane. Thanks for sticking with me and see you in the next post!

One thought on “Top menu button customization in OutSystemsUIWeb (OutSystems 11), Part Two

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s