Results 1 to 7 of 7

Thread: Any Link Drop Down Menu position question

  1. #1
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Any Link Drop Down Menu position question

    1) Script Title: Any Link Drop Down Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...anylinkcss.htm

    3) Describe problem: First, I love this script and have used it several times. What I would like to do at this point is position the drop down exactly where I want it to show up. The page I am using it on is this:

    http://www.aristorialane.com/index-new.html

    If you scroll over the menu item Our Painters the drop down displays exactly how I want it to except I would like it aligned with the left side of the browser so that basically the drop down covers the whole page content. How can I specify that I want the position to be aligned with the left side of the browser, regardless of which link is moused over? I don't know where in the code to change this.

    Thanks!

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Sure. Firstly, give the element on the page you wish the drop down to always be positioned relative to an ID attribute. In this case, the "Welcome" link seems to fit the bill:

    Code:
    <a href="http://www.aristorialane.com/index.html" id="dropmenuanchor"><div class="navOn">WELCOME</div></a>
    Then, modify the script with the change in red:

    Code:
    function getposOffset(what, offsettype){
    var what=document.getElementById('dropmenuanchor')

  3. #3
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That worked great! Now one more question. Is there a way to move the text links to show up under the link that was moused over, even though the background box is anchored to the left? So the drop-down links would be displayed under the appropriate main link?

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hmm I'm not getting what you're trying to accomplish visually in my mind. More description?

  5. The Following User Says Thank You to ddadmin For This Useful Post:

    jamacfarlane (02-21-2008)

  6. #5
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply! Ok, I changed the code and added the line above. So now when you mouse over the link Our Painters the drop down box is aligned to the left below Welcome, perfect. But now what I want to do is have the names of the painters show up below the Our Painters link rather than below Welcome. Same for the sculptors. Does that make sense? So the dropdown box is where I want it, but I want the drop down links directly below the link that triggers the drop down. I hope that clears it up. I appreciate your help.

  7. #6
    Join Date
    Feb 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your help. Any ideas on my last post?

  8. #7
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I see what you mean now. There's no real way to "double" align the menu and the menu contents differently. However, what you can do is just manually add a horizontal offset to the name of the painters, so they align to the activating link. For example:

    Code:
    menu1[0]='<a href="carron.html" style="margin-left: 100px">FRANCK CARRON</a>'
    menu1[1]='<a href="tison.html" style="margin-left: 100px">CHRISTINE TISON</a>'
    
    //Contents for menu 2
    var menu2=new Array()
    menu2[0]='<a href="transfield.html" style="margin-left: 200px">LEROY TRANSFIELD</a>'
    That should do the trick.

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
  •