digg

Join DiggAbout

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

Very Cool CSS Hoverbox Menu Technique

designmeme.com — Supercharge your navigation menus with this cool CSS. The examples they show kind of suck but the technique is actually worth looking at.

Bury
show profanity settings
expand all
  • gambl0r, on 10/12/2007, -2/+11It works in Firefox... but not IE. Not very useful, although cool looking
    • canadianguy33, on 10/12/2007, -22/+4damn. I didn't check it out in IE. Anyone know how to get it to work in IE?
    • caffiend, on 10/12/2007, -5/+43"damn. I didn't check it out in IE. Anyone know how to get it to work in IE?"

      I hope you're not a developer.
    • electrichead, on 10/12/2007, -6/+6It probably works. It's not your CSS, it's the javascript for your tooltips (sweetTitles?) looking for the title tag in your links.

      P.S. I like the CSS sprites article linked. Thanks!
    • canadianguy33, on 10/12/2007, -4/+12lol for the record. I didn't create this, I just came across the article.
    • jsd8cc, on 10/12/2007, -1/+33"It works in Firefox... but not IE."

      The web developer's mantra.
    • reject, on 10/12/2007, -2/+9Works fine in Opera, too.
    • Spybot, on 10/12/2007, -0/+6bet it works in IE7. none of the hoverbox stuff working in ie6. i just implemented something very similar on one of my sites. works on everything but IE6. I'll wait for IE7 to come out.
    • kimos, on 10/12/2007, -1/+4Well the hoverbox demo works on IE6. Just the hoverbox menu creates JS errors.
    • FreakTrap, on 10/12/2007, -1/+8"I'll wait for IE7 to come out."

      How is that going to help you? You really think that all of the home/common/computer_illiterate users are going to migrate to IE7 when it comes out?
    • KingZog, on 10/12/2007, -5/+3Looks bad in Opera 9.0 Beta 2 as well.
    • finalmillenium, on 10/12/2007, -8/+10Since when has M$ ever cared about standards?
  • abenton, on 10/12/2007, -9/+4very, very cool, thanks for the link
  • xutopia, on 10/12/2007, -3/+13I always question people's definition of the word cool.
  • gandubhalla, on 10/12/2007, -8/+3It's cool but it looks stolen from http://www.cssplay.co.uk who helped a iPod site turn it into a useful menu at http://www.ipodhub.net
  • bitterCAMPARI, on 10/12/2007, -1/+3Kind of annoyting effect to me. It works well if you're making a comic themed site such as the example. But how often do we get that kind of fun?
  • artofwot, on 10/12/2007, -3/+3It works in IE 7 Beta 2.
    • stuartr, on 10/12/2007, -6/+3I hadn't got around to testing on IE 7 yet. Sweet.
  • stuartr, on 10/12/2007, -0/+2I didn't steal it from CSS play. I stole it from the Hoverbox Image Gallery. I saw it and thought it would be neat to make a menu that worked like that... and it would be cool for Rob's site. :-)
    • gandubhalla, on 10/12/2007, -4/+0haha at least you are not taking credit for it. I am sure it is a product of the hard work of cssplay.co.uk

      If you want to make a menu from that take a look at the code at iPod Hub. I asked for permission to use it on my blog and they said to its free code but also ask cssplay who invented it. They worked together on it. Works fine in all browsers I can see it in.
    • stuartr, on 10/12/2007, -0/+3Neat, I hadn't seen that site before. I get most of my CSS tricks (and ocassionally contribute) to A List Apart. I saw the hoverbox gallery on populicio.us.
  • gandubhalla, on 10/12/2007, -8/+0double post
  • nomad111, on 10/12/2007, -5/+0Does anyone know if IE7 fixed the many CSS problems from earlier versions... too many to list... haha... i need to be reassured.... IE is a css nightmare...
    • cbreaker, on 10/12/2007, -6/+1You need to ask that question on Digg to get an answer? Anyone that gives a ***** about CSS should already know the answer anyways.

      ps. It's okay to use a single goddamned period after a sentence!
  • plue2, on 10/12/2007, -7/+1Took me too many clicks to see the example. here ya go
    http://solardreamstudios.com/_img/learn/css/pg/
    And I think I saw this first on http://www.dump.com best viral video/ porn site ever.
  • gandubhalla, on 10/12/2007, -2/+1Ya IE7 fixes many problems but not margin spacing because that is a Windows dpi problem. Mac uses 72 dpi, Windows uses 96 dpi so margins and spacing are still wider on Windows. CSS can't change that.
    • pornel, on 10/12/2007, -2/+1WTF?
      Operating system (or it's user) is responsible for setting DPI. CSS and browsers have nothing to do with that.
    • gandubhalla, on 10/12/2007, -0/+0DPI influences how much space you will see visually between elements on a page. Just try it. Set a margin of 12px or 1em around a nested div and see how it looks on Windows compared to Mac. Windows' margins appear much wider. Anyway that's off topic.
  • phae, on 10/12/2007, -2/+2Wow. I haven't given a thought to Rob Schrab in years. I'm going to bust out the old Scud books the second I get home! Sweet!
    • jschrab, on 10/12/2007, -0/+1Rob's been busy - much to check out...
  • Dracos, on 10/12/2007, -1/+2The semantics of this are questionable. It appears he is using 'em' inside a 'span' inside an 'a' simply because he either doesn't know about the child CSS selector, or hoped that this would work in IE6 using anonymous selectors.

    Replacing the 'em's with another span would be semantically cleaner, but would require a lot of the CSS to be rewritten in a more concise manner, namely a > span > span (the child selector). That would guarantee that it wouldn't work in IE6.
    • gandubhalla, on 10/12/2007, -2/+1Then iPodhub and cssplay have done it cleaner because theirs is just a unordered list with link hovering and css child selectors which explains why theirs works in all browsers. Design meme's code isn't as clean. And who are the two guys giving me minus diggs on my posts when I'm giving design tips and links????
  • Gargoyle, on 10/12/2007, -4/+2Adding extra tags to the html is bad. Sure it looks nice, but if your gonna do things like that, then you might as well just use tables for layout too!
  • blackrthanspace, on 10/12/2007, -4/+0ah now its broken
  • stuartr, on 10/12/2007, -0/+1Dreamhost just emailed to say:
    "I have set a connection limit on your site to allow (25) per (5) seconds. This is the best solution for allowing your site to continue to run and making the webserver more stable. "
    • gandubhalla, on 10/12/2007, -0/+0Anyway if that is your comic site I like the design even if the code can be done a better way.
  • Alegis, on 10/12/2007, -0/+8http://www.duggmirror.com/design/Very_Cool_CSS_Hoverbox_Menu_Technique/
    • gandubhalla, on 10/12/2007, -6/+1What is duggmirror?

      Nevermind. Just read it.
  • pornel, on 10/12/2007, -0/+2Opera shows it's own address tooltip - it looks stupid when there is fake one generated underneath.
  • enzomedici, on 10/12/2007, -2/+2
    No digg.

    This is kindergarten level. What is this, slashdot?
  • fforw, on 10/12/2007, -0/+1The span elements in the markup are superflous. li for general list structure, a for links and hovers, em or whatever (I usually use b) for hiding is enough.
  • firehydra2k, on 10/12/2007, -0/+1Interesting...but for some reason there is a better way to code that...

    Other than that, good alternative to Flash, although it can get in the way...
  • BradMW, on 10/12/2007, -1/+2This is trivial and looks terrible. Congratulations on your 1.5 cumulative in your Computer Science program.
  •  

    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.