Part 2 - Hover Underline Effects

So after the first post concerning the TopBar Logo styling and animation, its time to get a little more CSSerious.

In this post we will cover the techniques for making the, apparently simple, animated underlines that appear when you hover over the menu items.

While this is not too difficult in itself, it is an excellent lesson in the potential pitfalls of getting CSS happy and forgetting the consequences. What do I mean? Well, CSS is an acronym for Cascading Style Sheet. Dont't switch off at this point, this is the single most important point of the whole lesson.

Cascading Style Screw-Ups

So what is this word Cascade and why can it lead to screw ups? The Cascade is the single most powerful paradigm in CSS and is what it gives it the useful power and efficiency that is required.

It’s called a cascade, because style declarations cascade down to elements from many origins.

What determines the style applied to any given element is a combination of the importance, the origin, specificity, and the order of declaration. That is a lot to think about, but what it means is that there can only be one style that should be applied to an element, without fear of conflict.

Styles cascade down the DOM tree (think of this as your nested stacks) and where no specific style exists, they will inherit styles from parent elements.

In the context of what we are about to do, this means that all the changes that we make to the main menu items will, if not stopped, be inherited by the dropdown menus - which would be bad!

We are going to use quite a lot of !important qualifiers in the actual RapidWeaver CSS code. If we were hand coding a page, these would almost never be used. When using RapidWeaver though, we are trying to overcome the already specified styles of the theme. We can't add extra classes to increase specificity because we are not writing the HTML (where they are declared) Unfortunately, therefore, we have to resort to !important quite a lot. If you don't like it, learn to code instead of drag and drop, just don't blame me.

A simple hover effect

If we have an element to which we want to apply a different style when the mouse is hovered over, we add the :hover simple pseudo selector.

This has come up before in the Ease Your TopBar Dropdown Menus Post. If you haven't yet read that or understood it then do so now.

So if we have a simple <div class="my-box"> that we want to turn from green to red when hovered then we can define its style like this:

 .my-box{
background:green
}

.my-box:hover{
background:red
}

...and it is as simple as that. So already you can make your box go red, now lets get to the menus.

The Expanding Underline

One of the alluring aspects of the underline effect on the Pandora TopBar is the smooth animation in width of the line, and this is exactly what is is. We are animating the width from 0% to 100% of the width of the menu item when hovered.

In order to make it look like the line is expanding both ways from the center, we will also animate the left: position of the pseudo from the center (50%) to the left (0).

You can see what I mean if we modify our hover box to do this. The black arrow shows the current CSS left: position of our box. You can see as we increase the width, we also animate the left to keep it centered.

.my-box{
background:green;
width:4px; //Would normally be 0px
left:50%;
transition:  width 2.65s ease, left 2.65s ease

}

.my-box:hover{
background:red;
width:100%
left:0;
}

But...

We cannot simply use a `border-bottom` on the menu item as this would mean animating the menu item from 0% width to 100% width along with its' border. Not an ideal menu really, when all the elements have zero width until hovered - i.e. The menu text would be hidden until it was hovered over.

So the answer is to use our old friend the CSS pseudo selector. Recall that this allows us to define new elements in CSS that are not present in the HTML markup.

If this statement has bemused you read this post first. If you are still bemused, beat yourself around the head a few times with a wet cloth and then read it again.

The Nuts and Bolts

We will create a pseudo element, directly on top of the menu item on which to animate our line. This will be positioned at the bottom and will just be the height of the line (2px in this case). The visible line itself is just a background color on the pseudo and we will animate from 0% width when not hovered to 100% width when hovered.

.my-box::after{
position:absolute;
content:"";
bottom:0;
width:0;
left:50%;
transition:  width 2.65s ease, left 2.65s ease
}

.my-box:hover::after{
width:100%
left:0;
}

So now the hover line is detached from the container in which our menu text resides. The text is visible all the time but the line only appears when hovered

There is one last thing that we need to address though....

The hover line is the same width as the menu item container and so expands beyond the text. Sometime you may want this. In the case of reproducing the Pandora menu accurately, we want the line to only span the text itself.

Simple - we just apply our ::after pseudo element to the text element and not its container.

Our menu TopBar items are, like so often, defined as an unordered list. So we have a collection of <li>'s within a <ul> just as if you were making a bullet point list. In addition, each <li> will contain a link (<a>) so that it can direct us to another page. Remember this small point, it will become very important.

The structure looks something like this:

<ul>
   <li>
     <a> Menu Item 1 </a>
  </li>
   <li>
     <a> Menu Item 2 </a>
  </li>
...
</ul>

So in simplified terms code, this will look something like this:

ul li a::after{
position:absolute;
content:"";
bottom:0;
width: 0;
left:50%;
height:2px;
background:#0093d0;
transition:  width 0.3ase, left 0.3s ease
}

ul li:hover a::after{
width: 100%;
left:0;
}

Remember Inheritance

Well this is an ideal example of it. We don't need to specify the color and the height etc. etc. again in the :hover declaration. Without any thing to the contrary, it will inherit all properties from its parent element. We only need to specify what changes - this is specificity. The :hover selector adds another layer of specificity to the li.

Also note that we are detecting when the <li> is hovered and not just the link <a>. This means that the menu item will animate whenever the box that defines it is hovered, and not just the text. This is a lot more intuitive for the user and and important UI feature.

The CodePen below shows this in action. This is just a demonstration and shouldn't be used on TopBar for reasons that we will see later.

There is of course quite a bit more CSS in there to size the menu items etc. TopBar provides this CSS for us so just focus on the a:after and li:hover a::after parts.

Click on the Edit On CodePen link and have a play. You can change anything you like and see the effects.

See the Pen Menu Hover Effects Blog Article by Andrew Tavernor (@atavernor) on CodePen.

Lets Take Stock

So we now know how to use the :hover simple pseudo selector. We know how to apply this to an ::after pseudo element so that it doesn't affect the main element.

We have learnt the most common basic structure used in an HTML menu and we have hopefully learnt how to manipulate it a little.

I cannot stress enough that it is important to Be sure to read, understand, and follow all the safety rules in the Ease Your TopBar Dropdowns post.... and remember, there is "No More Important Safety Rule than to Wear These: Safety Glasses”. Those that know will find that funny. Those that don't will think I am mad.

Download the RW6 Project

The finished RapidWeaver project is available here where all that we have learnt today is applied to a real Foundation for RapidWeaver TopBar.

Look for the areas in the Page Inspector CSS that we have covered in Parts 1 & 2. You will notice though that there is a lot more besides. This is to do with the dropdown menu styling which we will cover in part 3 of this series.

And one more thing.....

To keep my promise to Rusty Wood...

This has been a PowerDuck Production for Big White Duck stacks. Thanks for the picture :)

Don't forget these hover effects and lots more are available to you in the Header Plus stack without all the coding.