bdexterholland 0 Denunciar post Postado Fevereiro 5, 2015 Olá, Eu estou queimando cuca com um menu vertical aqui acho que após esquentar tanto a cabeça não consigo ver uma solução. O grupo poderia me ajudar me mostrando o que preciso fazer para que o submenu fique a direta do menu principal? A idéia é inspirada no menu do submarino. Segue código: <html> <head> <title>Teste ferrado</title> <link href="./teste.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="areaNavegacao"> <div id="areaMenuPrincipal"> <ul id="menuPrincipal"><li id="promocoes" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Promoções</li> <li id="acougue" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Açougue<ul class="subMenu"><li class="itemSubMenu"><a href="http://192.168.0.173/magento/acougue/maquinas-para-produc-o.html">Máquinas para Produção</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/acougue/balc-o-expositor-carnes-e-salsicharia.html">Balcão Expositor Carnes e Salsicharia</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/acougue/expositor-para-congelados.html">Expositor para Congelados</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/acougue/estoque-e-armazenagem.html">Estoque e Armazenagem</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/acougue/expositor-cervejeiras-e-refrigerantes.html">Expositor Cervejeiras e Refrigerantes</a></li> </ul> </li> <li id="lanchonete" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Bar e Lanchonete<ul class="subMenu"><li class="itemSubMenu"><a href="http://192.168.0.173/magento/lanchonete/fritadores-e-tachos.html">Fritadores e Tachos</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/lanchonete/chapas-e-sanduicheiras.html">Chapas, Sanduicheiras, Crepe e Salsicheria</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/lanchonete/forno-para-pizza.html">Forno para Pizza</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/lanchonete/fogoes-com-e-sem-forno.html">Fogões com e sem forno</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/lanchonete/liquidificadores-trituradores-e-extratores.html">Liquidificadores, Trituradores e Extratores </a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/lanchonete/manipuladores-de-alimentos.html">Manipuladores de Alimentos</a></li> </ul> </li> <li id="padaria" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Padaria<ul class="subMenu"><li class="itemSubMenu"><a href="http://192.168.0.173/magento/padaria/maquinarios-para-producao-padaria.html">Maquinários para Produção</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/padaria/acessorios-e-complementos.html">Acessórios e complementos</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/padaria/expositores-refrigerados.html">Expositores refrigerados</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/padaria/expositores-secos.html">Expositores secos</a></li> </ul> </li> <li id="restaurante-e-cozinhas" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Restaurante e cozinha<ul class="subMenu"><li class="itemSubMenu"><a href="http://192.168.0.173/magento/restaurante-e-cozinhas/mesas-e-cadeiras.html">Mesas e cadeiras</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/restaurante-e-cozinhas/equipamentos-para-cozinha.html">Equipamentos para cozinha</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/restaurante-e-cozinhas/balcoes-e-expositores.html">Balcões e expositores</a></li> </ul> </li> <li id="supermercados" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Supermercados<ul class="subMenu"><li class="itemSubMenu"><a href="http://192.168.0.173/magento/supermercados/gondolas-e-expositores.html">Gôndolas e expositores</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/supermercados/acessorios.html">Acessórios</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/supermercados/expositores-refrigerados.html">Expositores refrigerados</a></li> </ul> </li> <li id="equipamentos" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Equipamentos<ul class="subMenu"><li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/balancas.html">Balanças</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/balcoes-e-expositores.html">Balcões e Expositores</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/caixa-e-check-out.html">Caixa e Check-out</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/chapa-para-lanches-churrasco.html">Chapa para Lanches</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/carrinhos.html">Carrinhos</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/conservadores-e-resfriadores.html">Conservadores e Resfriadores</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/diversos.html">Diversos</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/expositor-de-bebidas.html">Expositor de Bebidas</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/expositores-para-laticinios.html">Expositores para Laticinios</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/freezer-vertical-expositor.html">Freezer Vertical</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/fogoes-industriais.html">Fogão Industrial</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/fornos-gas-e-eletrico.html">Fornos (gás e eletrico)</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/freezer-horizontal.html">Freezer Horizontal</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/fritadores.html">Fritadores</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/geladeira-para-bebidas.html">Geladeira para Bebidas</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/geladeira-para-cervejas.html">Geladeira para Cervejas</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/geladeira-para-sorvetes.html">Geladeira para Sorvetes</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/hortifruti-lateral.html">Hortifruti Lateral</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/ilha-para-congelados.html">Ilha para congelados</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/kit-churrasco.html">Kit Churrasco</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/mesas-e-cadeiras.html">Mesas e Cadeiras</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/produc-o-e-fabricac-o.html">Produção e Fabricação</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/ventiladores.html">Ventiladores e Climatizadores</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/linha-gelopar.html">Linha Gelopar</a></li> <li class="itemSubMenu"><a href="http://192.168.0.173/magento/equipamentos/produtos-nr12.html">Produtos NR12</a></li> </ul> </li> </ul> </div> </body>Folha de estilo: /* ------- Menu principal verticalizado ------- */ #areaMenuPrincipal { display: inline-block;} #slideShowMagento { display: inline-block; width: 700px; vertical-align: top; } #menuPrincipal { margin-top: 27px; background-color: #ececec; text-align: left; font-family: ubuntu; font-size: 12pt; width: 240px; } .itemMenu { display:inline-block; width: 210px; padding: 6px 15px;} .itemMenu:hover { background-color: #005c8e; color: white; cursor: pointer; } .subMenu { width: 240px; background-color: #005c8e; color: white; z-index: -9999; position: relative; left: -99999; top: 0; } .itemSubMenu { display:inline-block; width: 240px; padding: 6px 15px;} .itemSubMenu:hover { background-color: #0384cb;} .itemSubMenu a { color: white; } .itemSubMenu:hover a { text-decoration: none; } Gambiarra em JS <script type="text/javascript"> var subMenuAtivo = null; function escondeSubMenu() { subMenuAtivo[0].style.left = "-9999px"; subMenuAtivo[0].style.zIndex = "-9999"; subMenuAtivo = null; return null; } function mostraSubMenu(el) { subMenuAtivo = el.getElementsByClassName("subMenu"); subMenuAtivo[0].style.left = "225px"; subMenuAtivo[0].style.zIndex = "09999"; return null; } </script>Obrigado pela ajuda! Compartilhar este post Link para o post Compartilhar em outros sites
Electronic 124 Denunciar post Postado Fevereiro 5, 2015 Nao precisa de nenhum JS Veja como ficou http://adf.ly/z1Mw1 o ponto principal é esse aqui #menuPrincipal > .itemMenu:hover .subMenu{ display: list-item; list-style: none; padding: 0; width: 100%; } agora vc faz o ajustes Compartilhar este post Link para o post Compartilhar em outros sites
bdexterholland 0 Denunciar post Postado Fevereiro 6, 2015 Obrigado pela tentativa. Na verdade não era isto que eu esperava. Desta forma, o submenu é carregado logo abaixo do elemento pai do menu principal. O que eu esperava é que o submenu fosse carregado a direita do menu principal, como acontece no submarino. Compartilhar este post Link para o post Compartilhar em outros sites
Electronic 124 Denunciar post Postado Fevereiro 6, 2015 eu nao fiz tudo, por isso disse que agora você faz o ajustes position relative no .itemMenu e position absolute no .submenu e ajusta os valores e largura conforme sua pagina fica assim http://jsfiddle.net/n2n1zt43/1/ Compartilhar este post Link para o post Compartilhar em outros sites
bdexterholland 0 Denunciar post Postado Fevereiro 6, 2015 Obrigado novamente, não era minha intenção ser o usuário chato, é que a ajuda do código que você havia me oferecido anteriormente era uma situação na qual eu já havia encontrado mas a que procurava mesmo não foi oferecida. Agora com a cabeça mais fresca eu consegui usar o position relative e absolute como você disse. De qualquer forma, novamente eu agradeço sua ajuda! Compartilhar este post Link para o post Compartilhar em outros sites
