or 02-9262-7770 
| Building a Mouse-Over Menu Using CSS | |
By Eddie Machaalani |
Published
12/5/2005
|
Programming
|
Rating:
|
|
|
Building a Mouse-Over Menu Using CSSIntroduction I remember when I started building web sites. Creating a dynamic menu’s meant creating a series of images: one for the static image, one for the mouse-over image, and at times a separate image for when a click occurred. After this, I piled on the JavaScript to preload the mouse over images and change the images, depending on which menu button had the mouse cursor over it. Phew! It was a lot of work.This in itself was tedious. Not only because I had to create up to 3 separate images, but also because it increased page load time, as well as being a pain when the time came to create a new menu item for the same site. With the evolution of CSS over the past couple of years, however, this process has been greatly simplified. In this article I’ll show you a very simple technique to create mouse over menu’s that load almost instantly, that look great, and that are very easy to maintain. Anyway, let’s get started! The Finished Product Before I get started, here’s a picture of what the end result will look like. Keep in mind that you can easily change the fonts, sizes, colors to match your web sites look and feel. Search Engines Care If you’ve been involved in any form of search engine optimization then you’ll know that search engines use links quite heavily to determine search rankings and relevancies.Why does this matter? Simply because using text or style sheet driven menu’s mean search engines such as Google can read your links. If we used images for our menus, Google would know there’s a link, but it wouldn’t be able to index the actual words used to create the link. Building the Menu Building the menu is a simple process. First, we’ll start by creating the background of the menu. This is the dark gray bar that you can see above.Insert this div inside the body tags of your web page, where you want the menu to appear: <div class=toolbar></div> Next, create the stylesheet class for the toolbar and add it before the closing </head> tag in your web page: <style> .toolbar { background-color: #313031; padding: 5px 0px 5px 0px; } </style> We added some padding to the top and bottom of the toolbar div tag to create some spacing between the text and the background border. Notice the following expression in the style sheet: padding: 5px 0px 5px 0px Here, we’re setting the padding on the top, right, bottom and left sides of the div respectively. Now we’ll place some menu links inside of the toolbar div, and then add some CSS to format the links, thus emulating that menu button look that we’re after: <div class=toolbar><a class="menu" href="menu1.html" title="Visit Menu Item 1"> Menu Item 1</a></div> The title tag causes a tool tip to be displayed when the cursor is placed over the link (or menu button). Here’s the CSS to create the basic menu buttons: .menu { border-right: 1px solid white; text-decoration: none; background-color: #313031; padding: 5px; }  Here, we simply place a border on the right side of each button to create the 1 pixel of white space which acts as a separator between menu items. We then remove the underline from each link, by using the text-decoration: none attribute. Finally, we replace the background color of the menu item to match the background color of the toolbar div and add a padding of 5 pixels to create our menu button. Whilst this works, it obviously doesn’t look very pretty. So let’s add some formatting to the text of the buttons: .menu { border-right: 1px solid white; text-decoration: none; background-color: #313031; padding: 5px; color: white; font-family: Tahoma; font-size: 8pt; font-weight: bold; }  Ah. Much better! We’re almost done -- all we need now is the mouse-over color change. Whilst this used to involve Javascript and can still be done using some simple Javascript code, I find it easier to use the CSS hover attribute, which basically defines the look of a link when the mouse cursor moves over it: .menu:hover { background-color: #5A8EC6; } Remember that the hover attribute only works on links, i.e. <a href…></a> tags. We’re done That’s really all there is to it! We can now add more link tags to create the rest of the menu. The complete code looks like this:<style> .menu { color: white; font-family: Tahoma; font-size: 8pt; font-weight: bold; border-right: 1px solid white; text-decoration: none; background-color: #313031; padding: 5px; } .menu:hover { background-color: #5A8EC6; } .toolbar { background-color: #313031; padding: 5px 0px 5px 0px; } </style> <div class=toolbar><a class=menu href="menu1.html" title="Visit Menu Item 1"> Menu Item 1</a><a class=menu href="menu1.html" title="Visit Menu Item 2"> Menu Item 2</a><a class=menu href="menu1.html"> Menu Item 3</a></div> And there you have it. A complete menu for your next website, in only a few lines of code! |
|
Spread The Word
Related Articles
36 Responses to "Building a Mouse-Over Menu Using CSS" 
Author/Admin)|
said this on 04 Jul 2006 7:13:25 AM CDT
cool ones ..I love you .. : )
|
|
said this on 15 Aug 2006 5:57:09 PM CDT
Nice Example, works well!
|
|
said this on 02 Sep 2006 9:46:13 PM CDT
Thank you!!!! helped a lot
|
|
said this on 12 Dec 2006 9:38:43 AM CDT
What else does one need. Thanks!
|
|
said this on 28 Dec 2006 5:59:52 PM CDT
Stunning. Been on the net all day just looking for something similar. Great stuff man!
|
|
said this on 11 Feb 2007 6:37:02 AM CDT
Very well done... a tutorial that an old guy can read, Helped me out. Now I just need to figure out how to add a drop down submenu.
|
|
said this on 18 Mar 2007 9:56:09 AM CDT
Easy for understand and very effective code
|
|
said this on 23 Mar 2007 6:50:20 PM CDT
great tutorial, quick easy and accurate!
|
|
said this on 22 Apr 2007 7:25:20 PM CDT
This article is great. I'm just wondering if it's possible to add a drop-down menu with CSS too?
|
|
said this on 26 Apr 2007 1:52:30 AM CDT
This is not only a great tutorial, but the menu bar is super easy, thanks!
|
|
said this on 08 May 2007 5:53:33 AM CDT
Very good n effective code...
|
|
said this on 29 May 2007 1:32:41 PM CDT
Really execellent piece of information
|
|
said this on 20 Jun 2007 4:15:59 AM CDT
really very east to understand
|
|
said this on 26 Jun 2007 6:30:54 PM CDT
This is wonderful but I would love to see how you would use target into the menu for frames.
|
|
said this on 24 Jul 2007 1:27:08 PM CDT
well expressed in a simple and short tutorial
|
|
said this on 07 Aug 2007 12:26:35 PM CDT
Very Simple and effective!! Thanks
|
|
said this on 08 Aug 2007 5:36:19 AM CDT
Exelent but how do you set the buttons to a link?
|
|
said this on 14 Sep 2007 10:50:27 AM CDT
Nice and Simple! Does the job! Thank you for the nice write up!!!!
|
|
said this on 17 Sep 2007 8:14:31 AM CDT
Realy wonderfull...
|
|
said this on 19 Sep 2007 2:33:17 AM CDT
Cool .. this is what i just wanted to know !
Great Work thanks a lot ! |
|
said this on 03 Oct 2007 6:11:11 AM CDT
This is just what I want. Simple but great. Thanx
|
|
said this on 23 Oct 2007 2:20:45 AM CDT
a very handy tool, thankyou,
would be ideal with 2 revisions, 1. that it uses an external style sheet rather than all in the html doc, and, 2. is there a generator for mouse over roll down menus, that is, where each menu item reveals a number of alternative choices. still a great tool |
|
said this on 28 Oct 2007 6:16:18 PM CDT
Great! Exactly what I needed. Thanks so much!
|
|
said this on 15 Nov 2007 8:34:46 PM CDT
Very awesome, a perfect and extremely helpful tutorial :D
|
|
said this on 26 Nov 2007 11:16:38 AM CDT
Thanks a lot. I'm using it on my site now.. I used to do the same thing as you (javascript and those images). This saved me a lot of time! :)
|
|
said this on 15 Dec 2007 11:43:38 AM CDT
Simply brilliant. Best part is minimal use of javascript. Would work even with JavaScript disabled. Thanks a ton.
|
|
said this on 01 Jan 2008 5:05:54 AM CDT
this great, much simple. easy and superb
THNX LOT |
|
said this on 07 Jan 2008 12:13:20 PM CDT
Exactly what I needed. Thanks!
|
