artist-confessions:

submitted by -doodle-fox

turtle-trainer:

CSS Tutorial: Navigation Menu

Difficulty: Easy
Prerequisites: Basic HTML and CSS

There are plethoras of ways to achieve a navigation menu, be it using lists or tables, but I prefer to do it by grouping a bunch of links together within a div element. This is what we will be creating:

Please submit your questions to this blog by clicking the Ask link should you encounter any questions regarding to this tutorial. Do not send questions to my IMVU (TurtleTrainer). Feedback is also wanted and appreciated. Thanks.

Note: Please view this tutorial on my blog. Do not view this on your dashboard.

---

The Markup

Here is how my HTML will look. All I have done is wrap a div element around the links. Be sure to give the div element a name, using either id or class. I also added breaks (<br>) after each link to ensure that a space will appear beneath each link.

<div id="navigation">
 <a href="http://google.com">Link 1</a><br>
 <a href="http://yahoo.com">Link 2</a><br>
 <a href="http://bing.com">Link 3</a><br>
</div>

The CSS

Now that we have the HTML written, we can move to the more important part of this tutorial: the stylesheet. I am going to assume that you have some knowledge about CSS links (a:link, a:visited, etc.) and CSS in general. If not, brushing up on some tutorials about CSS would be beneficial. In case you are confused on what CSS links are, these are what I am referring to:

a:link, a:visited, a:active, a:hover

Before we start on the links, we first need to specify the width of the navigation menu. You may choose any width you would like, but for this tutorial, the navigation menu will be 200 pixels wide.

#navigation {    
width: 200px;  
} 

These next steps are essentially the same as styling normal links. The only difference is that descendant selectors (elements nested inside another) are involved. Here is a visual representation of descendant selectors:

Now that we have an idea of what descendant selectors are, we can apply it to our case.

Add the outer element to each CSS link selector, like so:

#navigation {    
width: 200px;  
} 

#navigation a:link, #navigation a:visited, #navigation a:active {    

} 

#navigation a:hover { 

}

Note: The symbols in front of each outer element may be different, depending on your choice of using id or class. If you chose id, use a flat sign (e.g., #navigation); if you chose class, use a period (e.g., .navigation).

Basic Properties

The navigation menu looks rather plain and ugly, does it not? Well, here comes the fun part: adding properties to the stylesheet. From this point on, everyone’s stylesheet will look different since every person prefers his or her layout to look a certain way. The next steps will give a glimpse on what properties people may use in their stylesheet.

We want our navigation menu to remain looking like a list, so we must use the display: block property.

#navigation {    
width: 200px;  
} 

#navigation a:link, #navigation a:visited, #navigation a:active {    
 display: block; 
} 

#navigation a:hover { 

}

We should change the font, the text color, and the background. I will also add text-decoration: none to remove the underlining and letter-spacing: 1px to add a 1px space between each letter.

#navigation {    
 width: 200px; 
} 

#navigation a:link, #navigation a:visited, #navigation a:active {    
 display: block; 
 font: 10px "Century Gothic";
 letter-spacing: 1px; 
 color: #FF005A !important;
 text-decoration: none; 
 background-color: #222;
} 

#navigation a:hover { 

}

This is what the product should look like thus far:

Notice how the left side of the text looks squished? We can add the padding property to surround the text with a small amount of space.

#navigation {    
 width: 200px; 
} 

#navigation a:link, #navigation a:visited, #navigation a:active {    
 display: block; 
 font: 10px "Century Gothic";
 letter-spacing: 1px; 
 color: #FF005A !important;
 text-decoration: none; 
 background-color: #222;
 padding: 5px; 
} 

#navigation a:hover { 

}

Much better…

We can move onwards to adding properties to the hover option. All I am going to change is the text color, the background color, and the spacing between each letter.

#navigation {    
 width: 200px; 
} 

#navigation a:link, #navigation a:visited, #navigation a:active {    
 display: block; 
 font: 10px "Century Gothic";
 letter-spacing: 1px; 
 color: #FF005A !important;
 text-decoration: none; 
 background-color: #222;
 padding: 5px; 
} 

#navigation a:hover { 
 letter-spacing: 5px;
 color: #fff !important;
 background-color: #C42D4A;
}

Result:

Transitions

Many of you have asked me how my links smoothly change colors when they are hovered. It’s quite easy. Just add the transition property to your stylesheet. This website has a better explanation of how the transition property works.

We are going to add the following to our stylesheet:

-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;

.

#navigation {    
width: 200px;  
} 

#navigation a:link, #navigation a:visited, #navigation a:active {    
 display: block; 
 font: 10px "Century Gothic";
 letter-spacing: 1px; 
 color: #FF005A !important;
 text-decoration: none; 
 background-color: #222;
 padding: 5px; 
 -webkit-transition: all 1s ease-out;
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -ms-transition: all 1s ease-out;
 transition: all 1s ease-out;
} 

#navigation a:hover { 
 letter-spacing: 5px;
 color: #fff !important;
 background-color: #C42D4A;
}

The is the final look of the navigation menu:

You can play around with the coding here.

---

Yes, I agree that the current navigation menu is not really exciting to look at, but the goal of this tutorial is to provide a basic knowledge on how to code a navigation menu. I may create another post that includes different examples of navigation menus in the future.

Thank You So Much!!!

bok

Bok? OTL I Can´t Understand It ;u;

for more i try to learn how to make themes i can´t its so much difficult i wish to find someone that can teach me ;u; i really want to make beautiful stuff but its not so easy like i was thinking wow theme makers are really heroes for me at the same like tutorials makers ;v; ugh Thanks God there is so much good people who can teach to people like me who don´t have any money for pay for it ;—-;

?