Navigation menu obscured by iFrame

My navigation menu is experiencing a display issue specifically on IE9, where it appears behind an iframe when viewing a PDF within that iframe.

To illustrate the problem, I have created a demo using jsfiddle:

http://jsfiddle.net/q6fmv/

Alternatively, you can find the code at the end of this question.

On IE9, when hovering over the navigation elements with submenus, they get hidden behind the iframe. I attempted to resolve this by adjusting the z-index of the nav menu without success.

Is there a way to ensure the submenu of the navigation menu always displays on top of the 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;
}

I also attempted to use PDFObject.js http://jsfiddle.net/q6fmv/10/, but it did not solve the issue.

htmlcssiframeinternet-explorer-9

Answer №1

Have you experimented with the empty iframe technique? It previously wasn't effective because you needed to insert an empty iframe within each submenu 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;
}

EXAMPLE

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

Answer №2

I have utilized the embedding code from Google Docs using an iframe on the website.

Furthermore, I have included a link to a JSFiddle demo that is compatible with IE9 for direct testing.

JSFiddle demonstration

Full-screen JSFiddle example - specifically designed for IE9 compatibility

If you are incorporating Google Documents through an iframe, please ensure that it is set to public sharing.

<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>

Best regards,

Answer №3

Consider incorporating position and z-index into the styling of either #menu or #navMenu like so

ul#menu {
    position: absolute;
    z-index: 10000;
}

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

I don't have access to IE9 for testing at the moment

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain how I can use AJAX in HTML to change the text of a link once it has been clicked on?

I have a link titled Save to Favorites. This link triggers an AJAX function when clicked, which updates the text of the link to say Remove from Favorites. Clicking it again changes it back to Save to Favorites. What code should I include in the link itsel ...

jqueryhtmlajax

`Combining a button and text field aesthetically with CSS`

I am working on developing a web forum in Django/Python where users can post quick single-line replies (similar to tweet length) that are visible to all participants. Currently, this is the layout of the simple form: https://i.sstatic.net/dpk4p.png What ...

htmlcss

Struggling to get .parent().toggleClass to function properly

Check out this fiddle: https://jsfiddle.net/qxnk05ua/2/ I'm trying to get the background color to change when I click the button, but it's not working. Can you help me figure out why? This is the Javascript code I'm using: $(document).rea ...

javascriptjquerycsstoggleclass

PHP - The variable $_SESSION['var1'] has not been set within the index.php file

My index.php page is causing me some confusion. <?php session_start(); if (!isset($_SESSION['var1'])) { echo "session not started..."; die(); } else { echo "session started"; die(); } ?> Within the page, there is a login form that connec ...

phpjavascripthtml

Iterating over JSON data in Jquery based on key-value pairs

Hey everyone, I received a response from the server below. I attempted to iterate through it based on keys but unfortunately, I couldn't succeed. {"metricsLevelList": [{ "levelName": "Account1Name", "levelId": 1, "metrics": [ { "value ...

javajqueryhtmljsonspring

What is the process for connecting two scripts together?

Purpose : I am currently working on a Firefox add-on with the goal of tracking the online status of my team members in a game. Current Progress : I have developed an initial JavaScript script that runs upon opening the browser. This script creates and ...

javascripthtmlfirefox-addon

Enhancing Child Elements with CSS - Evaluating Rating Systems

Is there a way to change the opacity of certain images inside my div when hovering over them? Specifically, I want the 4th image and the first three to have an opacity value of 1. I've looked into using nth-child but am unsure how to implement it for ...

javascriptjqueryhtmlcss

Having trouble sending the information to Parse.com using the website

I am a beginner with the Parse database and I am currently working on implementing a code that allows users to sign up, with their information stored in the Parse database. However, I am encountering an issue where the values are not uploading as expected. ...

javascriptjqueryhtmlcssparse-platform

Arranging divs in a vertical layout using Bootstrap

After spending nearly 4 hours stuck on this, I have a question regarding my use of Bootstrap in building a mobile-friendly website with asp.net. I am new to bootstrap and trying to implement a collapsible menu functionality for mobile view. Currently, I ha ...

htmlasp.netcsstwitter-bootstrap

What is the process for creating a downloadable link or button?

Here's the scenario I'm dealing with: I have a dynamic website that includes a form with a "select" dropdown menu, followed by a link or button. When a user clicks on the link: If the selected option is "display," the data is shown using AJAX ...

javascriptjqueryhtmldownload

Is it possible for us to customize the angular material chip design to be in a rectangular shape

I recently implemented angular material chips as tags, but I was wondering if it's possible to customize the default circular design to a rectangle using CSS? ...

cssangularangular-material

implementing jquery for dynamic pop up placement

When I click the English button, a pop-up appears, but I can only see the full contents of the pop-up after scrolling down. Is there any way to view the entire pop-up without scrolling? Below is the code that I am using: http://jsfiddle.net/6QXGG/130/ Or ...

jqueryhtmlcss

I'm looking for recommendations on the top books for learning HTML, CSS, PHP, JavaScript, and other related

I've made the decision to focus my studies on becoming a skilled web developer, delving into areas such as Java EE and more. However, I believe it's important to establish a solid foundation first. Before diving into advanced web systems, I want ...

phpjavascriptcss

Tips for organizing and concealing images within a Div for seamless transitions (no need for floats)

Currently, I am working on a grid layout for my website. My goal is to have 9 images load quickly, and then once the page has loaded, I want to fetch additional images, insert them into the image containers, and animate between them. While I understand how ...

javascripthtmlcssimage

Unclear about how inheritance works with the general sibling combinator "~" (tilde)?

When attempting to color list items in an unordered list using the general sibling combinator, nothing seems to happen: http://jsfiddle.net/bkbehpv0/ p { color: blue } h1 ~ li { color: red; } <h1> Title of site </h1> <p> Text in t ...

css

The way in which LI elements are dynamically displayed

Check out this Fiddle! I have a fiddle set up where li items are vertically aligned and floated to the right. The issue I'm facing is with the order of the items - currently, they appear as test3, test2, and then test1. However, I want them to displ ...

htmlcsscss-float

Maintaining text in a straight line

My design includes an image floated to the left with text aligned to the right of the image. Unfortunately, the text is too long, causing a line from a paragraph to drop below the image. How can I ensure that the text stays in line with the paragraph and ...

htmlcss

Opera and Internet Explorer both store <p class="hide"> in their cache, causing issues with JavaScript functionality

Apologies for asking what might seem like a silly question. I have a basic css file with a class called "hide" that hides an element (how cool!). I use simple javascript to unhide the element: $(document).ready(function(){ var hiddenElement = $("p.hi ...

javascriptjquerycssinternet-exploreropera

Fixed position toolbar within a container positioned beside a dynamically sized sidebar navigation

I'm trying to figure out how to create a fixed toolbar that fills the remaining width of the page when a side nav is collapsible. Setting the width to 100% causes it to overflow the page due to the dynamic nature of the side nav. Using calc() isn&apos ...

javascripthtmlcss

Interference in the output of .innerHTML leads to disruption

I have been working on a feature to display a calculated price based on the selected quantity for each individual product. I attempted to duplicate the code and modify variable names, but encountered issues with the increase/decrease buttons triggering mul ...

javascriptjqueryhtmlcss