digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

Advanced CSS Menu - Web Designer Wall

webdesignerwall.com — How to slice up a menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let ’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSSposition property.

Bury
show profanity settings
expand all
  • oneon, on 10/30/2007, -7/+5Nice thanks ....
    • mobilitatis, on 10/30/2007, -6/+1This one is more trendy, usable and accessible
      http://web2.0flow.com/how-not-to-tab-a-navigation- ...
    • simpleid, on 10/30/2007, -0/+1how many variations of the same thing need to be dugg up before you realize what you're reading is the same freaking tutorial as the last some ten thousand submitted daily. i don't complain about dups, but these are annoying, i'm taking CSS and Design off of my news filter.
  • dynacrylic, on 11/03/2007, -11/+15I love the floral design in the background.
    • silverchrysalis, on 10/30/2007, -0/+5reminds me of some of the schoolbooks that were designed in the late 70s/early 80s
      • TyR88, on 10/30/2007, -0/+5the very same books that they still use at the school i went to.
    • badnewsblair, on 10/31/2007, -1/+6I agree. I really like the background on this page. Actually, I'm more inclined to read a tutorial on that then the navigation shown here.
  • FireSlash, on 11/03/2007, -22/+6But does it work in lynx?
  • m0nkei, on 10/31/2007, -9/+1http://www.duggmirror.com dugmirror seems to be working.
  • sensor, on 11/03/2007, -32/+7Css/HTML is not coding.
    • Lutz, on 10/31/2007, -7/+6Yes it is, though it's probably not 1337 enough for you...
    • eliburford, on 10/31/2007, -2/+10What is it?
    • iffypop, on 11/01/2007, -1/+14You constantly come accross "good" developers who cant code html/css for *****.
      • Syntaxis, on 10/31/2007, -12/+2You have designers, front-enders and programmers. A designer shouldn't HTML, a front-ender shouldn't write code and a programmer shouldn't design. The reverse is also true, a programmer shouldn't need to worry about front-ending, a front-ender shouldn't be designing and a designer shouldn't write code.

        Some people can combine 2 or 3, but that's rarely a good combination, or only a good combination in their mind and the minds of equally retarded peers. In conclusion, professionals specialize themselves and don't do things below (or above) their paycheck.

        That said, the article in this Digg-post is neither advanced nor "coding" - it's HTML and CSS.. the basics, really, of anyone professional enough to bother working with professional people. The MVC-idea if you will, Model, View, Control. But most people here aren't professionals I suppose, so.. sorry for sounding "elitist" (not intended that way), but if you consider this example "advanced coding".. well.. you're not that experienced.
        • tdous, on 10/31/2007, -1/+7You automatically negated your entire set of entrenched opinions when you decided an opposing point of was was "retarded".
        • amadeusdemarzi, on 10/30/2007, -0/+4you do realize that digg's designer is also a front end coder?

          Retard.
        • BradMW, on 10/30/2007, -0/+3I think you're confused on what the "model" part of MVC is for starters. The rest of your flaws are too obvious to state.
        • simpleid, on 10/31/2007, -0/+4i'm a programmer who has been designing since around 8 years of age. i can do both better than most. so screw you. ;-) probably because i tend to think of everything as an art. which it is. and everything has a science to it even art. ;-) x2
        • strictnein, on 10/31/2007, -0/+3Well, *****, and here I am doing front end coding (along with minor image manipulation) and back end programming. I guess I should just go shoot myself because I'm a retard.

          If you're a backend programmer, you probably should be able to knock out some decent XHTML. It's really not that tough.
    • rompom7, on 11/03/2007, -3/+28It is not programming. It's coding. Coding markup and css is still coding.
    • Bdog2g2, on 10/31/2007, -0/+9Just because you don't know how to do it well, doesn't mean its not coding.
  • albatross5000, on 11/05/2007, -5/+60Nothing at all "advanced" about this at all. It could be done many different ways, very simply.
    • Bdog2g2, on 11/05/2007, -0/+11Like 98% of all things on the internet. There's not such thing as ONE solution.
    • svivian, on 10/31/2007, -0/+4It's not advanced but it is over-complex, with all the s and whatnot. And because it doesn't use sprites, the images don't load instantly - that is something I thought we all learned back in the javascript menu days...
      • svivian, on 10/31/2007, -0/+1my comment was meant to say "with all the spans and whatnot", except digg seems to remove all HTML tags...
  • houndeyex, on 10/31/2007, -10/+3Site got ooooooooooowned!
  • justdawson, on 10/31/2007, -9/+1Wordpress = You Fail.

    So I'm not being a complete ass, I suggest http://mnm.uib.es/gallir/wp-cache-2/
    • thailand1972, on 10/30/2007, -3/+1No, you never get to avoid being Dugg down by stating the obvious about WP - too many WP fanboys here (i.e. bloggers who use WP and will defend WP no matter how terrible it is, because they don't want to/don't know how to move to another platform).
    • simpleid, on 10/31/2007, -0/+2Wordpress is garbage, and if you can't accept it you're blind to the obvious. It takes more than looking pretty to be good. Anything can be made to look pretty. Wordpress was designed to run off of retarded monkeys. It can't handle a bandwidth load created by more than two users.
  • jeremyduffy, on 10/31/2007, -8/+7So... Why couldn't he just have a foreground and background image where the background is the "hover" image and make the foreground image transparent when hovered on? Either that or just switch the image source from one to the other. Or use the css "display" property and just have them both occupy the same cell of a table with only one at a time displayed? Or (etc. etc.)

    Position is tricky. Almost any of the things I mentioned would work just as well without as many questions of how or IF it would work cross-browser.
    • Malachai, on 10/30/2007, -0/+11As far as I know, that method prevents having to load multiple images, and prevents the hover image not being loaded by the time one hovers over it.
      • noflashlight, on 10/30/2007, -1/+0You can preload those images with javascript.
      • subsomatic, on 10/31/2007, -0/+0and if javascript isn't enabled? the whole idea is that this is a very clean and simple way to accomplish rollover images. no preloading and no waiting.
    • mobilitatis, on 10/31/2007, -0/+17"..just have them both occupy the same cell of a table.."
      You are still using tables, OMG!
  • Hervard, on 11/03/2007, -2/+47It's not a menu, it's a simple CSS rollover tutorial.
    Nice-looking site, though!
  • felixthehat, on 10/31/2007, -2/+11A good example of this is the apple.com nav bar: http://images.apple.com/global/nav/images/globalna ...
  • rafe, on 11/05/2007, -2/+14Its been done a while bak
    http://www.alistapart.com/articles/sprites/
    • Zybergod, on 10/30/2007, -0/+1There is nothing new under the sun.
    • iChainsaw, on 10/31/2007, -0/+2yeah, i was expecting some new method...but no...same old deal...
  • Protarc, on 10/30/2007, -4/+1all I know is when I loaded the page in firefox his nav menu was all retarded and off center...immediately hit the back button, if it doesnt look the same in both browsers what the hell is the point?
  • mefisto, on 11/05/2007, -1/+11I actually fail to see anything new about this. As Hervard already noted, its not even menu.
  • shark615, on 11/01/2007, -8/+4Lame, ugly, old hat and most definatly NOT advanced.
  • hubbers, on 11/05/2007, -0/+7How is this advanced???? These techniques are years old.
  • Ascus, on 10/30/2007, -2/+4Simple but pretty. I would hate to hit that page with dial-up though.
    • subliminalurge, on 11/01/2007, -0/+9I'd hate to hit ANY page with dial-up.
      • minigamer1896, on 10/30/2007, -0/+3It isn't very fun to say the least, but it is smaller than CNN.com. (An unhappy dial-up user)
  • witte, on 11/01/2007, -6/+6Ugh. Why is that these 'web design wisdom' sites always seem to be some clunky abstraction of the default WordPress template? That hideous monstrosity so bloated with useless collages and divs I can barely even load it on my iPhone.

    Speaking of user-unfriendly sites, DIGG.com –– your spell-check doesn't work on the iPhone. It ERASES your comment when you click finish.

    Design rule #1: make it work.
    • lcmatt, on 11/01/2007, -5/+6Use a PC then instead of a phone, just because its capable of browsing the internet doesn't mean its any good on a 3" screen or how ever big it is.
    • noflashlight, on 11/01/2007, -1/+2clearly you are not a developer.
    • TeagueSterling, on 11/01/2007, -2/+2Weather you like the site or not, what part about that design is "some clunky abstraction of the default WordPress template"?
  • andresxv, on 10/31/2007, -2/+9A nice proof of what can be done with a little CSS, instead of using FLASH for everything
  • Raiku, on 11/05/2007, -3/+15Design Rules
    #1 - Easy to See.
    #2 - Easy to Use.
    #3 - Functioning on All Browsers.
    #4 - Serves it's purpose.
    • polaris878, on 11/03/2007, -1/+5Fails #1 and #3... IMO not easy to see, too much *****. As for #3, it was utter fail in IE6 but worked in Firefox and IE7
    • mobilitatis, on 10/30/2007, -0/+2You take my word out of my mouth, my 2 cents works just fine and fulfill these Rules
      http://web2.0flow.com/how-not-to-tab-a-navigation-
    • norbiu, on 11/03/2007, -0/+10Grammar rules - Do not confuse
      #1 - It's with Its
      #2 - their with there
      #3 - you're with your
      • Raiku, on 10/30/2007, -0/+1Stop being a Grammar Nazi. I got my message across just fine.
    • bagelpirate, on 10/30/2007, -0/+1#5 Keep it simple, stupid.
  • mrjeffery, on 11/01/2007, -4/+6Im 26 and work in IT support. Am i too old to get into web design?
    • Raiku, on 11/01/2007, -5/+2Never. But it will be difficult.
      • mrjeffery, on 10/30/2007, -1/+2in what respect(s)?
        • phizzion, on 10/30/2007, -0/+2I would do the sarcasm here but it sounds like you really care about this so.....

          Don't listen to him/her. Its never too late but make sure you know the difference. A web designer only designs the information and will do small to medium amounts of development. A web developer will do the front end and back end programming. So make sure you know what you want to do.

          For design, Just go back to school and get a degree in communication design and get on lynda.com and buy some books and really study to learn some development. Then you need to find a small web design firm in your area and work there to get your feet wet. Once you do that the sky is the limit. But remember it is never to late.
        • norbiu, on 10/30/2007, -0/+1Any chance of getting hired anywhere without a degree? :-/
          • phizzion, on 11/01/2007, -0/+4In a small firm you shouldn't have a problem. Unless you have some great design talent it is best to study design and get a design degree (even a 2 year one). That way you can move yourself up in Ranks and not be laying out other peoples ideas all day.
    • BobTurtle, on 11/01/2007, -3/+5Yes. Sadly, the latest Web Designer bylaw amendments moved the minimum entrance age back to 22 so you just missed out by a few years. Better luck in your next life!
    • VictoryGin, on 11/01/2007, -0/+4not so long as you can get a hold of the proper career chip
  • faster3200, on 10/31/2007, -9/+1Javascript has been able to achieve the same effect (albeit in a different way) for a LONG time. I like that everyone is really into CSS, but seriously javascript requires much less code in this case.
    • BobTurtle, on 11/01/2007, -0/+4One day (if ever), when you learn about "separation of concerns" you'll realize that only an idiot would do this sort of thing in javascript.
  • Chesh, on 11/01/2007, -0/+6I don't mean to be a dick but this is hardly "advanced" and the author uses about 5 times the necessary markup to pull it off.
  • robuk24, on 11/01/2007, -0/+5v old css trick. Dugg for site design, really nice work.
  • mapkinase, on 10/30/2007, -0/+5omg, ponies!
  • ElliotTrudeau, on 10/30/2007, -1/+2Sure its great but does it validate?

    Nope
  • Chesh, on 11/01/2007, -1/+9This version uses less markup, no empty tags and validates, it doesn't do the fancy little words when you hover over, but you can easily add those in. It could also be done with one image instead of the original 6 with a little more effort and markup. It also works in IE6 without the strange flickering.
    http://www.grahamconzett.com/temp/simple/loladvanc ...
    IE6+ Opera, Gecko and Safari 2+. CSS is in the source.
    Always more than one way to skin a cat.
    • alperea, on 10/30/2007, -0/+2nice, try viewing the source of this guys and the source of the original post. What a difference!
    • Blackmane, on 10/30/2007, -2/+2Yours doesn't have the little text effects that pop up and under the main text. As well as this it also has more spacing on the original. Good all the same and does use less code.
      • Chesh, on 10/30/2007, -0/+4True, I omitted them for the sake of time since they were separate images in the original version, it can be done with one. Spacing can be tweaked at your own discretion, you can always pad the list elements or use absolute positioning to achieve your desired result.
  • westkoast, on 10/31/2007, -1/+5This is not a great example to release to the masses... -900% text-indent is great way for some Search Engines to believe you are spamming
    • spaulo, on 10/30/2007, -0/+1That's actually completely unfounded... Google's stance has been and remains that text replacement is kosher if the same content is being served to both the bots and the viewers. -900% text-indent (or my preference, -9999px) is considered by many SEO experts to be preferable to font-size:0px and other methods.

      This tutorial though, is lame... the AListApart method ("CSS Sprites") does the same thing with one image to load, no semantically unnecessary spans tags, and half the CSS
  • g00dbye, on 11/05/2007, -1/+1"Most of you probably know how to code a horizontal or vertical CSS list menu."

    Of course I do! Are you kidding? You just take the string and...um....uh...

    Alright, I lied.
  • innovaciones, on 10/31/2007, -3/+1You can always use Flash (with Swishmax) to build menus, its far easy and fast!
    • TheWolfen, on 10/31/2007, -0/+1That's a joke, right? Just because you can do a thing, it does not necessarily follow that you should.
  • polvero, on 10/31/2007, -0/+1This was done almost 4 years ago.
    http://superfluousbanter.org/archives/2004/05/navi ...
  • wildx22, on 10/31/2007, -0/+0Sure, all the same technique. But I dugg it for the nice visual effect. Why stick to the same ol' boring solid tabs all the time? Web 2.0? Where's creativity gone nowadays.
  • mitch37, on 10/31/2007, -0/+0Digg does it:
    http://www.digg.com/img/menu-current.gif
  • zglows, on 11/04/2007, -0/+0this is coooolll!!!!
  • cekay, on 01/27/2008, -0/+0Digg No. 2000 :) I like the explanation! TOP!
  • AntonShevchuk, on 03/04/2008, -0/+1Nice article, I translate it on Russian: http://anton.shevchuk.name/html-and-css/web20-css- ...
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.