MetaChat REGISTER   ||   LOGIN   ||   IMAGES ARE OFF   ||   RECENT COMMENTS




artphoto by splunge
artphoto by TheophileEscargot
artphoto by Kronos_to_Earth
artphoto by ethylene

Home

About

Search

Archives

Mecha Wiki

Metachat Eye

Emcee

IRC Channels

IRC FAQ


 RSS


Comment Feed:

RSS

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?
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