SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dhtml drop-down menu positioning

    Hey, what's up?

    I'm wondering how the dhtml drop-down menu positioning works.

    Let's say the menu has text of varying lengths, like "home," "tutorials," and "miscellany." How do you determine the location of the dropdown menu, such that it doesn't look out of place (ie, it's always aligned correctly to the text)?

    I skimmed through the source of several dropdown menu scripts, but didn't pick anything up, so decided to ask here. My guess was the onmouseover function could extract the position of a div tag by id?

    I'm hoping to build a new navigation menu for my site and want to avoid passing in coordinates to a javascript function. Thanks for the help.

    dave

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are several ways, but usually, the best is to obtain a position from the triggering element.

    I wish you the best of luck, writing a menu script is very ambitious.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks. It's gonna be very straightforward, as I don't know much javascript.. heh.

    By triggering element, do you mean the mouse cursor?

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I mean from the HTML element (a link, usually) that is supposed to trigger the appearance of the menu.

    I'm sorry to say this, but if you don't know much about javascript, writing a menu system will be over your head until you learn quite a bit more.

    In the mean time, I suggest looking into the many menu scripts that have already been written.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    NJ/NY
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, I only know pretty basic javascript. I hoping to pick up a lot through writing this.

    thanks for the advice!

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A few general tips...

    1) Keep it simple, just labels and boxes (cascaded menus can come later).

    2) Try to adhere to standards as much as possible... but still I suggest testing with only one browser for this 'first project'. Developing cross-browser dhtml is a challenge in itself. Get it working on your favorite browser first, then try it on a different browser, then another.

    3) Keep it fun. Keep it do-able.

    4) Have fun with it - finish it - then redesign and recode the entire thing... or if it's no longer fun just move on to another project

    5) When you have problems, try to solve them on your own first - before asking here at the forum - then come to the forum and ask us to critique your solution. Somtimes it hurts but you learn alot! When you ask a question at the forum be sure to remind us that you don't want us to solve your problem for you - but to help you solve it.

    6) There are several different ways of implementing menu functionality. Pick one and stick with it. On your next menu project try a different way.


    7) Design it on paper first. Draw a diagram to help with calculating positions.
    Code:
     ___________    ___________
    |Label      |  |Label      |
    |___________|  |___________|
     ___________    ___________
    |Box        |  |Box        |
    |           |  |           |
    |           |  |           |
    |           |  |           |
    |           |  |           |
    |___________|  |___________|
    8) Different techniques for positioning...
    8.1) Calculate the position every time the box needs to be displayed.
    8.2) Calculate the position once onload and after any window resize - then just show and hide the box when needed.

    9) Different techniques for user-interaction...
    9.1) A mouseover on a label shows its box; a mouseout on the box hides the box.
    9.2) A mouseover or click on a label shows its box; a mouseover (or mousemove) on anything 'except' the label and box hides the box.
    9.3) A mousemove on a label shows its box; a mousemove on anything except the label and box hides the box.
    9.4) etc...

    10) Download a javascript reference and the W3C DOM anc CSS specs and utilize them. Read about the DOM. Ask questions here at the forum about any general concepts you don't yet get.

    Gotta run. Good luck and have fun.


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
  •