misterviralata 0 Denunciar post Postado Abril 29, 2007 ola Amigos! consegui este exemplo de menu desdobravel em html, javascript e CSS o script esta funcionando, mas não entendo de CSS, gostaria de saber como faço para colocar a primeira linha do menu na horizontal e manter os submenus na vertical (como está). Tentei a noite inteira e não consegui, sei que para fazer isso é preciso mexer no CSS e como disse não entendo quase nada de CSS. Segue abaixo o script do menu Obrigado! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <script type="text/javascript"> function IEHoverPseudo() { var navItems = document.getElementById("primary-nav").getElementsByTagName("li"); for (var i=0; i<navItems.length; i++) { if(navItems.className == "menuparent") { navItems.onmouseover=function() { this.className += " over"; } navItems.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: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; background: #fff; /* IE6 Bug */ font-size: 100%; } ul#primary-nav li { position: relative; list-style: none; } ul#primary-nav li a { display: block; text-decoration: none; color: #777; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* 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: 149px; /* Set 1px less than menu width */ top: 0; } 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; } /* 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.gif) right center no-repeat; } ul#primary-nav li.menuparent:hover, ul#primary-nav li.over { background-color: #f9f9f9; } ul#primary-nav li a:hover { color: #E2144A; } </style> </head> <body> <ul id="primary-nav"> <li><a href="#">Menu1</a></li> <li class="menuparent"><a href="#">Menu2</a> <ul> <li><a href="#">submenu2</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu2</a></li> </ul> </li> <li class="menuparent"><a href="#">Menu3</a> <ul> <li><a href="#">submenu3</a></li> <li><a href="#">submenu3</a></li> <li class="menuparent"><a href="#">SUBMENU3</a> <ul> <li><a href="#">subsubmenu3</a></li> <li class="menuparent"><a href="#">SUBsubmenu3</a> <ul> <li><a href="#">SUBSUBSUBMENU3</a></li> </ul> </li> <li><a href="#">subsubmenu3</a></li> <li><a href="#">subsubmenu3</a></li> </ul> </li> <li><a href="#">submenu3</a></li> <li><a href="#">submenu3</a></li> </ul> </li> <li class="menuparent"><a href="#">Menu4</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu4</a></li> <li><a href="#">submenu4</a></li> <li><a href="#">submenu4</a></li> </ul> </li> </ul> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
hunternh 2 Denunciar post Postado Abril 29, 2007 http://hunternh.110mb.com/menu/horizontal_e_vetical.html Compartilhar este post Link para o post Compartilhar em outros sites
misterviralata 0 Denunciar post Postado Abril 29, 2007 Ola hunternh! Primeiramente não tenho palavras para expressar minha gratidão pela sua ajuda. Você colocou o código de dois menus, o que estou precisando é o debaixo, com a primeira linha na horizontal. Muito muito obrigado pela ajuda! Mas se não for incomodo gostaria de saber se você pode me indicar algo para que eu possa ler sobre css, pois como disse estou realmente agradecido pela ajuda, mas gostaria de entender o código para que no futuro eu mesmo possa alterá-lo . Por exemplo no código que você postou, como vou usar somente o menu horizontal então eu posso descartar a function vertical () que esta dentro do comando javascript certo? Tem mais algum comando no CSS que estava se referindo somente ao menu vertical? Onde posso conseguir um tutorial ou algo semelhante para que eu possa entender como funciona o CSS do menu? Este exemplo conseguiu neste link: http://www.maujor.com/tutorial/ddownmenu.php Mas esta vago, nele o escritor não ensina CSS ele apenas este trecho do código é para o menu e este para o submenu, etc.. Por favor caso saiba de algo que eu possa ler para poder entender como modificar o código CSS fico ainda mais grato! Compartilhar este post Link para o post Compartilhar em outros sites
Guilherme Rambo 4 Denunciar post Postado Abril 29, 2007 - Leia os tópicos fixos aqui de WS - http://www.maujor.com - http://www.tableless.com.br - http://www.web2ponto0.com.br Boa sorte no aprendizado http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif []'s Compartilhar este post Link para o post Compartilhar em outros sites
