TUTORIAL: CSS Menu (Basic)

PixelPusher · 04-01-2010, 05:51 PM

For all those who have asked about how to create a menu with a list (and not a table), here is a basic menu created with an unordered list and CSS.

Markup

HTML Code:

<ul class="menu">
   <li><a href="">home</a</li>
   <li><a href="">products</a</li>
   <li><a href="">press</a</li>
   <li><a href="">support</a</li>
   <li><a href="">contact</a</li>
</ul>

CSS

Code:

body {
margin-top:100px; /* JUST USED TO MOVE LIST DOWN PAGE */
}
ul, li, a {
margin:0;
padding:0;
}
ul.menu {
overflow:hidden;
}
ul.menu li {
list-style:none;
float:left;
border-top:solid 1px #bbb;
border-bottom:solid 1px #bbb;
border-right:solid 1px #bbb;
}
ul.menu li:first-child {
border-left:solid 1px #bbb;
}
ul.menu li a {
font:bold 11pt Tahoma, san-serif;
display:block;
height:40px;
line-height:42px;
color:#555;
text-align:center;
text-decoration:none;
text-transform:capitalize;
padding:0 30px;
background-color:#ddd;
}
ul.menu li a:hover {
color:#fff;
background-color:#666;
}

anna · 04-01-2010, 08:22 PM

That is awesome of you to post these tutorials, thanks Pixel!!!

PixelPusher · 04-02-2010, 10:03 PM

Hey no problem your welcome anna.

LouTheDesigner · 04-08-2010, 10:32 PM

Hi PixelPusher.

By any chance, are you getting this code from "Transcending CSS" by Andy Clarke?

I'm not trying to call you out on any "plagiarism" of some sort, but the code is so familiar that I couldn't ignore asking. It's a great book by the way. Highly recommended.

-Lou

PixelPusher · 04-09-2010, 03:10 PM

Lou,

No offense taken, and I did write this code myself. Further, I have never read the book (or heard of Clarke). This method of building a menu with a list is a common/familiar technique, and I was not claiming any rights to it, just simply showing others here how I go about the process.

The fact that I wrote code on par with a published author of CSS is quite gratifying though, so in an indirect way, thanks for the compliment!

Ennesus · 04-14-2010, 08:59 AM

nice article, but one remark about the pseudo class :first,
if you are developing for ie6 it doesn't work.

so why don't you give the <ul> a border-left property ?

-------------------------------------------------------------------------------
if you don't make websites compatible with ie6 don't bother this post

-------------------------------------------------------------------------------

Yes you are correct, psuedo classes like "first:child" will not be recognized by IE6. This can be solved by simply making a class to substitute.

LouTheDesigner · 04-14-2010, 06:37 PM

Ennesus,

Isn't designing for IE6 a somewhat superfluous task? When I worked in technical support, I would always have to ask the caller what web browser they were using (nobody every knew unless they were using a Mac; one person actually said they were using "Dell"). It was extremely rare that they would say IE6.

In my opinion, why cater to people who are SO far behind in technology? Saying that "if you don't make websites compatible with ie6 don't bother this post" is like saying don't use Flash because some people don't have it. The odds are, those people using IE6 are not valued visitors.

-Lou

Ennesus · 04-14-2010, 09:26 PM

it depends of the visitor you expect on your website,
a lot of companies has IE6 because they run their intranet on this old outdated browser,
and some customers want full cross-browser compatibility websites (including ie6)..

Updating a company structure for todays standard cost companies a lot of money,
that's why some people are forced to use this browser

so get your facts straight

LouTheDesigner · 04-14-2010, 11:13 PM

I'm going to kindly dismiss your rebuke. You say "it depends on the visitor you expect on your website." My point was, don't cater to them; force them to move on. People and companies who disregard the enginery of modern software are actively hindering the technological enterprise. If a client ever demanded cross-browser compatibility (though only about 10% actually know what it is) and wanted their site to work with IE6, then I would not take the job. Simple as that. As a web designer and technical support specialist I have a moral obligation to push technology further, along with the users on the other side of that digital divide. I bet, with a large enough sample size, we can show that there is a correlation between companies with outdated software and companies that are failing.

-Lou

Ennesus · 04-15-2010, 12:43 PM

I totally agree with your opinion, I give the visitors a warning so they be aware of their outdated browser, and I give them a link to upgrade on my site,

but I also had some customers who want ie6 support, and believe me as a webddesigner/webdeveloper I hate to engineer for ie6.

04-02-2010, 10:03 PM	#3
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Hey no problem your welcome anna. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

04-01-2010, 08:22 PM	#2
anna Platinum Member Join Date: Jul 2009 Location: Michigan Posts: 549	That is awesome of you to post these tutorials, thanks Pixel!!!

04-08-2010, 10:32 PM	#4
LouTheDesigner Gold Member Join Date: Oct 2008 Location: Yonkers, NY Posts: 495	Hi PixelPusher. By any chance, are you getting this code from "Transcending CSS" by Andy Clarke? I'm not trying to call you out on any "plagiarism" of some sort, but the code is so familiar that I couldn't ignore asking. It's a great book by the way. Highly recommended. -Lou

04-09-2010, 03:10 PM	#5
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Lou, No offense taken, and I did write this code myself. Further, I have never read the book (or heard of Clarke). This method of building a menu with a list is a common/familiar technique, and I was not claiming any rights to it, just simply showing others here how I go about the process. The fact that I wrote code on par with a published author of CSS is quite gratifying though, so in an indirect way, thanks for the compliment! __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

04-14-2010, 08:59 AM	#6
Ennesus Bronze Member Join Date: May 2009 Posts: 49	nice article, but one remark about the pseudo class :first, if you are developing for ie6 it doesn't work. so why don't you give the <ul> a border-left property ? ------------------------------------------------------------------------------- if you don't make websites compatible with ie6 don't bother this post ------------------------------------------------------------------------------- Yes you are correct, psuedo classes like "first:child" will not be recognized by IE6. This can be solved by simply making a class to substitute. Last edited by PixelPusher; 04-30-2010 at 04:01 PM.

04-14-2010, 06:37 PM	#7
LouTheDesigner Gold Member Join Date: Oct 2008 Location: Yonkers, NY Posts: 495	Ennesus, Isn't designing for IE6 a somewhat superfluous task? When I worked in technical support, I would always have to ask the caller what web browser they were using (nobody every knew unless they were using a Mac; one person actually said they were using "Dell"). It was extremely rare that they would say IE6. In my opinion, why cater to people who are SO far behind in technology? Saying that "if you don't make websites compatible with ie6 don't bother this post" is like saying don't use Flash because some people don't have it. The odds are, those people using IE6 are not valued visitors. -Lou

04-14-2010, 09:26 PM	#8
Ennesus Bronze Member Join Date: May 2009 Posts: 49	it depends of the visitor you expect on your website, a lot of companies has IE6 because they run their intranet on this old outdated browser, and some customers want full cross-browser compatibility websites (including ie6).. Updating a company structure for todays standard cost companies a lot of money, that's why some people are forced to use this browser so get your facts straight

04-14-2010, 11:13 PM	#9
LouTheDesigner Gold Member Join Date: Oct 2008 Location: Yonkers, NY Posts: 495	I'm going to kindly dismiss your rebuke. You say "it depends on the visitor you expect on your website." My point was, don't cater to them; force them to move on. People and companies who disregard the enginery of modern software are actively hindering the technological enterprise. If a client ever demanded cross-browser compatibility (though only about 10% actually know what it is) and wanted their site to work with IE6, then I would not take the job. Simple as that. As a web designer and technical support specialist I have a moral obligation to push technology further, along with the users on the other side of that digital divide. I bet, with a large enough sample size, we can show that there is a correlation between companies with outdated software and companies that are failing. -Lou

04-15-2010, 12:43 PM	#10
Ennesus Bronze Member Join Date: May 2009 Posts: 49	I totally agree with your opinion, I give the visitors a warning so they be aware of their outdated browser, and I give them a link to upgrade on my site, but I also had some customers who want ie6 support, and believe me as a webddesigner/webdeveloper I hate to engineer for ie6.