Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11

Thread: Cascading Menu

  1. #1
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    I am trying to make a cascading menu, i need to know two things...

    i assume the pop-up parts of the menu are DIVs but how do i get the to be positioned above all the elements on the page (using css preferably)

    and 2 how do i get it to be positioned below the menu buttons - css positioning isn't good because it isn't compatible with netscape IIRC

    i should be ok with the rest

    thanks
    JR

  2.  

  3. #2
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    Originally posted by jravenscroft
    i assume the pop-up parts of the menu are DIVs but how do i get the to be positioned above all the elements on the page (using css preferably)
    I assume by "above" you mean it would appear to cover any elements "below"it. If this is the case then just use [minicode]style="z-index: 5"[/minicode] for the DIVs to appear above and [minicode]style="z-index: 0"[/minicode] for anything appearing underneath.

    As for the positioning try using tables ?


    Hope that helps.
    - Brian

  4. #3
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    thanks - i was just under the impression that z-index was ie only

    i think i have it sorted now
    JR

  5. #4
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    how do i get it positioned below the menu links? css absolute postioning wont work because it changes depending on resolution/browser. Relative postioning won't work either i don't think because i haven't got anything to place them relative to

    thanks...
    JR

  6. #5
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    i think i understand now, i found that you can get the position of an object using javascript - so i can find the position of the menu buttons then work it from there.
    JR

  7. #6
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    ...but i really don't understand how to use it
    JR

  8. #7
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    oooook finally i think i get it, offsetLeft works out the position relative to the tag the element is contained in. If it is in the <body> tag without any <td> tags surrounding it etc. it works it out from the edge of the page, am i right?
    JR

  9. #8
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    The offsetLeft value is the same as the <body leftmargin=xx> value, by default 10.

    I tested this by using this code:
    Code:
    <body>
    <div style="position:absolute;" id="div">
    poo
    </div>
    </body>
    and typing javascript:alert(document.all.div.offsetLeft) (minus the space) in the address bar in IE6. Then after that, I added leftmargin=0 to the body and inserted the same thing in the address bar and found the value to be 0.

    It works in Mozilla 1.4 also using javascript:alert(document.getElementById('div').of fsetLeft) The default value in Moz is 8.
    - Brian

  10. #9
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    all sorted now - took me ages :angry: - thanks anyway
    JR

  11. #10
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    I'm thinking something like:
    Code:
    <td id="Menu1"><a href="javascript : DoMenu1()">Menu1</a></td>
    ...
    <layer style="visibility: hidden" id="Menu1Contents">Menu Contents</layer>
    ...
    <script>
    function DoMenu1()
    {
    x = document.getElementByID('Menu1').left + 4;
    y = document.getElementByID('Menu1').bottom + 2;
    document.getElementByID('Menu1Contents').left=x;
    document.getElementByID('Menu1Contents').top=y;
    document.getElementByID('Menu1Contents').visibility = true;
    }
    </script>
    That's just pseudocode, but it should work in principle I think...
    It would be better than other menu schemes because it doesn't rely on the menu links being in absolute positions.
    It needs some code to hide the menu after the mouse has been away from the menu for, eg, 1 second.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:18 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com