Menu CSS + Iframe

TadeuSilva · Março 28, 2013

Olá pessoal, boa noite.

Estou com um problema cruel de CSS. Não sou designer nem manjo muito de css, na verdade sou programador, por isso peço a paciência de vocês.

Bom vamos lá ao problema...

Eu tenho uma estrutura de um sistema hoje que é com frames, sim, frames. E estou fazendo um trabalho de melhoria desse sistema inclusive o layout. A forma como esta estruturado o sistema não consigo fazer muita coisa, então na verdade estou tirando de frames e colocando Iframes.

Bom, vou exemplificar primeiro...

Aqui eu tenho um exemplo funcionando, onde na mesma pagina eu tenho o css que faz a estrutura da pagina e o menu tbm esta aqui, sem iframes por enquanto:

Index.html

<html>
	<head>
		 <style type="text/css">
          body{
            margin: 0;
            padding: 0;
            border: 0;
            overflow: hidden;
            height: 100%; 
            max-height: 100%; 
          }
          #framecontentTop, #framecontentBottom{
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 70px; /*Height of top frame div*/
            overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
            background-color: navy;
            z-index:999;
            display:block;
          }
          #framecontentBottom{
            top: auto;
            bottom: 0; 
            height: 40px; /*Height of bottom frame div*/
            overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
            background-color: navy;
            color: white;
          }   
          #maincontent{
            position: fixed; 
            top: 70px; /*Set top value to HeightOfTopFrameDiv*/
            left: 0;
            right: 0;
            bottom: 40px; /*Set bottom value to HeightOfBottomFrameDiv*/
            overflow: auto; 
            background: #fff;
            z-index:998;
            display:block;
          }
          .innertube{
            margin: 0px; /*Margins for inner DIV inside each DIV (to provide padding)*/
          }
          * html body{ /*IE6 hack*/
            padding: 70px 0 40px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
          } 
          * html #maincontent{ /*IE6 hack*/
            width: 100%; 
          }
      </style>
      <link href="menu.css" rel="stylesheet" type="text/css">
      </head>
    <body>
      <div id="framecontentTop">
        <div class="innertube">
          <!--<iframe src="menu.html" name="header" frameborder="0" scrolling="no" style="width:100%;height:70px;position:fixed;" ></iframe>-->
          <div id='cssmenu'>
			<ul>
			   <li><a href='#'><span>Home</span></a></li>
			   <li class='has-sub '><a href='#'><span>Products</span></a>
			      <ul>
			         <li class='has-sub '><a href='#'><span>Product 1</span></a>
			            <ul>
			               <li><a href='#'><span>Sub Product</span></a></li>
			               <li><a href='#'><span>Sub Product</span></a></li>
			            </ul>
			         </li>
			         <li class='has-sub '><a href='#'><span>Product 2</span></a>
			            <ul>
			               <li><a href='#'><span>Sub Product</span></a></li>
			               <li><a href='#'><span>Sub Product</span></a></li>
			            </ul>
			         </li>
			      </ul>
			   </li>
			   <li><a href='#'><span>About</span></a></li>
			   <li><a href='#'><span>Contact</span></a></li>
			</ul>
			</div>
        </div>
      </div>
      <div id="maincontent">
        <iframe src="principal.html"  name="principal" frameborder="0" scrolling="auto" style="width:100%; height:100%;z-index:-1;position:fixed;"></iframe>   
      </div>
      <div id="framecontentBottom">
        <div class="innertube">
          <iframe src="trailler.html"  name="toolbar" frameborder="0"  scrolling="no" style="width:100%"></iframe>
        </div>
      </div>
	</body>
</html>

Css do menu:

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #e00f16;
  position: fixed;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e00f16;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #e00f16;
  border-bottom: 1px dotted #ec6f73;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #b00c11;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #b00c11;
  border-bottom: 1px dotted #d06d70;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #80090d;
}

Resultado funcionando perfeitamente, quando coloco o mouse em cima do menu que é do tipo Drop Down as opções ficam por cima da div principal.

Agora o problema é quando eu coloco um iframe no lugar do menu com o codigo dele.

Ele aparece, mas quando eu coloco o mouse em cima ele não fica por cima da principal, ele só ocupa aquele espaço do iframe do menu.

Precisava que ele ficasse por cima de tudo, independente de qual pagina ele estivesse.

Se alguém puder me ajudar eu agradeço.

Obrigado

caio0220 · Março 28, 2013

com iframe isso fica complecado, já que o iframe é como se fosse uma outra janela e portanto ele é limitado por sua largura e altura.

Esqueça o iframe, seria inviável colocar tudo em uma div?

Se você está fazendo melhorias no sistema então mude de uma vez para div.

TadeuSilva · Março 28, 2013

Então, o ideal seria mesmo colocar tudo pra DIV.

Mas acontece que o sistema é muito grande e o meu prazo muito curto pra fazer isso, e eu tambem não tenho um designer pra me ajudar, então o menos pior seria conseguir fazer com o iframe.

Eu pensei em usar o z-index, mas não sei se tenho que mexer no position para funcionar o z-index.

Não sei, será que não teria possibilidade mesmo ?

caio0220 · Março 28, 2013

O fogo é que quando define-se o tamanho de um iframe ele vira um janela e o que está dentro dele, não vai aparecer fora. Tavlez poderia rolar uma gambiarra com position e altura no hover, mas não sei se iria funcionar.

Vou tentar explicar

digamos eu a altura do menu é de 30px.

Coloque o iframe com position absolute e z-index alto (pode ser 999), quando for o iframe:hover (mouse over) a altura do iframe aumenta e como está com position ele não vai quebrar o conteúdo abaixo.

espero que tenha entendido.

Entrar

Arquivado

Menu CSS + Iframe

Recommended Posts

TadeuSilva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

caio0220 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

TadeuSilva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

caio0220 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante