Welcome to Drop-down nav bar!

Aaaaand, I’m back! In today’s lesson we’ll be making a simple drop-down navigation bar.

To start with, a drop-down menu is just a normal menu, an unordered list with its list items, which contains another (one or more) unordered list within one of its list items, visible only on mouse-over.

We’ll begin by creating an ordinary unordered list inside a <nav> tag.

1

Inside the Portfolio list item we’ll insert another unordered list which will contain our drop-down menu.

2

I’ll give the main unordered list an id="main-ul" and to the second one, an id="second-ul" so that we can easily identify them. The buttons from the main navigation will get a class="main-button", and the ones from the drop-down list will get a class="dp-button". As usual, we’ll remove the bullets from the lists, the text-decoration from the links and so on; you know the drill.

3.png

Let’s leave the HTML part for now and go to our CSS file to edit what we have made so far. Let’s style the navigation bar, the unordered list and the buttons.

Next, we’ll give position: relative; to the two lists, while the <nav> element receives position: absolute; so we can place it wherever we want or need. The buttons, mainly the list items, will be 110px wide and have a height of 30px. We’ll give them some color too, so we can see them. More so, we’ll center the text, both vertically and horizontally. In order to obtain a horizontal nav bar, the buttons from the main list will receive float: left;. We also have to make the link cover the entire button, not just the text, so we’ll make the <a> element to be as wide as the button  and we’ll give it the same height.

5

While we’re still here, let’s set a simple hover effect for the buttons and after that, we’ll take a look to see how our navigation bar is so far.

6.png

7.png

meniu16.gif

Now that everything is set, we need to hide the second menu and to make it appear only when the cursor is over the Portfolio button. To do so, the second unordered list needs to be given a height equal to zero and, for it to disappear, the overflow: hidden; declaration must be stated.

8.png

meniu17.gif

The last step is simple. On mouse-over, when the cursor will hover the Portfolio button, the second unordered list will increase its height to 120px, in order to show its four elements (30px * 4 = 120px).

9.png

meniu18.gif

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