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

Hey! Can’t really believe it has been so long since my last post! Shame on me! Nevertheless, I’m back and ready to finish the navigation bar, as promised. Can’t let this year pass without finishing what I’ve started, right?! So… here we go!

The drop-down menu needs to appear, so we need to create it. That’s simple! Inside the Portfolio button we’ll add a new <nav> tag which will contain the second menu, made up of an unordered list and three list items, which means that our drop-down menu will have three buttons.

Each element will receive its own id and/or class, as follows: the second <nav>id="second-nav", the <ul> –  id="second-ul", each <li> – class="second-btn". There will be something different about the drop-down menu. We’ll change the orientation of the arrows so that instead of pointing to the right, they will point to the left. To do so, the tip of the arrow will come first in our structure, and its tail will follow. Everything should look like this:


The rest is the same as the main navigation bar. The CSS part, I mean. We need to shape the buttons, position them, color them and that’s it! Here’s the CSS code:


All done!

Hope to see you back here in the new year to come! Cheers!


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: Logo

You are commenting using your 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