MetaChat - AskMecha: what's a good link for one of those things that does that deal?

MetaChat is an informal place for MeFites to touch base and post, discuss and chatter about topics that may not belong on MetaFilter. Questions? Check the FAQ. Please note: This is important.

19 November 2005

AskMecha: what's a good link for one of those things that does that deal? What? Too vague?→[More:]

You know those navigation menus on websites where you have tabs and you hover over a tab and a new set of sub-navigational links pops up on a second tier? Does anyone know any good links for a tut of what I'm talking about?

post by: bjork24 at: 23:42 | 7 comments

Using javascript or CSS or DHTML or AJAX? Include one of those keywrods with "menu" and you'll find numerous examples.

posted by stilicho 20 November | 00:39

AJAX and MENU

posted by bjork24 20 November | 02:22

A List Apart is really good for stuff like this. There's one other, similar, site but I forget its name.

posted by flopsy 20 November | 07:57

This too

posted by flopsy 20 November | 07:59

hover pseudo class
Child selectors
display:none

Using this standard as first principles and reasoning from it, this is pretty easy.

Only gotcha is that the hover pseudo class doesn't apply to a raw class (at least in Firefox); the selector element has to be prefixed.

Doesn't work: .menuitem:hover { font-weight:bold ; }

Works: div.menuitem:hover { font-weight:bold ; }

That said, he's a working sample for you to play with. It will probably look better if you use listitems (<li>) rather than (as in my example) divs; this also makes using icons and altering the list look easier.

<html>
<style>

  div.menuitem:hover {
    font-weight:bold ;
  }

  .submenuitem {
    display: none ;
  }

div.menuitem:hover > div.submenuitem {
    display: list-item ;
  }

  div.submenuitem:hover > div.submenuitem {
    display: list-item ;
  }

  </style>
  <body>
  <div class="menuitem">
    Item 1
      <div class="submenuitem">A</div>
      <div class="submenuitem">B</div>
      <div class="submenuitem">C</div>
      <div class="submenuitem">D
        <div class="submenuitem">D1</div>
        <div class="submenuitem">D2</div>
      </div>
  </div>

  <div class="menuitem">
    Item 2
      <div class="submenuitem">2A</div>
      <div class="submenuitem">2B</div>
      <div class="submenuitem">2C</div>
      <div class="submenuitem">2D</div>
  </div>

  <div class="menuitem">
    Item 3
      <div class="submenuitem">3A</div>
      <div class="submenuitem">3B</div>
      <div class="submenuitem">3C</div>
      <div class="submenuitem">3D</div>
  </div>
</body>
</html>

posted by orthogonality 20 November | 08:03

Oh, ortho! You make my heart flutter... plus I have a perplexing css problem that I'm likely to email you about. Wheeeeeeee! My own private CSS AskMe! (kidding! maybe.)

posted by taz 20 November | 08:27

Feel free to email me. (Note the email listed at metafilter no longer works; users aware of why I only rarely post anymore at metafilter also know where to find my working address.)

However, I really don't know css at all well, so I may or may not have an answer.

posted by orthogonality 20 November | 08:58

← A Charles Darwin miracle up for the bidding! || You have offended my sensibilities, sir. →

HOME || REGISTER || LOGIN