Jump to content


macielcr7

Member Since 18/02/2010
Offline Last Active 06/01/2011, 09:00
-----

Topics I've Started

Menu Expansivel Inner Html

30/09/2010, 13:59

esse script que fiz nao funciona no IE, testei nos outros navegadores e funciona perfeito...(FF,OPERA,SAFARI,CHORME)....

o script tem a função de ao usuario diminuir a janela do navegador ele colocar os menus do lado direito dentro do menu COMPLEMENTOS veja dois prints abaixo....

menu COMPLEMENTO NORMAL
Posted Image

MENU COMPLEMENTO COM OS MENUS DA DIREITA INCLUSOS
Posted Image

NO IE FICA ASSIM
NAO MOSTRA OS SUBMENUS E FICA ASSIM....
Posted Image

ALGUEM PODE ME AJUDAR ?

SEGUE O CODIGO ABAIXO....

home.html
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
    <script type="text/javascript" src="menu_expan.js"></script>

    <style>
*{
margin:0px;
padding:0px;
}
body {
     background:#171717; }
div#menu {
    min-width:810px !important;
    text-align:center;
    margin:0px;
    /*    margin:30px auto;*/
    width:100%;
}

</style>

<div id = "menu"  ></div>

<div id="copyright"><a href="http://apycom.com/"></a></div>

menu_expan.js
//MENU INICIAL... COMPLETAR O RESTANTE COM O TIPO DE LARGURA DO NAVEGADOR.....
var Menu = '<ul class="menu" ><li><a href="#"><span>Pagina Inicial</span></a></li><li><a href="#" class="parent"><span>Relatórios</span></a><div><ul><li><a href="#" class="parent"><span>Posições do Veiculo</span></a><div><ul><li><a href="#" class="parent"><span></span></a><div><ul><li><a href="#"><span>Sub Item 1.1.1</span></a></li><li><a href="#"><span>Sub Item 1.1.2</span></a></li></ul></div></li><li><a href="#"><span>Sub Item 1.2</span></a></li><li><a href="#"><span>Sub Item 1.3</span></a></li><li><a href="#" class="parent"><span>Sub Item 1.7</span></a><div><ul><li><a href="#"><span>Sub Item 1.7.1</span></a></li><li><a href="#"><span>Sub Item 1.7.2</span></a></li></ul></div></li></ul></div></li><li><a href="#"><span>Estatistica do Veículo</span></a></li><li><a href="#"><span>Paradas do Veículo</span></a></li></ul></div></li><li ><a href="#"><span>Cerca Eletrônica</span></a></li><li><a href="#"><span>Resíduos</span></a></li><li ><a href="#"><span>Boletos</span></a></li>';

//CASO VALOR SEJE--->810
var Completa = '<li><a href="#" class="parent"><span>Complementos</span></a> <div><ul> <li><a href="#"><span>Alterar Senha</span></a></li> <li><a href="#"><span>Comandos</span></a></li> <li ><a href="#"><span>Download</span></a></li> <li ><a href="#"><span>Teste Poligono</span></a></li> <li ><a href="#"><span>Ponto de Refêrencia</span></a></li> <li ><a href="#"><span>Ponto de Controle</span></a></li> <li><a href="#"><span>Sair</span></a></li> </ul></div> </li> </ul>';
//CASO VALOR SEJE 961	
var Completa2 = '<li><a href="#" class="parent"><span>Complementos</span></a> <div><ul> <li><a href="#"><span>Alterar Senha</span></a></li> <li><a href="#"><span>Comandos</span></a></li> <li ><a href="#"><span>Download</span></a></li> <li ><a href="#"><span>Teste Poligono</span></a></li> <li ><a href="#"><span>Ponto de Refêrencia</span></a></li> <li ><a href="#"><span>Ponto de Controle</span></a></li> </ul></div> </li>  <li><a href="#"><span>Sair</span></a></li>  </ul>';
	 //CASO VALO SEJE 1123
var Completa3 = '<li><a href="#" class="parent"><span>Complementos</span></a> <div><ul> <li><a href="#"><span>Alterar Senha</span></a></li> <li><a href="#"><span>Comandos</span></a></li> <li ><a href="#"><span>Download</span></a></li>	<li ><a href="#"><span>Teste Poligono</span></a></li>  <li ><a href="#"><span>Ponto de Refêrencia</span></a></li> </ul></div> </li><li ><a href="#"><span>Ponto de Controle</span></a></li> <li><a href="#"><span>Sair</span></a></li>  </ul>';
	 //CASO VALOR SEJE 1213
var Completa4 =  '<li><a href="#" class="parent"><span>Complementos</span></a> <div><ul> <li><a href="#"><span>Alterar Senha</span></a></li> <li><a href="#"><span>Comandos</span></a></li> <li ><a href="#"><span>Download</span></a></li>	<li ><a href="#"><span>Teste Poligono</span></a></li> </ul></div> </li><li ><a href="#"><span>Ponto de Refêrencia</span></a></li><li ><a href="#"><span>Ponto de Controle</span></a></li> <li><a href="#"><span>Sair</span></a></li>  </ul>';

 window.onresize = function Mennu(){
 var Div_id = 'menu';
var windowWidth = document.documentElement.clientWidth;
 // 1213 1123 961 810   
 if(windowWidth>=1213){
                     document.getElementById(Div_id).innerHTML = Menu+Completa4;
  }
  if(windowWidth<=1213){
                     document.getElementById(Div_id).innerHTML = Menu+Completa3;
    } if (windowWidth<=1123){
                     document.getElementById(Div_id).innerHTML = Menu+Completa2;
   } if(windowWidth<=961){
                     document.getElementById(Div_id).innerHTML = Menu+Completa;
    } if(windowWidth<=810){
                     document.getElementById(Div_id).innerHTML = Menu+Completa;
   }
}

 window.onload = function Mennu2(){
 var Div_id = 'menu';
var windowWidth = document.documentElement.clientWidth;
 // 1213 1123 961 810   
 if(windowWidth>=1213){
                     document.getElementById(Div_id).innerHTML = Menu+Completa4;
  }
  if(windowWidth<=1213){
                     document.getElementById(Div_id).innerHTML = Menu+Completa3;
    } if (windowWidth<=1123){
                     document.getElementById(Div_id).innerHTML = Menu+Completa2;
   } if(windowWidth<=961){
                     document.getElementById(Div_id).innerHTML = Menu+Completa;
    } if(windowWidth<=810){
                     document.getElementById(Div_id).innerHTML = Menu+Completa;
   }
}

IPB Skin By Virteq