[Resolvido] menu expansivel INNER HTML
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
/applications/core/interface/imageproxy/imageproxy.php?img=http://lh4.ggpht.com/_qaWY8u8laBg/TKS7AlR9zEI/AAAAAAAAAEo/gRVsGAsbdgc/s512/2.gif&key=54009979957892a42d343307a74ae45ef3fde620146e19d7e307abfd2ffea3c7" alt="Imagem Postada" />
MENU COMPLEMENTO COM OS MENUS DA DIREITA INCLUSOS
/applications/core/interface/imageproxy/imageproxy.php?img=http://lh5.ggpht.com/_qaWY8u8laBg/TKS7AmoOWuI/AAAAAAAAAEs/pnXbnV0ZtxM/s512/3.gif&key=d2a7fdae17732c7a370bf5c753d47d32ec3dae33b5bd464506d9133cd2cfed3d" alt="Imagem Postada" />
NO IE FICA ASSIM
NAO MOSTRA OS SUBMENUS E FICA ASSIM....
/applications/core/interface/imageproxy/imageproxy.php?img=http://lh6.ggpht.com/_qaWY8u8laBg/TKS7yDG9ftI/AAAAAAAAAEw/vsjV_DU9IbU/4.gif&key=5e4cfc9c5a1f67f672f2335fa7a5dfcd738a22e5eba4017c73b7c93d61b1c74f" alt="Imagem Postada" />
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;
} 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/">](http://apycom.com/)//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;
}
}Discussão (1)
Carregando comentários...