Force drop down menu inside an iframe to be "on top"

Discussion in 'HTML & Website Design' started by blue555, Sep 8, 2009.

0
  1. #1
    Hey all,

    I am trying to build a navigation menu with a popular javascript/css drop down menu script. It works great. My purpose is to build one nav menu and host in on a "mother website" and then allow other peer sites to embed this drop down menu into their sites using an iframe at the very top of their web pages.

    However, I've tried with basic html/css and now this popular javascript/css script and I can't force the drop down menu to be "on top" of the rest of the page. When the menu "drops down" well, it simply is hidden inside the 25px tall iframe and the user can't see the drop down options at all.

    I know there are things like z-index for CSS but I messed with that a little already and can't find a way to force the menu to display on top of the rest of the page and the rest of the page's elements.

    The goal of this nav menu is for all my friends to have a site network and a large link exchange together, so I don't want to use an embedded javascript because that won't pass any link juice.

    Any suggestions? Is the only solution a remote/universal javascript menu like on break.com ??? (If so... then whats a great javascript menu script I can use for my purposes exactly like break.com does?)

    Thanks!
     
    blue555, Sep 8, 2009 IP
  2. fri3ndly

    fri3ndly Active Member

    Messages:
    111
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #2
    As far as I understand, what you are trying to do is impossible.

    You cannot include an Iframe on a page and expect it to override the parent page unless the Iframe size is large enough to accomodate for the height of the dropdowns, but then obviously there will be a huge gap.

    You might be better off using PHP to include the HTML you need.

    myMenu.html
    #####

    <ul>
    <li>Button</li>
    <li>Button</li>
    <li>Button</li>
    </ul>


    And then give them this line:

    <?php include('http://www.yourdomain.com/yourMenu.html'); ?>


    They would need to have all the assisting styles too, so would probably be best to include them in yourMenu.html file at the top before the HTML:

    <style type="text/css">
    #Yourid{}
    .Yourclass{}
    </style>
     
    fri3ndly, Sep 9, 2009 IP
  3. blue555

    blue555 Guest

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks mate. That doesnt quite work I realized due to server security restrictions on our sites esp on shared hosting.

    (On many servers... even after enabling allow-url-fopen in php.ini... the file still must be included using relative paths and not remote paths it seems.)

    I think we are going to have to distribute the html/css file to everyone to host individually to avoid having customized situations for each site based on their host's current setup and regulations of allow-url-fopen, curl, and remote php includes... =\

    But your post got my mind jogging and I tried a bunch of new methods after your ideas. Thanks much!
     
    blue555, Sep 10, 2009 IP