Another hover effect (1)

As I said, I intend to modify the same menu and, to do so, I want to delete everything in the CSS file so that I can start from scratch. As far as the HTML structure’s concerned, I’ll keep the unordered list and its elements and also the link element.

1

In this lesson I’ll present the steps that need to be taken in order to build this type of hover effect, as well as what elements make up this menu.

untitled

As we can see, there are four elements which make up the entire button:

1. the button itself, where we’ll use a <div> element;
2. the text on top of the button, represented by a <span> element;
3. the element which slides from the left side and –
4. the element which slides from the right side, both <div> elements.

The order in which the four elements will appear in the HTML structure is very important because we’ll apply the position declaration within the CSS code, in order to overlap them.

We can see that the button is first, the text comes on top of it, and the two sliding elements are positioned right between the two. In this case, the HTML structure will look like:

2
A single button
3.png
The entire navigation bar

In case you have doubts regarding how correct the HTML structure is, you can copy it and validate it using an HTML Validator; the result, when the source code is well structured, will look like:

4.png

Now that we are done with the structure, it’s time to start writing the CSS. First of all, I’ll prepare the sheet so that everything will be ready for us to start editing the four elements.

5

Next, I propose that we start with every element, separately. I wish the list to contain the rest of its element inside, so it will receive position: relative;. For everything to be visible, I’ll set the margin for the unordered list to be as follows – margin: 20px 150px; (even if this means that the top and bottom have 20px, and the  left and right have 150px).

The <a> element will also receive the position: relative; declaration because we want it to stay separate and not overlap with the others, but also to make it contain the elements it has inside it. More that this, the display: block; declaration is absolutely necessary so that we can edit it.

6

Now we move on to the base of the button, which we’ll set to have width: 110px; and height: 30px;. To make it visible, I’ll set the background to be red.

7.png

Our next step is to overlap the two elements: the text to appear on top of the actual button. To do this, the element which contains the text, in our case the <span> element, will receive the position: absolute; declaration. To center it, so that it will appear in the middle of the button, we’ll give it a text-align: center; declaration – after we’ve made it have the width and height of the button, 110px and 30px – and for it to be vertically centered, the line-height declaration needs to have the same value as the height of the button.

8.png

So far we’ve edited two out of the four elements. Next, we’ll edit the two sliding elements, the one which slides from left-to-right, and the one which slides from right-to-left. To make them visible, we’ll set the width and height, different background colors to distinguish them – green for the one on the left, blue for the one in the right. And if we’re still doing this, let’s overlap them – make them appear on top of the button itself, yet underneath the text, and position them as follows: green to the left, blue to the right.

9.png

Everything looks good, everything seems to be in place. Let’s animate the two sliding elements. We’ll also declare the length of the transition time to be 0.3s, in order to see exactly how the two elements act.

10

The result:

meniu2

Now, all the elements are overlapped this way:

13.png

Apart from the colors, it doesn’t quite look like the one shown earlier. We still have something more to do. If we look closer at the example, we can see that the sliding elements start by having the same height as the button, but during transition, they get thinner and slide towards the center (vertically) of the button.

untitled

To do this, we’ll have to set up the two elements like this: during transition they need to loose height – let’s say that 10px are enough – and, at the same time, with the same value – 5px on top and 5px to the bottom – to center them vertically.

11.png

meniu3

The last thing we need to do now, beside choosing the colors of the button, text and sliding elements, is to set a 110px width for the unordered list – same as the buttons’ – and to hide everything else by applying a overflow: hidden; declaration.

12

meniu4

The navigation bar is ready now. The only thing left to do is to modify the colors according to our preferences or the design and layout of the webpage.

In my next lessons I’ll make two new different hover effects, using the same structure we’ve created now. See you soon!

Advertisements

Published by

Laurenţiu Bălănescu

Front-end web designer - HTML&CSS

One thought on “Another hover effect (1)”

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s