Hi guys,

I'm really new to web development and I need your help in getting my sample page modified.

I've downloaded a sample drop down menu template and I just need it to modify to meet my needs.

Attached is the files. Basically, I just need to do the following:

1. When I hover the mouse to the "Reports" menu, I want the drop down menu to show not on the green arrow.

2. If I choose 111111111 in the drop down menu, the 1.pdf file should show right below the page menu (in the white area of the page) not in a new page so that I can still open new reports 222222 and 3333333 without hitting the "back" button in the browser.


Appreciate if you can help me on this.

thanks in advance!

Member Avatar for ovidiu_b13

One easy way to do this is to use an iframe. Place an iframe where you want the file, and the iframe should point to the file.

Member Avatar for ovidiu_b13

For example:

<a href="1.pdf" target="iframe_a">111111111</a>
<iframe src="demo_page.html" name="iframe_a"></iframe>

hi ovidiu_b13.. based on your example, do i need to create the demo_page.html? also, will the PDF file open on the same page right below the menus?

thanks for your reply.

Member Avatar for ovidiu_b13

The demo_page.html can be one of the files, if you want. That is the page that will open when you load the page the first time.
for the second question, YES.

Here is an old example I've made: http://amcenter.ro/produse.html

Hi ovidiu_b13.. when i hover the mouse to the menu, the pdf file shows up. it does wait for me to click the menu (111111). also the pdf file doesn't show up in the white space below. it shows right next to the 111111 menu.

your example is the one exactly i need. hope you can help me with the right code.

thanks!

Member Avatar for ovidiu_b13

where have you placed your iframe?

this is the sample that i did..

</head>

<body>
<div class="container">
    <div id="header">
    	 <div class="disclaimer">Report by <a href="#">Services</a>.</div>
        <ul class="topnav">
            <li><a href="#">Home Page</a></li>
            <li>
                <a href="#">Reports</a>
                <ul class="subnav">
                    <li><a href="1.pdf" target="iframe_a">111111111</a>
			<iframe src="index.html" name="iframe_a"></iframe></li>
                    <li><a href="2.pdf">22222222222222</a></li>
                    <li><a href="3.pdf">33333333333333</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>


</body>
</html>
Member Avatar for ovidiu_b13

Place it after you close your <div class="container"> tag.

Member Avatar for ovidiu_b13
</head>
 
<body>
<div class="container">
    <div id="header">
    	 <div class="disclaimer">Report by <a href="#">Services</a>.</div>
        <ul class="topnav">
            <li><a href="#">Home Page</a></li>
            <li>
                <a href="#">Reports</a>
                <ul class="subnav">
                    <li><a href="1.pdf" target="iframe_a">111111111</a></li>
                    <li><a href="2.pdf">22222222222222</a></li>
                    <li><a href="3.pdf">33333333333333</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>
 
<iframe src="index.html" name="iframe_a"></iframe> 
</body>
</html>

hi ovidiu_b13.. thanks! seems to be working. can teach me how to position the pdf in the center? thanks again!

also, how come if the 1111111 PDF file is already displayed, the drop down menu selection doesn't work anymore for me to chose another PDF file?

Member Avatar for ovidiu_b13

Place the Iframe in a DIV and give the DIV a width and auto margin on left and right.

<div style="width:300px;  margin: 0px auto;"><iframe style="width:300px;" src="demo_iframe.htm" name="iframe_a"></iframe></div>
Member Avatar for ovidiu_b13

Can I see your code?

Have you placed links to each pdf for each menu item?
in the IFRAME tag the page/file you place in the src="" attribute is the page/file that is loaded when you open the page. You can leave the src="" empty if you want.

hi ovidiu_b13.. here's what i did. thanks a lot for helping me :)

</head>
 
<body>
<div class="container">
    <div id="header">
    	 <div class="disclaimer">Report by <a href="#">Services</a>.</div>
        <ul class="topnav">
            <li><a href="#">Home Page</a></li>
            <li>
                <a href="#">Reports</a>
                <ul class="subnav">
                    <li><a href="1.pdf" target="iframe_a">111111111</a></li>
                    <li><a href="2.pdf">22222222222222</a></li>
                    <li><a href="3.pdf">33333333333333</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>
 
<iframe src="blank.html" name="iframe_a" style="width:1800px; height:800px;" frameborder="0"></iframe> 
</body>
</html>
Member Avatar for ovidiu_b13

you forgot the target attribute for the other menu items. And use the example I showed you to center it.

here's the revised code. it centers now however, the drop down menu is no longer working if 111111PDF is displayed. it seems the iframe covers it up?

</head>
 
<body>
<div class="container">
    <div id="header">
    	 <div class="disclaimer">Report by <a href="#">Services</a>.</div>
        <ul class="topnav">
            <li><a href="#">Home Page</a></li>
            <li>
                <a href="#">Reports</a>
                <ul class="subnav">
                    <li><a href="1.pdf" target="iframe_a">111111111</a></li>
                    <li><a href="2.pdf">22222222222222</a></li>
                    <li><a href="3.pdf">33333333333333</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>
 
<div style="width:900px;  margin: 0px auto;"><iframe style="width:900px;" src="demo_iframe.htm" name="iframe_a"></iframe></div>
 
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.