Я разрабатываю сайт для внутреннего использования в нашей компании. Таким образом, seo/optimization и т.д. Не являются проблемой из-за того, что они удаляются из локальных машин, а не из Интернета.
То, что я пытаюсь сделать, - это меню слева (ширина 250 пикселей), которое при нажатии открывается вторым рядом с ним. Когда элемент в этом меню щелкнут, он открывается в рамке в сторону второго меню. Если вы посмотрите на прикрепленную картинку, это даст лучшее представление о макете.
http://rhinoaustralia.com/application/layoutProblems.jpg
Я поставил основной сайт здесь: http://rhinoaustralia.com/application/
(обратите внимание, что контент отсутствует, и работает только несколько вещей, но я пытаюсь сначала запустить макет). Файлы css можно найти через firebug и т.д.
Что есть одна страница, содержащая первое меню, в котором есть iframe рядом с ним. Когда кто-то нажимает на элемент меню, он открывает новую страницу рядом с ним. На этой новой странице также есть меню с iframe рядом с ним, так что, когда что-то в этом меню нажата, оно отображается в новом iframe.
Такие работы, но у меня возникают проблемы с получением фреймов в полноэкранном режиме и настройкой на разные размеры экрана. По какой-то причине в IE он также не скрывает границы.
Может быть, есть лучший способ сделать это, кроме вложенных iframe?
Это главная страница/первая страница:
<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>
Любая помощь ценится!
Я думаю, что использование iFrames для этой функции - не самая лучшая идея, поскольку, по сути, она все еще заполняет 100% ширину iFrame div, как это говорит CSS, но при меньших размерах экрана второй iFrame doesn У меня есть место, чтобы поместиться и исчезнуть.
Возможно, вы могли бы просто сделать это, разместив активы внутри divs локально? Или, для более гладкого решения, попробуйте использовать библиотеку jQuery Mega Menu: http://designingmedia.com/html/fbar/?theme=FHMM
Удачи!