CSS online training course

CSS lesson 12, Making a navigation menu with buttons

Navigation menu with buttons

Because menus are very important and there are many ways to make one i would like to tell you about a method which doesnt get alot attention. But with some creativity you can create a very nice looking personalized navigation menu.

Ik will give a example where i take 2 buttons. 1 for the standard color (....) and one for the hover color (....). You can also use your own image for this.
The text will be inserted by the CSS.

These are the buttons which i will use in the following menu .
But once again you can design any kind of image you would like for this.

The html of this menu is very simple.
I added the class-current though to show on which page i am currently on.
This page will get the same background as the hover.

The css will be as followed : Look to it closely and experiment with it as you like.

And this would be the result :

Float and clear

By using this property you can make a element get another position than normally. Standard value is none. Values that can be chosen are : none, left or right.

A way to outline a element compared to another element.
This way you can make a image appear left of a text, of course this can not only be done with images but also with every other element.

In the example above you can see that i put at the class float left which makes the image (example.jpg) appear at the far left.


Clear says if floating elements are allowed right or left of a element.
The standard value is none.
If you choose none, no floating elements may ocur at the sides of a element>
Other values are : left, right and both.

Non cleared elements which follow to a float or different floats will appear in the position most nearest to the floats.

You use clear to determine on which side a non floating element may appear. When you use both nothing may appear on both sides, with the left and right command you determine if it cant appear on either side. Most often this is used to define a footer on the bottom of a page.