2014-05-06 114 views
0

我正在開發一個網站在我們公司內部使用。 因此,seo /優化等是沒有問題的,因爲它運行在本地機器而不是網絡。iFrame佈局和滾動問題

我想要做的是在左邊有一個菜單(250像素寬),點擊後,打開旁邊的第二個菜單。當點擊此菜單中的項目時,它將打開到第二個菜單的邊框。如果你看看附圖,它會更好地理解佈局。

http://rhinoaustralia.com/application/layoutProblems.jpg

我已經把這裏的基本部位: http://rhinoaustralia.com/application/

(注意,內容缺失,只有少數工作的事情,但我想獲得的佈局工作第一)。 css文件可以通過螢火蟲等找到

什麼是一個單一的頁面,其中包含一個iframe旁邊的第一個菜單。當有人點擊菜單項時,它會在其旁邊打開一個新頁面。這個新頁面還有一個菜單,旁邊有一個iframe,這樣當點擊這個菜單中的內容時,它會顯示在新的iframe中。

這類作品,但我有問題的獲取iframes是全屏和調整到不同的屏幕尺寸。出於某種原因,在IE中它也沒有隱藏邊界。

也許有更好的方法來做到這一點,而不是嵌套iframes?

這是主要的頁/第一頁:

<div id="container" style="width:100%"> 

<div id="header" style="background-color:#222;"> 
    <h1>Rhino Australia Rugby Union</h1></div> 

    <div id="menu" style="background-color:#222;width:250px;float:left;"> 
     <ul class="ca-menu"> 
       <li> 
        <a href="rugby-union-scrum-menu.html" target="iframe_rugby-union-menu"> 
         <span class="ca-icon"><img src="images/rugby-union/collision-king.jpg" width="100" height="100" alt=""/></span> 
         <div class="ca-content"> 
          <h2 class="ca-main">Scrum & <br/>Breakdown</h2> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="rugby-union-tackle-bag-menu.html" target="iframe_rugby-union-menu"> 
         <span class="ca-icon"><img src="images/rugby-union/low-bag-grip-and-rip.jpg" width="100" height="100" alt=""/></span> 
         <div class="ca-content"> 
          <h2 class="ca-main">Tackle Pads <br/> & Bags</h2> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="rugby-union-balls-menu.html" target="iframe_rugby-union-menu"> 
         <span class="ca-icon"><img src="images/rugby-union/vortex-pro.jpg" width="100" height="100" alt=""/></span> 
         <div class="ca-content"> 
          <h2 class="ca-main">Balls</h2> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="rugby-union-training-equipment-menu.html" target="iframe_rugby-union-menu"> 
         <span class="ca-icon"><img src="images/rugby-union/rhino-body-armour.jpg" width="100" height="100" alt=""/></span> 
         <div class="ca-content"> 
          <h2 class="ca-main">Training <br/> Equipment</h2> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="rugby-union-accessory-menu.html" target="iframe_rugby-union-menu"> 
         <span class="ca-icon"><img src="images/rugby-union/water-bottle-carrier-metal.jpg" width="100" height="100" alt=""/></span> 
         <div class="ca-content"> 
          <h2 class="ca-main">Accessories</h2> 
         </div> 
        </a> 
       </li> 
      </ul> 
     </div> 

    <div id="content" style="background-color:#222; color:#FFF;float:left; width:80%; height:700px "> 
    <iframe src="rugby-union-scrum.html" name="iframe_rugby-union-menu" width="100%" height="90%" frameborder="0"></iframe> 
    </div> 
</div> 

而且繼承人的新的一頁,在打開的iFrame:

<div id="container" style="width:100%"> 

    <div id="menu" style="background-color:#222;height:400px;width:300px;float:left;"> 
     <ul class="ca-menu"> 
       <li> 
        <a href="bulldog-sled.html" target="iframe_rugby-union"> 
         <span class="ca-icon"><img src="images/rugby-union/scrum-sled.jpg" width="100" height="100" alt=""/></span> 
         <div class="ca-content"> 
          <h2 class="ca-main">Scrum Sled <br/> Machine</h2> 
          <h3 class="ca-sub">$7080</h3> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="collision-king.html" target="iframe_rugby-union"> 
         <span class="ca-icon"><img src="images/rugby-union/collision-king.jpg" width="100" height="100" alt=""/></span> 
         <div class="ca-content"> 
          <h2 class="ca-main">Collision King</h2> 
          <h3 class="ca-sub">$3590</h3> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <span class="ca-icon"><img src="images/rugby-union/one-man-portable-scrum.jpg" width="100" height="100" alt=""/></span> 
         <div class="ca-content"> 
          <h2 class="ca-main">Portable Scrum <br/> Machine</h2> 
          <h3 class="ca-sub">$2770</h3> 
         </div> 
        </a> 
       </li> 
      </ul> 
     </div> 

    <div id="content" style="background-color:#222; color:#FFF;float:left; width:800px; height:700px"> 
    <iframe src="rugby-union.html" name="iframe_rugby-union" width="100%" height="90%" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false">></iframe> 
    </div> 
</div> 

任何幫助表示讚賞!

回答

0

我在考慮使用iFrames這個功能並不是最好的主意,因爲基本上發生的事情是它仍然填充100%寬度的iFrame div,就像CSS告訴它的那樣,但是在較低的屏幕尺寸下,第二個iFrame沒有空間可以放置並消失。

也許你可以通過將資源放置在div的本地資源來做到這一點?或者,對於更時尚的解決方案,請嘗試使用jQuery Mega Menu庫:http://designingmedia.com/html/fbar/?theme=FHMM

祝你好運!