Tutorial to create a pretty cool, simple, horizontal CSS menu

Apr

Tutorial to create a pretty cool, simple, horizontal CSS menu

This is a beginner level tutorial to create a horizontal CSS menu. Many of the beginners are not aware how simple is to create a pure CSS menu. This tutorial helps to create a simple and attractive CSS menu with a cool hover effect. Check out the demo below..

First of all let us write HTML list for menu. Say we have 8 links, as shown in image, here goes the code..

<ul id=”button”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>F.A.Q</a></li>
<li><a href=”#”>Help</a></li>
<li><a href=”#”>Contact Us</a></li>

</ul>

Now, lets go the CSS part, We used only one ID name here to write CSS code. That is ‘button.’

#button {
padding: 0;
}

The CSS code above will remove the padding which will be there in default for list elements.

I am going to create a horizontal menu now, so lets make the list inline

#button li {
display: inline;
}

Okay, now lets make it look beautiful by adding some styles for anchor tag

#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}

Lets make it more attractive by giving hover effects, we are here going to give a special hover effect

#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}

Yeah..! its done! see how simple is to create a CSS menu… A demo..? CLICK HERE!

And don’t forget, if you don’t have a blog, then get one started now. I recommend WP Web Host for all your Wordpress hosting needs. But if you want to get regular, good hosting or some cheap hosting, I recommend WHS.

31 Comments to “Tutorial to create a pretty cool, simple, horizontal CSS menu”

amarie June 15th, 2008 at 7:10 am

but where exactly do you put it?
Will July 8th, 2008 at 12:50 pm

Well done. You did a great job of preserving the SEO benefits of the hrefs, no fancy-schmancy Javascript necessary. Woo!
Theo July 9th, 2008 at 9:34 am

Hi,

This is fantastic, however I can’t work out how to place it in the centre of a page and to have a background the same colour that stretches all the way across the page.

So the menu is always dead centre, no matter what screen size and it appears to stretch right across the page.

Thanks for your help
NasirJumani July 10th, 2008 at 8:38 am

Nice effect…worth my 5 minutes…good work!
CSantala July 10th, 2008 at 11:17 am

very cool tutorial - enjoyable and not overly complex. I learned a few things.

It would be nice to see the finished product somewhere on this page instead of having to download it (nice to have the download, however).

I like it.
Best Design Resources of July 2008 | CrazyLeaf Design Blog August 1st, 2008 at 5:45 pm

[...] Tutorial to create a cool CSS horizontal menu [...]
sankar October 27th, 2008 at 8:05 am

Thanks Boss…

I have learnt because of you that how to do simple css menu….

Regards
Sankar
Tutorial, menu css October 27th, 2008 at 9:19 pm

[...] thedesignsuperhero Archivado en: Tutoriales, css, css, html, menu, Menu [...]
krishna October 29th, 2008 at 8:36 am

Cool Tip. I would like to use this into my blog.

Thanq
Aravind Ajith October 29th, 2008 at 9:07 am

@krishna, nice! I’m very glad to know that this beginner level tutorial helped many..
krishna October 30th, 2008 at 2:26 am

@Aravind
This post has caught up more responses coz the level and ease of presentation of the information from you is good. Its easy to understand and looks like a good tip for SEO’s too. I will certainly keep looking yours website for some more tips n tweaks from you :-)

One suggestion if you can take up here…i would say try to post more information on CSS related information for better designing and importance of CSS for code optimization as you are already into designing.

CSS in SEO that is certainly an interesting point i will be looking for being an SEO professional.

Lets stay Connected !!!
HackSystems » Blog Archive » Another Cool Css Menu October 31st, 2008 at 11:13 am

[...] Home [...]
Como crear un menú horizontal con CSS | November 3rd, 2008 at 5:02 am

[...] The Design Superhero encuentro un tutorial que nos explica claramente como crear un menú horizontal con Css de forma muy sencilla. Ideal para aprender de una vez como tener un sistema de navegación para [...]
Web Grafi 2.0 » Como crear un menú horizontal con CSS November 3rd, 2008 at 10:33 am

[...] The Design Superhero encuentro un tutorial que nos explica claramente como crear un menú horizontal con Css de forma muy sencilla. Ideal para aprender de una vez como tener un sistema de navegación para [...]
Oscar Paz November 18th, 2008 at 4:19 pm

Excelent!!!
nikesh yadav November 20th, 2008 at 1:32 am

Use of CSS Realy nice
Poonam November 21st, 2008 at 1:56 am

Hi,

Nice menu, but i guess it doesn’t works in IE6……any solution??? :)

Poonam
Aravind Ajith November 21st, 2008 at 9:25 am

@Poonam: It works perfectly with IE6.. Consider checking it in the HTML file I have posted with.. [ http://72.18.130.22/~thedesig/wp-content/uploads/2008/04/css_menu.html ]
30 Exceptional CSS Navigation Techniques April 16th, 2009 at 12:37 pm

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
30个特殊的CSS导航技术 « Burning Fav’s Blog April 18th, 2009 at 11:42 pm

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
30 Exceptional CSS Navigation Techniques | Blog YODspica Ltd April 19th, 2009 at 3:40 pm

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
30 Exceptional CSS Navigation Techniques « Livefont Interactive April 20th, 2009 at 1:59 am

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
Nvmind. | Interfaces in PHP, MySQL, XHTML/CSS, ActionScript and other technologies / 30 Exceptional CSS Navigation Techniques April 22nd, 2009 at 4:25 am

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
Menus basados en Css | {Medicanraz Blog} April 23rd, 2009 at 9:37 pm

[...] el código HTML y CSS de cada menú para que lo personalices por tu cuenta. El otro es un solo menu y una sola maravilla. This was written by admin. Posted on Jueves, Abril 23, 2009, at 10:37 PM. Filed under Bloggin. [...]
Think Studio » Blog Archive » 30 Exceptional CSS Navigation Techniques April 25th, 2009 at 8:59 pm

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
30 Exceptional CSS Navigation Techniques | Designurimagination Blog - Let Your Imagination Fly April 26th, 2009 at 10:50 am

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
30 CSS Navigation Techniques « Webdesignchennai’s Blog April 29th, 2009 at 3:23 am

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
Loves sunshine » Blog Archive » 30+css导航技术 May 4th, 2009 at 10:23 pm

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
jsssc - 30个特殊的CSS导航技术 May 6th, 2009 at 4:08 am

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
Tecniche di navigazione con CSS - Caputo’s blog - Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy May 11th, 2009 at 3:53 am

[...] 28. Cool, Simple, Horizontal CSS Menu [...]
AMB Album » 30 Exceptional CSS Navigation Techniques May 26th, 2009 at 9:18 pm

[...] 28. Cool, Simple, Horizontal CSS Menu [...]