Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

giulianaauricchio

script menu

Por , em Javascript

Recommended Posts

giulianaauricchio    0

giulianaauricchio
Postado

Gente, eu preciso urgente de um script pra colocar em um menu. Por exemplo tem a palavra:

 

PERFUMES

 

Aí quando a pessoa passar o mouse encima dessa palavra do lado abre um submenu com os links... Alguém poderia me ajudar?

 

Obrigada! E aguardo resposta!

 

http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

giulianaauricchio    0

giulianaauricchio
Postado

Oi... Olha só eu entrei nesse site fiz tudo o que ele pede, ele forma a caixinha em volta e tudo mais... Mas na hora de funcionar ele não funciona! :( E o pior é que preciso disso para hoje!!!

 

A partir daqui meu código não funciona...

 

li:hover ul { display: block; }

 

Oba...aqui nosso menu em ação.

 

“Woo hoo! Funciona!” ouço 1% de vocês exclamar. “Sinistro!”

OK, OK, droga, o IE/Win tinha que arruinar tudo e não se comportar em conformidade. O IE/Win somente suporta a pseudo classe:hover aplicada a um link — assim li:hover que faz os sub-menus aparecer, nada significa para o IE.

Um 'pouquinho' de JavaScript será necessário para trazer o IE à ação. (line wraps marked » — Ed.):

 

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes;

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

this.className=this.className.replace

(" over", "");

}

}

}

}

}

window.onload=startList;

 

Então, a regra para hover agora é:

li:hover ul, li.over ul {

display: block; }

 

Adicionalmente precisamos referenciar o JavaScript com nosso ul, principal, assim:

 

<ul id="nav">

 

 

 

Os 'submenus' não abrem do lado do jeito nenhum. Eu coloquei tudo no CSS e quando chega em <ul id="nav"> eu coloquei no HTML, mas não funcionou. Como eu faço?? Aguardo resposta urgenteeee

 

http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado

Cara...

você deve ter adaptado errado

Esse aqui é o código completo, da uma revisada que você consegue, qualquer coisa posta o seu codigo aqui:

 

Obs: Joguei os arquivos de Js e Css no código, se tiver volta pra externo

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Horizontal Drop Down Menus</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript"></script>// JavaScript Document// NÃO PRECISA MEXER NO JAVASCRIPTstartList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";  }  node.onmouseout=function() {  this.className=this.className.replace(" over", "");   }   }  } }}window.onload=startList;<style type="text/css">/* NÃO APAGA NENHUM SELETOR, APENAS MUDE A FORMATAÇÃO VISUAL */body {	font: normal 11px verdana;	}ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px; /* Width of Menu Items */	border-bottom: 1px solid #ccc;	}ul li {	position: relative;	}	li ul {	position: absolute;	left: 149px; /* Set 1px less than menu width */	top: 0;	display: none;	}/* Styles for Menu Items */ul li a {	display: block;	text-decoration: none;	color: #777;	background: #fff; /* IE6 Bug */	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */  li ul li a { padding: 2px 5px; } /* Sub Menu Styles */  li:hover ul, li.over ul { display: block; } /* The magic */</style></head><body> <ul id="nav">   <li><a href="#">Home</a></li>   <li><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><a href="#">Services</a>     <ul>       <li><a href="#">Web Design</a></li>       <li><a href="#">Internet Marketing</a></li>       <li><a href="#">Hosting</a></li>       <li><a href="#">Domain Names</a></li>       <li><a href="#">Broadband</a></li>     </ul>   </li>   <li><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>

Qualquer coisa avisa ae.. :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

giulianaauricchio    0

giulianaauricchio
Postado

Nossa, eu sei que você vai me chamar de burra, masssssss...

Ainda não deu certo!!!

 

Eu joguei lá a parte:

 

<ul id="nav">

<li><a href="#">Home</a></li>

<li><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><a href="#">Services</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Internet Marketing</a></li>

<li><a href="#">Hosting</a></li>

<li><a href="#">Domain Names</a></li>

<li><a href="#">Broadband</a></li>

</ul>

</li>

<li><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>

 

Em uma página .HTML normal. E criei um .CSS com os outros dados do código e usei o <link rel....> pra puxar o .CSS que eu criei. Só que abre um menu, mas do lado os submenus não aparecem!!!

 

O que será que eu tô fazendo de errado?

 

Obrigada pela ajuda!

 

http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado

Olha só esse aqui..

 

Eu tinha colado script em lugar errado! http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

burro sou eu.. rs.. foi mal

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Horizontal Drop Down Menus</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript">// JavaScript Document// NÃO PRECISA MEXER NO JAVASCRIPTstartList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", "");  }  } }}}window.onload=startList;</script><style type="text/css">/* NÃO APAGA NENHUM SELETOR, APENAS MUDE A FORMATAÇÃO VISUAL */body {font: normal 11px verdana;}ul {margin: 0;padding: 0;list-style: none;width: 150px; /* Width of Menu Items */border-bottom: 1px solid #ccc;}ul li {position: relative;}li ul {position: absolute;left: 149px; /* Set 1px less than menu width */top: 0;display: none;}/* Styles for Menu Items */ul li a {display: block;text-decoration: none;color: #777;background: #fff; /* IE6 Bug */padding: 5px;border: 1px solid #ccc;border-bottom: 0;}/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */li ul li a { padding: 2px 5px; } /* Sub Menu Styles */li:hover ul, li.over ul { display: block; } /* The magic */</style></head><body><ul id="nav"><li><a href="#">Home</a></li><li><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><a href="#">Services</a><ul><li><a href="#">Web Design</a></li><li><a href="#">Internet Marketing</a></li><li><a href="#">Hosting</a></li><li><a href="#">Domain Names</a></li><li><a href="#">Broadband</a></li></ul></li><li><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></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

giulianaauricchio    0

giulianaauricchio
Postado

EEEEEEEEEEEEEEEE!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Graças à Deus e a você deu certoooooo! Abriu tudo certinho!! Mew, você não sabe o qtooo você me ajudou!!! MUITO OBRIGADA!

 

Agora só mais uma coisinha... Como eu faço pra por o link no submenu? é só colocar o <a href=...> entre a palavra que tah no submenu normal?

 

Mais uma vez obrigada!

 

http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

renanfog    0

renanfog
Postado

Isso mesmo Giuliana, dentro de href substitui o "#" pela sua página que vai ser chamada....Ahh e se for usar frames, tem que colocar o target na frente, tipo<a href="noticias.htm" target="NOME DO FRAME">teste</a>Qualquer coisa estamos ai! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito