SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript drop down menu?

    hey folks,

    so i've got an interview tomorrow, but i gotta do a "test" first. basically i have a design, and i have to add a javascript drop down menu system (not using form elements, just normal drop down menu). now, normally i would just use CSS because even without javascript it would still display ok, but that's what they want. are there any sites/tutorials/generators where i can easily learn how to create one? thanks.

    so, since i cant use :hover, im guessing i just add classes to the menus and then target them using stored JS functions... but how?
    Steve Davis

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, have your menus all styled but don't have any rules on :hover. Then, target the anchor you're going to hover over and setup an event handler on the 'mouseover' event, which will then manipulate something (perhaps add a class to the anchor or nested ul).

    <ul id="nav">
    <li><a id="first" href="#">foo</a>
    <ul>
    <li>hidden</li>
    </ul>
    </li>
    </ul>

    set the styles up, make the anchor either floated or block leveled.. then
    Code:
    ul#nav ul { position:absolute; left:-999em; }
    .show { left:auto; }
    Code:
    var firstAnchor = document.getElementById('first');
    firstAnchor.onmouseover = function() {
    this.getElementsByTagName('ul')[0].className = 'show';
    }
    firstAnchor.onmouseout = function() {
    this.getElementsByTagName('ul')[0].className = '';
    }
    I'm not using addEvent, nor addClass/removeClass so this is a little "dirty" (well the whole concept is IMO) but hopefully that'll get you started.

  3. #3
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like THIS would be the easiest way for you to pick apart a JavaScript drop down menu.

    I would say in your interview though that CSS would be better, and give reasons why.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  4. #4
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the only major downside to using css only is that IE6 doesnt support :hover on anything but "a" tags unless you add a hack. thanks though!

    im gonna use this one... http://www.onlinetools.org/tools/yadm/

    the one you posted is nice, but doesnt have much error checking and isnt unobstrusive. thanks!
    Steve Davis

  5. #5
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, there is a very lesser known alternative to using the behavior property and feeding htc/jscript or using js for MSIE, and that would be using CC's to insert content only for MSIE, so no JScript is necessary for the hover on elements other than anchors but it is a bit hackish and advanced.

    The yadm doesn't look bad - I actually started a pure dropdown menu and the first few lines of code look similar to mine in logic.. gonna finish mine up then look at how Heilmann did it. Although regexes aren't needed for checking classes if you can think of a smart way of using indexOf (save a few ms? heh)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •