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!


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.


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.


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:


• 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").


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:


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:


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).


Time to create the .btn-arrow now.


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.



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.


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.


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


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.


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:


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



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



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



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



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



And done! Let’s test the hover effect!


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!

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.


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


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.


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.


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.




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.



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).



Final part – Another hover effect (3)

For the moment, this will be the last example with just a hover effect that I will show and further on, in my next lessons, I will start to present what steps need to be taken in order to create a drop-down or slide-down navigation bar.

Once again, to make it easier for us, we will use the same structure from our first lesson – Another hover effect (1), and from there we will begin with the CSS code. Our example for today looks like this:


Like in our previous lesson, I have already prepared everything we need inside our CSS file – with very few changes, so that we only need to edit the sliding elements.

The HTML structure and CSS code

We can see that there are two sliding elements which appear and start to move from the button’s center and that they change their position towards its extremities, where they also stop. As usual, I will choose different background colors for the sliding elements, in order to easily identify them: magenta for the one on the left side, cyan for the one on the right side.


Of course, we need to declare position: absolute; so that we can overlap them, and then we need to place each of them in the right spot, meaning the button’s center.

The .slide-tl (slide-to-left) and .slide-tr (slide-to-right) classes will each get 50px, the first one to the left, the second one to the right. Since we are already here, let’s declare transition: all 0.6s; so that we can see them how they move on mouse-over.


Now, what we want on mouse-over is that the sliding elements move on their assigned trajectories. The first one to move to the left by 50px – meaning left: 0;, and the second one to move to the right by 50px – meaning right: 0;.



Next, we will hide the sliding elements in their starting position and, during the transition, we will make them appear, we will make them visible. To do this, we need to set the opacity declaration to be zero, in the starting position, and it to be 1 in the final position.



Now, all that is left to get to the final result, is to set the tiny details, such as a background color for the sliding elements and the hover effect for the button:



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.


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.


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:

A single button
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:


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.


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.


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.


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.


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.


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.


The result:


Now, all the elements are overlapped this way:


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.


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.



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.



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!

A simple menu • Meniu simplu + CSS3 (3)

Pornind de la meniul pe care l-am creat în Meniu: simplu + CSS3 (partea 2), vom face unul vertical. Acest lucru este foarte simplu de realizat, deoarece i-am dat deja formă, am atribuit culoare, atât fundalului butoanelor cât şi textului de pe acestea, şi am setat efectul de hover dorit.

Pentru a-l face să arate exact ca în imaginea de mai jos, nu trebuie decât să înlăturăm proprietatea float din declaraţia float: left; atribuită elementelor listei neordonate:


Ce este frumos la acel efect pe care l-am setat la hover este faptul că face butonul să pară că se “ridică” din meniu, că se separă de restul butoanelor şi că îşi măreşte puţin dimensiunile.

Din acest punct, nu ne rămâne decât să îl modificăm, din punct de vedere vizual, aşa cum dorim şi, ca să dau câteva exemple:

• putem adăuga o bordură (border) în partea de jos a butoanelor, astfel încât să pară că sunt delimitate; deoarece nu dorim ca şi ultimul buton să aibă o bordură în partea de jos, vom recurge la selectorul pseudo-class – :last-child.


• putem seta ca fiecare buton să gliseze spre dreapta în momentul în care cursor-ul mouse-ului se află deasupra; am scos umbra pentru a se vedea clar rezultatul.


Şi, de aici înainte, suntem limitaţi doar de imaginaţie.

În lecţia viitoare intenţionez să modific acelaşi meniu, dar în ideea de a îl face puţin mai interesant şi mai frumos. Pe curând!

A simple menu • Meniu simplu + CSS3 (2)

Gata. Avem structura facută, am eliminat tot ce nu doream să apară, iar acum hai să ne apucăm de treabă!

Aşa cum am specificat în încheiere, în Meniu: simplu + CSS3 (partea 1), vom începe prin a da formă şi culoare meniului; până la finalul acestei lecţii, meniul nostru va arăta exact ca cel din imaginea din partea dreaptă.


Ca prim pas, hai să punem toate link-urile pe aceeaşi linie orizontală. Pentru a realiza asta, trebuie să atribuim float elementelor din interiorul listei neordonate.


După cum putem vedea, link-urile sunt îngrămădite şi arată neestetic; nu vrem asta. Propun să le delimităm sau, mai bine zis, să le individualizăm, aşa că le vom seta o lăţime (width) şi o înălţime (height). Apoi, din moment ce numărul de caractere diferă de la cuvânt la cuvânt şi, deoarece ele sunt, by default, aliniate la stânga, le vom poziţiona pe centru.

Ca să le putem evidenţia şi mai bine, vom adăuga şi o culoare de fundal, dar vom schimba şi culoarea scrisului pentru a fi în contrast cu fundalul. Mai mult de atât, vom adăuga şi un spaţiu în interior (padding), ca să fie clar că avem de a face cu nişte butoane.


Acum, da, mai arată şi el a meniu. Dar încă nu am terminat. Trebuie să realizăm efectul de hover, schimbarea care va avea loc în momentul în care vom plasa cursor-ul mouse-ului deasupra unuia dintre butoane. Ca acest efect să poată să fie vizibil în întregime, hai să adăugăm listei neordonate o margine (margin) de 20 de pixeli, pentru a o îndepărta de marginile ferestrei browser-ului.


Ca efectul de hover să poată să fie vizibil trebuie ca, în momentul în care cursor-ul mouse-ului va trece pe deasupra unuia dintre butoane, fundalul şi culoarea textului să se modifice. În plus, pentru ca tranziţia de la o culoare la alta să nu aibă loc instant, animaţia să pară “ca din topor” – cum e expresia, vom adăuga o întârziere de 0.3 secunde. Pentru ca lucrurile să fie şi mai interesante, vom adăuga şi o mică umbră la acest efect de hover.


De aici, modul în care putem să facem acest meniu să arate nu e restrâns decât de imaginaţia noastră. Spre exemplu:

• putem distanţa butoanele;


• putem rotunji capetele meniului;


… şi putem face multe altele.

În partea următoare vom realiza, pornind tot de la acest meniu, unul vertical, ca să vedem puţin diferenţele.