Nav-Menü sitzt hinter iFrame

Speziell auf den IE9 nur, mein Navigations-Menü ist hinter meinem iframe beim anzeigen einer PDF-Datei über das iFrame.

Ich habe ein jsfiddle zu demonstrieren:

http://jsfiddle.net/q6fmv/

Alternativ finden Sie unten auf dieser Frage, die für den code.

Angesehen, wenn auf den IE9, wenn Sie die Maus über die Navigations-Elemente, die diejenigen, die eine sub-nav können Sie sehen, verbergen sich hinter dem iFrame.

Ich habe versucht Einstellung der z-index des nav-Menü höher ist als das der iFrame-aber es hat nicht funktioniert.

Wie kann ich dies beheben, so dass die sub-Menü des navigatino Menü erscheint oben auf der iframe?

HTML

<div id="navMenu">
<ul id="menu">
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 5</a>
    </li>
</ul>
</div>
<br />
<div id="iframe">
    <iframe name="myiFrame" width="100%" height="100%" title="My iFrame" id="myIframe" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" frameBorder="0"/>
</div>

CSS

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

Haben auch versucht, mit PDFObject.js http://jsfiddle.net/q6fmv/10/. Es hat nicht funktioniert

  • Hmm, interessante, Variationen von z-index funktionieren nicht. Ich Frage mich, ob die Verwendung dieser Methode ermöglicht es Ihnen, um z-index die ul - tags: stackoverflow.com/a/12974315/1045794
  • möglich, Duplikat der z-index funktioniert nicht im IE7/IE8 mit pdf in iframe
  • Ich habe das schon gesehen, aber die Lösung funktioniert nicht. das ist ein einfaches div, dies ist ein Dropdown-nav-Menü.
  • Ich Frage mich, ob es wirkt wie ein flash-Objekt, google so etwas wie wmode iframe ich habe divs über flash-Objekte, die ähnliche Eigenschaften haben. Könnte den trick tun.
  • Zur info habe gerade versucht das pdfobject Idee. hat nicht funktioniert. jsfiddle.net/q6fmv/10
  • Jetzt sollte es funktionieren 🙂 Sie können es testen. Check meine Antwort! 🙂

InformationsquelleAutor RSM | 2014-07-15
  1. 3

    Haben Sie versucht, die leere iframe-Technik ?
    Es war nicht vor der Arbeit, weil Sie müssen, fügen Sie ein leeres iframe in jedem Untermenü ul-tag.

    HTML

    <div id="outer">
<div id="inner">
    <div id="navMenu">    
        <ul id="menu">
            <li>
                <a href="#">Menu 1</a>
            </li>
            <li><a href="#">Menu 2</a>
                <ul class="sub-menu">
                    <iframe class="cover" src="about:blank"></iframe>

                    <li>
                        <a href="#">Sub Menu 1</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 2</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 3</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 4</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Menu 3</a>

            </li>
            <li><a href="#">Menu 4</a>

                <ul class="sub-menu">
                     <iframe class="cover" src="about:blank"></iframe>

                    <li>
                        <a href="#">Sub Menu 1</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 2</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 3</a>
                    </li>
                    <li>
                        <a href="#">Sub Menu 4</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 5</a>
            </li>
       </ul>
 </div>

    CSS

      #outer {
    position: relative;
    left:0;
    top: 0;
    width: 100%;    
    z-index: 3;
}

    #inner{
        background: red;
    }

    .cover {
        position: absolute;
        border: none;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -2;
        height:100%;
    }

#pdf {
    position: relative;
    top:0;
    z-index: 1;
}

ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
    z-index:3;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}

/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}

/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}

/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
    z-index:3;
}

ul#menu li:hover ul.sub-menu {
    display:block;
    position:absolute;
    z-index:3;
}

    BEISPIEL

    http://jsfiddle.net/gDuCE/701/

    • Wenn ich Besuch deinen jsfiddle auf ie9 hat immer noch das gleiche problem
    • Lassen Sie mich überprüfen, ob ich etwas vergessen...
    • Ok, jetzt funktioniert es... ich passe meine Antwort.
    • Schön, +1
    • Schön. vielen Dank für Ihre überzeugende Anstrengungen.
    InformationsquelleAutor Alessandro Incarnati
  2. 0

    Ich habe google docs-code zum einbetten via iframe auf der website.

    Habe ich Hinzugefügt, jsfiddle-link können Sie direkt check-in ie9.

    JSFiddle code

    JSFiddle code fullscreen - aktivieren Sie diese direkt in ie9

    Wenn Sie google-Dokumente als iframe, dann bitte stellen Sie sicher, dass es öffentlich geteilt.

    <div id="navMenu">
<ul id="menu">
    <li>
        <a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>

    </li>
    <li><a href="#">Menu 4</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 5</a>
    </li>
</ul>
</div>
<br />
<div id="iframe">
    <!--<iframe name="myiFrame" width="100%" height="100%" title="My iFrame" id="myIframe" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" frameBorder="0"/>-->
   <iframe src="https://docs.google.com/file/d/0ByF4RjDx3q6sMW9DWHR0MXNtN0k/preview" width="100%" height="100%"></iframe> 
</div>

    GRÜßEN D.

    InformationsquelleAutor DevangKantharia
  3. -1

    Versuchen Sie, die position und z-index zu #menu oder #navMenu als solche

    ul#menu {
    position: relative;
    z-index: 9999;
}

    http://jsfiddle.net/q6fmv/7/

    Habe ich nicht mit dem IE9 zu überprüfen, obwohl

    InformationsquelleAutor Arun Prakash
Schreibe einen Kommentar