Arrowlike buttons + slide-down nav bar (part 1)

So… I have decided to create a more special, so to speak, navigation bar for this lesson, drop-down included.

If you find yourself not knowing how to use Photoshop or you just don’t like it, or both – such as myself – here is an example of how to create and make your buttons to look like an arrow. As I said, in this lesson I will explain the steps you need to follow in order to obtain arrowlike buttons using only HTML and CSS.

meniu19.gif

Let’s begin!

You can see that our main navigation bar is made of five buttons – which means we have an <ul> containing five <li> elements – and the drop-down one has three buttons – again, an <ul> with three <li> elements.

Of course, in order to link other pages to those buttons, there needs to be an anchor within the button itself, thus, every <li> element contains an <a> element to do so.

But the question is how we make the buttons look like that? In order to answer this question, we need to take a close look at a block element, such as a <div> element. Yes, sure, it can have width, height, a background and you can even give it a border. From my experience, you don’t really get to use the border option that much. Well, this lesson brings us a change to use this. We will use borders to create the buttons from the example above.

As I mentioned earlier, let’s take a closer look at some borders. I’ll go right ahead and create a <div> of about width: 50px; and height: 50px; and give it a border: 20px solid black;. More than this, I will set the top border to be red so we can see exactly how the joint between the left border and the top border looks like, and I’ll give it a 500% zoom – maximum zoom in Chrome.

1.png

You can see how the joints between borders look like, and those sharp edges will help us create our buttons. I guess you can say we will take advantage of them! (ha ha ha!)

Our goal now is to create a single button, because after that we will just copy + paste it in every <li> element, inside our main navigation bar. For us to manage such a thing, wee will need three elements:

2.png

• anchor – a normal <a> element;
• button: tail – a normal <div> element to represent the body of the button;
• button: arrow – a normal <div> element to represent the tip of the button.

The main navigation bar will be structured like this: inside a <nav> element (id="main-nav") there will be our unordered list (id="main-ul") which will contain the five list items (class="main-btn"). Each <li> element will contain the anchor (class="btn-link") and two <div> elements (class="btn-tail" and class="btn-arrow").

3.png

Of course, at this point it will look like an ordinary unordered list with five list items. Let’s go and set the margin and padding to zero, the list style type to none and the anchor’s text decoration also to none.

Next, for better visibility, I’ll edit the id="main-nav" by giving it position: absolute;, a width of about 700px and a height of 40px, move it down a bit – top: 50px; and center it with left: 50%; and margin-left: -350px;.

The .main-btn will have position: relative;, a width of 140px and a height of 40px, they will float: left; and will have a background: #808080; – just to see them.

As far as the .btn-link is concerned, it will receive position: absolute;, a display: block; so that we can make it have the same width and height as the button itself. The text will be centered – both horizontally and vertically, and we’ll change it’s color to white.

The end result, so far, looks like this:

4

Seeing that we have five buttons, we will have five different shades of the same color. To do so, we will be using the :first-child and :nth-child() pseudo-classes to select each button individually – but this later on.

It’s now time to go ahead and create the .btn-tail and .btn-arrow. I’ll select .btn-tail to start with. In order to see with what we will be working, let’s start writing some code! To better understand the process, I’ll exemplify using the <div> from earlier:

5.png

If we remove the border from the left side, by making it transparent, and completely remove the border from the right side, we will get our desired shape. After that, we just need to set the right height and width.

I say that a width: 120px; for the .btn-tail is enough. The height will be equal to zero, because we want the top border and the bottom border to be next to each other. Having a button with a height of 40px, the top and bottom part will be as follows: border-top: 20px solid blue; and border-bottom: 20px solid blue;. For the tip of the button to match perfectly with the tail of the button in front of it, we will need to make the left border the same as the arrow; this means .main-btn width – .btn-tail width = .btn-arrow (140px – 120px = 20px).

6.png

Time to create the .btn-arrow now.

7

The left border will receive a value and color, and to make it look sharp, both the top and bottom borders will be given values, yet will remain transparent.

8

9.png

If we go ahead and inspect the button (Ctrl+Shift+I, in Chrome) we will see that the .btn-tail is wider than the value we gave it, a value of 120px, and that it covers the entire width of the .main-btn, which is 140px. And that’s not good.

10

More than that, our .btn-arrow is not in the right place. To fix this problem, we just need to set box-sizing: border-box; to .btn-tail, as well as to .btn-arrow. Furthermore, float: left; is a must for both of them.

11

Before going further, let’s take a look at the anchor inside the button. (Ctr+Shift+I, in Chrome):

12

As you can see, it covers the entire space within the button, all of the 140px. We don’t want that because when we will bring the buttons closer to each other, the anchors will overlap. To solve this, the .btn-link will have its width set to 100px, so that it will not cover the arrow tip of the button, nor the end of the .btn-tail, and we will move it 20px to the left.

13

Let’s remove the background color from the .main-btn and move the buttons next to each other by adding margin-left: -20px;. This is our result:

14

Looks nice! Really nice! But it will look even nicer after we will set different background colors for each of the buttons and, of course, a simple hover effect. Let’s begin with the first one, and after that we will continue with the others. As I mentioned earlier, we will do this by using pseudo-classes.

First button: #main-ul .main-btn:first-child .btn-tail

15.png

20

Second button: #main-ul .main-btn:nth-child(2) .btn-tail

16.png

21.png

Third button: #main-ul .main-btn:nth-child(3) .btn-tail

17.png

22.png

Fourth button: #main-ul .main-btn:nth-child(4) .btn-tail

18.png

23.png

Fifth button: #main-ul .main-btn:nth-child(5) .btn-tail

19.png

24.png

And done! Let’s test the hover effect!

meniu20.gif

Part (2) of this lessons will be about the drop-down menu which we will create inside this main navigation bar.

I hope that you have enjoyed this lesson! See you soon!

Advertisements

Published by

Laurenţiu Bălănescu

Front-end web designer - HTML&CSS

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