Marcos Moleiro 0 Denunciar post Postado Abril 18, 2006 Olá!! Peguei um exemplo de menu no site do Maurício Samy Silva (http://www.maujor.com/tutorial/ddownmenu-a.php) e adaptei para ficar na horizontal. Ficou bom, mas gostaria que somente os submenus ficassem na vertical mas não estou conseguindo... se alguém puder me ajudar desde já meu muito obrigado!! Marcos <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"><head><meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" /><meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." /><meta name="author" content="Nick Rigby" /><meta name="MSSmartTagsPreventParsing" content="true" /><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="Pragma" content="no-cache" /><meta name="robots" content="all" /><meta name="language" content="pt-br" /><meta name="ICBM" content="-22.975781,-43.193082" /><meta name="DC.title" content="CSS para Web Design" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Horizontal Drop Down Menus - Parte 3</title><script type="text/javascript">function IEHoverPseudo() { var navItems = document.getElementById("primary-nav").getElementsByTagName("li"); for (var i=0; i<navItems.length; i++) { if(navItems[i].className == "menuparent") { navItems[i].onmouseover=function() { this.className += " over"; } navItems[i].onmouseout=function() { this.className = "menuparent"; } } }}window.onload = IEHoverPseudo;</script><style type="text/css">body { font: normal 62.5% verdana; }ul#primary-nav,ul#primary-nav ul { margin: 0; padding: 0;/* width: 600px; */ /* Width of Menu Items */ border-bottom: 0px; solid #ccc; background: #fff; /* IE6 Bug *//* background: blue; /* IE6 Bug */ cor do fundo dos menus font-size: 100%; }ul#primary-nav li { position: relative; list-style: none; display: inline; float:left; }ul#primary-nav li a { display: block; text-decoration: none; float:left; color: #777;/* color: red; cor das letras do menu */ padding: 5px; border: 1px solid #ccc; border-bottom: 1; }/* Fix IE. Hide from IE Mac \*/* html ul#primary-nav li { float: left; height: 1%; }* html ul#primary-nav li a { height: 1%; }/* End */ul#primary-nav ul { position: absolute; display: none; left: 0px; /* Set 1px less than menu width */ top: 23px; }ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ul#primary-nav li:hover ul ul ,ul#primary-nav li:hover ul ul ul,ul#primary-nav li.over ul ul,ul#primary-nav li.over ul ul ul { display: none; top: 17px;} /* Hide sub-menus initially */ul#primary-nav li:hover ul,ul#primary-nav li li:hover ul,ul#primary-nav li li li:hover ul,ul#primary-nav li.over ul,ul#primary-nav li li.over ul,ul#primary-nav li li li.over ul { display: block; } /* The magic */ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; } /* ul#primary-nav li.menuparent { background: yellow url(arrow-down.gif) right center no-repeat; } Cor dos que tem o -> */ul#primary-nav li.menuparent:hover,ul#primary-nav li.over { background-color: #f9f9f9; }/*ul#primary-nav li.over { background-color: blue } cor da selecao quando tem submenu */ul#primary-nav li a:hover { color: #E2144A; }/*ul#primary-nav li a:hover { color: blue; background-color: blue} cor da letra dos menus com selecao / cor do fundo */</style></head><body><h1>EXEMPLO DE MENU PRINCIPAL NA HORIZONTAL</h1><h2>Adaptação feita por:</h2>Marcos Antunes Moleiro<br><br><ul id="primary-nav"> <li><a href="#">Home</a></li> <li class="menuparent"><a href="#">About </a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li class="menuparent"><a href="#">Services </a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li class="menuparent"><a href="#">Hosting </a> <ul> <li><a href="#">Dedicated</a></li> <li><a href="#">Virtual</a></li> <li><a href="#">Shared</a></li> <li><a href="http://www.uem.br" target="_blank">Managed</a></li> </ul> </li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li class="menuparent"><a href="#">Contact Us </a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li></ul></body></html> Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Abril 18, 2006 Vê se te ajuda: http://forum.imasters.com.br/index.php?act...e=menu+vertical Se não, posta ae denovo. Compartilhar este post Link para o post Compartilhar em outros sites
Giovani 104 Denunciar post Postado Abril 19, 2006 E ai Marcos, Tente colocar um link com a sua página e não o código. Torna mais rápido a ajuda aqui do pessoal! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Abraços! Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Moleiro 0 Denunciar post Postado Abril 19, 2006 ok... vou tentar... Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Moleiro 0 Denunciar post Postado Abril 19, 2006 Valeu micox!No link que você me passou encontrei um outro link (http://solardreamstudios.com/learn/css/cssmenus/) postado pelo Santiago que faz exatamente o que eu preciso... Obrigado!MarcosPs. Como você fez essa busca?? Tento mais não consigo... digito em Procurar por Palavra-chave "menu+vertical" (sem as aspas) mas só retorna a minha postagem! Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Abril 20, 2006 Realmente a busca aqui do invisionBoard não está muito boa.Eu mandei pesquisar pelas palavras "menu vertical" (sem as aspas) dentro do forum webstandards. Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Moleiro 0 Denunciar post Postado Abril 20, 2006 Agora funcionou a busca... vai saber :wacko: Com relação ao menu, mudei os Css para poder usar mais submenus. Agora dá para usar até o 4 submenus (acho que exagerei http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif ). Também fiz alterações no html para poder usar uma seta como imagem para os submenus, já que no código original (em solardreamstudios) usava o sinal de "+". Os menus originais (com os "+") podem ser vistos em: Original Horizontal Original Vertical os menus modificados (com as setas) podem ser vistos em: Menu Horizontal Menu Vertical Ficou bom, mas... o código html dos menus para aceitarem a seta ficaram muito repetitivos, pois sempre deve-se escrever: STYLE="background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat;" como pode ser visto nesta parte do código: ... <li><a href="#" STYLE="background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat;"> Learn </a> <ul> <li><a href="#" STYLE="background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat;"> Fireworks</a> <ul>... Para evitar essa repetição tentei criar um estilo chamado seta da seguinte forma... #seta { background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat}... <li><a href="#" ID="seta"> Learn </a> <ul> <li><a href="#" ID="seta"> Fireworks</a> <ul>... ... mas não deu certo... alguém poderia me ajudar??? Obrigado! Marcos Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Abril 20, 2006 Simples. Troque o ID="seta" por class="seta".ID é o identificador (nome) do elemento.Ah e procure usar sempre minúsculas pra ficar no padrão.Muito boa sua solução. Parabéns... Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Moleiro 0 Denunciar post Postado Abril 20, 2006 Mesmo assim não funciona (a seta não aparece)...acho que deve ser por causa dessa parte do código que inicia o menu<ul id="navmenu">e ai não consegue achar o estilo "seta"Aguadeço a ajuda desde ját+Marcos Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Abril 20, 2006 Marcos. Estude sobre seletores. no site do maujor explica bem. Seu código ficará assim: .seta { /* <-- Alterado de # (malha) para . (ponto) */background-position: center right;background-image: url(SetaDireita.gif);background-repeat: no-repeat}... <li><a href="#" class="seta"> <!-- alterado para class --> Learn </a> <ul> <li><a href="#" class="seta"> <!-- alterado para class --> Fireworks</a> <ul> Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Moleiro 0 Denunciar post Postado Abril 21, 2006 Realmente preciso estudar um pouco mais... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif!! Não querendo ser chato, mesmo assim não funcionou! Veja a figura abaixo: http://img126.imageshack.us/my.php?image=c...061118387vj.jpg O que será que está acontecendo? http://forum.imasters.com.br/public/style_emoticons/default/cry.gif Se puder me ajudar, desde já agradeço! t+ Marcos Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Abril 22, 2006 Poste o link ou o código (link de preferencia). Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Moleiro 0 Denunciar post Postado Abril 22, 2006 Já consegui algum progresso, estudei um pouco mais e fiz as seguintes modificações: no html ...<ul id="navmenu"> <li><a href="#">Blog</a></li> <li class="setabaixo"><a href="#"> Work </a> <ul> <li class="setadireita"><a href="#"> Websites</a> <ul>...no css .../* Alterações feitas para colocar setas nos menus */ul#navmenu li.setabaixo a { background-position: center right; background-image: url(SetaBaixo.gif); background-repeat: no-repeat}ul#navmenu li.setadireita a ,ul#navmenu ul li.setadireita a ,ul#navmenu ul li.setadireita:hover a ,ul#navmenu ul li.setadireita li.setadireita a ,ul#navmenu ul li.setadireita li.setadireita:hover a ,ul#navmenu ul li.setadireita li.setadireita li.setadireita a ,ul#navmenu ul li.setadireita li.setadireita li.setadireita:hover a { background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat}... Esta funcionando perfeitamente no Mozilla/Firefox, mas no internet explorer não :o Olhe só as imagens: Tela de Menu no IE Tela de Menu no Mozilla Aqui está o link para o menu: Link para o Menu O que devo fazer para rodar no IE?? Muito obrigado desde já Marcos Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Abril 24, 2006 No IE o hover só pode ser aplicado a elementos <a>.Mas testei aqui no IE6 e parece que tá igual. você já mudou o código fonte? Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Moleiro 0 Denunciar post Postado Abril 24, 2006 Então... no Mozilla/Firefox funciona bem, mas no internet explorer não. Nas fotos dos screenshots da minha última mensagem você pode ver que os menus abrem no IE6 só que quando o mouse está sobre o menu/submenu as setas somem... e aí que é o problema...Acho que tenho que modificar alguma coisa no .js para que aceite a classe setadireita, mas não estou conseguindo.... o que você acha???obrigado!Marcos Compartilhar este post Link para o post Compartilhar em outros sites
micox 2 Denunciar post Postado Abril 24, 2006 você observou o que eu disse antes ou nem leu? No IE o hover só pode ser aplicado a elementos <a>. Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Moleiro 0 Denunciar post Postado Abril 24, 2006 Li sim... é que no arquivo html.js tem um código que corrige essa falha do IE... navHover = function() { var lis = document.getElementById("navmenu").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].onmouseover=function() { this.className+=" iehover"; } lis[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } }}if (window.attachEvent) window.attachEvent("onload", navHover); Como a rotina funciona no Mozilla com as modificações que eu fiz, e tem uma rotina em JavaScript que corrige essa falha que você colocou, não sei porque não está funcionando!! Será que devo acrescentar a classe setadireita no JavaScript?? Como?? Obrigado! Marcos Compartilhar este post Link para o post Compartilhar em outros sites
fabfernandes 0 Denunciar post Postado Abril 28, 2006 Marcos.... você poderia nos mostrar como ficou o codigo finalizado? os liks que você passou estao todos furados... Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Moleiro 0 Denunciar post Postado Abril 30, 2006 Olá a todos!! Consegui fazer o menu da maneira como queria http://forum.imasters.com.br/public/style_emoticons/default/joia.gif Os links da minha última mensagem estão desatualizados pois estava alterando-os para um novo modelo que encontrei na internet. Pesquisando aqui no imasters (não sei em quais mensagens, desculpe a falta do crédito, pois foram muitas mensagens pesquisadas) encontrei um link que me levou a outro link e desse a um outro link com o seguinte artigo: http://www.htmldog.com/articles/suckerfish/dropdowns/ Lendo e estudando o artigo acima pude entender um pouco mais sobre como trabalhar com menus horizontais. Com o artigo acima descobri uma nova forma de construção do CSS (um pouco diferente dos meus posts anteriores) bem mais claro e simples. Neste mesmo artigo tem um exemplo de menu horizontal bem interessante: http://www.htmldog.com/articles/suckerfish...pdowns/example/ Fiz algumas mudanças no código para se adaptar as minhas necessidades: Cores, posição, mudança para aceitar mais níveis (agora aceita 5 níveis :wacko: ) e menu no mesmo estilo na Vertical. Um exemplo do menu adaptado por mim pode ser visto em: Menu Horizontal Menu Vertical Gostaria de compartilhar com todos do forum a solução encontrada para Menus Horizontais. Gostaria, ainda, de pedir a ajuda para testar em outros navegadores e possíveis correções, pois testei somente no Mozilla, Firefox e Internet Explorer. Me parece que no Konqueror não está funcionando muito bem... Gostaria de agradecer a todos, mas principalmente ao Micox pela grande ajuda!! t+ Marcos PS. Achei também outros modelos de menus olhem só que menu interessante: http://www.thedesigntribe.com/new-menu12.htm Compartilhar este post Link para o post Compartilhar em outros sites
Giovani 104 Denunciar post Postado Abril 30, 2006 Marcos, Primiero, muito legal você ter colocado o resultado do seu trabalho aqui, para que todos possam ver! Isso é muito bom! B) Segundo, PARABÉNS!!! Espero que outras pessoas sejam influenciadas por você....q foi atrás, pesquisou, postou aqui, enfim, mostrou q correr atras do q se quer não é tão dificil!!! Novamente parabéns a você, e é claro, ao micox tab, q sempre nos ajuda qdo precisamos! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif Abraços a todos!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Compartilhar este post Link para o post Compartilhar em outros sites
