What is Digg?Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
30 Comments
- riczho, on 10/12/2007, -0/+1"Designer?" If I just copied/pasted poor code, I'd be ashamed to call myself a designer/web developer.
I cannot believe that they actually used the box model hack for something so simple. By setting a fixed height, the menus would look horrible in pretty much anything larger than the default font size. The correct method would have been to simple set display: block on <a> and use paddings to make space between the text and the border.
For decent examples (with some explanation), I'd recommend http://css.maxdesign.com.au/index.htm.
Personally, I think it's stupid to post such horribly done "Free CSS Vertical Menu Designs" here.
Although examples/viewing code may be a good way to learn CSS, there are so many superior resources to learn the correct way of doing such simple things.
Finally, as most web designers would probably agree with, "Tab Menus" are probably not the most accurate term for these vertical menus (see a superior site, http://css.maxdesign.com.au/listamatic/horizontal05.htm for tabbed menus).
Ricky - Rajio, on 10/12/2007, -0/+1I also dont know if any of you 142+ people who dug this article noticed that the CSS they provide doesnt even come close to validating!
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fexploding-boy.com%2Fimages%2FEBmenus%2Fmenus.html&usermedium=all - wrinkles, on 10/13/2007, -0/+1And if you spend all your time reinventing the wheel, I'd hardly call you smart.
- crapiolio, on 10/12/2007, -0/+1Hey, it's a good start. Every artist needs inspirations from examples.
- wrinkles, on 10/12/2007, -0/+0And a good way to learn code is to read code. Cut and paste is dangerous, though...
- ExplodingBoy, on 10/12/2007, -0/+0Some more free CSS menus designs on the site - http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/ and also - http://www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs/
- analogkid, on 10/12/2007, -0/+0This site gave me a nice foundation for some of the more common CSS design "tricks": http://css.maxdesign.com.au/index.htm
- PillowFight, on 10/12/2007, -0/+0Look...there are people out there that occasionally need a website but cannot afford a professional designer, nor do they have time to learn the intricacies of CSS...like teachers that need a small website for their class, for example.
- agiletech, on 10/12/2007, -0/+0If you haven't kept up with CSS for the past few years, like myself, these examples and those previously posted on digg (http://digg.com/design/Twelve_Free_CSS_Navigation_Menu_Designs) are good demonstrations of what it can do today.
Good code or not, the designs are clean and visually appealing. Don't like these examples? Go make better ones! - Majdaa, on 10/12/2007, -0/+0"And if you spend all your time reinventing the wheel, I'd hardly call you smart."
right on the spot - mrjeffery, on 10/12/2007, -0/+0Anyone know of any good resources to start learning web design from scratch? As the moment im the ultimate web design noob.
- nm3210, on 10/12/2007, -0/+0Yeah, I'm curious as to the purpose of the voice-family in there.
- Rajio, on 10/12/2007, -0/+0Exactly. If you really want CSS but dont understand it or have time to learn, cut&pasting poor code is going to just give you greif.
- Bogtha, on 10/12/2007, -0/+0Why on earth does it set the height in pixels? All that accomplishes is when the user has an increased font size, the whole thing falls apart, except in Internet Explorer that doesn't act according to spec.
Listen, all you need for vertical CSS menus like this is a list of links, display: block on the li and a elements, and adjust padding/margins/color/background to suit for the ul, li and a elements. Then set a width on the ul, something appropriate like 12em or 20%, and you are almost there. Sprinkle a bit more style like :hover and borders and you are done.
This is *not* rocket science. It's just about the most basic CSS layout code possible.
Fixed-width-fixed-height-breaks-with-different-font-sizes-I-don't-know-best-practices-from-a-hole-in-the-ground code just isn't good enough for something so basic. Oh, and to cap it all off, I think this is a dupe too. Lame. - evizaer, on 10/12/2007, -0/+0"Why catch a bus when you can just walk the whole way eh?
Why don't you damned elitists come up with better code and show us?"
You suggest that people never do anything themselves--simply rely on others to do things for you. It's this kind of short-sighted logic that i truly dispise.
There is much to be learned from actually coding this stuff yourself. If you spent a good hour putting together a solid menu yourself, you'd learn a lot AND you wouldn't have to go digging through script sites to do it ever again. - tinus, on 10/12/2007, -0/+0no tabs. poor code. not crossbrowser. not original. no digg.
- DJSdotcom, on 10/12/2007, -0/+0nm3210 - You should Google what you don't know before commenting. The second result will answer your question.
- evizaer, on 10/12/2007, -0/+0a.) Those aren't "tabbed menus" in any sense of the word.
b.) The code is iffy.
no digg. - azazello, on 10/12/2007, -0/+0Nice looking, work great in Firefox...flaky in IE.
If they are not cross-browser safe, they are a bad learning tool & of no use to someone wanting to cut & paste.
Keep trying - Phyrefly, on 10/12/2007, -0/+0Why catch a bus when you can just walk the whole way eh?
Why don't you damned elitists come up with better code and show us? - japanlover, on 10/12/2007, -0/+0this is cool, don't know if they are really "tabs" but they are helpful, thanks...
+digg - Souljacker, on 10/12/2007, -0/+0I see no problem on digging into some reference. Every designer who's pretending he's an unique talent does it.
- studiophi, on 10/12/2007, -0/+0These menus can be made by anybody with a half-decent understanding of CSS & photoshop. A viable method of CSS dropdowns would be great, though.
- sonic767, on 10/12/2007, -0/+0What, is this slashdot day on digg or something? Is it just me, or is everything that made the front page on digg a direct duplicate of something that ran a week ago? This is old news, a repeat digg, and it wasn't worth digging the first time either
- ronaldpoi, on 10/12/2007, -0/+0People who made this kind of things want to help other designers... and that's something i call "useful"... anyway, is always goog, as somebody said, to READ the code and learn from it, instead just copy+paste
- nubtard, on 10/12/2007, -1/+0A learn-by-example site would be nice w3schools has this with HTML but not for CSS which is a shame really.
- casabona, on 10/12/2007, -1/+0A learn-by-example site would be nice w3schools has this with HTML but not for CSS which is a shame really.
nubtard- http://www.w3schools.com/css/default.asp
.... - Rajio, on 10/12/2007, -1/+0Since when is CSS not free?
http://www.dezwozhere.com/links.html - joshspoon, on 10/12/2007, -2/+0web design from scratch - http://www.w3schools.com. it's free and tells you almost everything you need from beginner to expert. for flash http://www.gotoandlearn.com.
- patrickweber, on 10/13/2007, -5/+0Anyone can put paint on a canvas, but it takes an artist to paint the Mona Lisa.
If you are going around and 'borrowing' code and CSS from other peoples sites I would hardly call you a designer.
© Digg Inc. 2009
— Content created and posted by Digg users is