Ir para conteúdo

POWERED BY:

Arquivado

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

Viniccios Paracelos

[Resolvido] Menu em Javascript

Por , em Javascript

Recommended Posts

Viniccios Paracelos    0

Viniccios Paracelos
Postado

Boa noite! Feliz Natal!

 

Sou iniciante aqui no fórum e também em javascript,

 

Oque eu procuro é a criação deste menu:

menuprint.jpg

 

Este foi feito com imagens de sobreposição do dreamweaver,

Mas estou a procura de como fazer em tabelas.

 

Minha ideia era quando sobrepor o mouse alterasse a cor de fundo da coluna dando o mesmo efeito.

Alguem tem alguma sugestão?

 

oque tenho até agora:

menuprint2.jpg

 

codigo:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><title>Exemplo</title></head>

<body>
<table width="54%" height="12%" cellspacing="0" cellpadding="0">
	<tr height="6%" bgcolor="#686868">
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:10pt;">Pagina Inicial</span>
		</td>
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:10pt;">Pagina Inicial</span>
		</td>
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:10pt;">Pagina Inicial</span>
		</td>
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:10pt;">Pagina Inicial</span>
		</td>
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:10pt;">Pagina Inicial</span>
		</td>
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:10pt;">Pagina Inicial</span>
		</td>
	</tr>
	<tr height="6%" bgcolor="#686868">
		<td width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:24pt; font-weight:bolder;">HOME</span>
		</td>
		<td width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:24pt; font-weight:bolder;">HOME</span>
		</td>
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:24pt; font-weight:bolder;">HOME</span>
		</td>
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:24pt; font-weight:bolder;">HOME</span>
		</td>
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:24pt; font-weight:bolder;">HOME</span>
		</td>
		<td  width="9%" onMouseOver="javascript:this.style.backgroundColor='#1F62FF'" onMouseOut="javascript:this.style.backgroundColor='#686868'">
		<span style="font-size:24pt; font-weight:bolder;">HOME</span>
		</td>
	</tr>
</table>
</body>

</html>

 

 

att, Viniccios Paracelos

Compartilhar este post

Link para o post
Compartilhar em outros sites

51L3N7    1

51L3N7
Postado

Amigo, primeiramente não é bom usar tabelas. E segundo, seu código está muito poluído.

Nesse caso seria bem mais prático usar CSS e não JS.

 

td:hover { background:#1F62FF; }

 

Não precisa colocar aqueles onmouseover e onmouseout todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Viniccios Paracelos    0

Viniccios Paracelos
Postado

Olá amigo.

 

Vou dar uma ajeitada no codigo e já volto com novas. Ainda tenho algumas dúvidas sobre o assunto

Como você citou sobre o uso de tabelas, já tentei outro método como as divs mas não consegui entender muito bem como elas funcionam. Não é a mesma coisa que as tabelas certo?

 

Já andei dando uma pesquisada no tabless mas não achei um tutorial em certo.

 

Desde já obrigado pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

51L3N7    1

51L3N7
Postado

Uma div basicamente serve para fazer uma modificação em parte da página. Então, pra manipular uma div é necessário o uso de CSS, e de outras tags como o span, label, legend, etc, dependendo do que você vá fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Viniccios Paracelos    0

Viniccios Paracelos
Postado

Obrigado, estarei estudando mais sobre isso.

 

Sobre o menu feito em Tabelas, consegui o seguinte resultado:

 

menulr.jpg

 

HTML

<table width="250" height="60" id="menutop_table">
<tr width="250" height="60" align="center">
	<td class="menutop">
		<a href="" id="menutop_a">
		<span id="font_menutop_1">Pagina Inicial</span>
		<br />
		<span id="font_menutop_2">HOME</span>
		</a>
	</td>
	<td class="menutop">
		<a href="" id="menutop_a">
		<span id="font_menutop_1">Pagina Inicial</span>
		<br />
		<span id="font_menutop_2">HOME</span>
		</a>
	</td>
	<td class="menutop">
		<a href="" id="menutop_a">
		<span id="font_menutop_1">Pagina Inicial</span>
		<br />
		<span id="font_menutop_2">HOME</span>
		</a>
	</td>
	<td class="menutop">
		<a href="" id="menutop_a">
		<span id="font_menutop_1">Pagina Inicial</span>
		<br />
	<span id="font_menutop_2">HOME</span>
	</a>
	</td>
	<td class="menutop">
		<a href="" id="menutop_a">
		<span id="font_menutop_1">Pagina Inicial</span>
		<br />
		<span id="font_menutop_2">HOME</span>
		</a>
	</td>
	<td class="menutop">
		<a href="" id="menutop_a">
		<span id="font_menutop_1">Pagina Inicial</span>
		<br />
		<span id="font_menutop_2">HOME</span>
		</a>
	</td>
</tr>
</table>

 

CSS

#menutop_a{
text-decoration:none;
color: #FFF;
} 
#menutop_a:hover{
text-decoration:none;
color: #FFF;
}
#menutop_table { 
margin-top:10px;
margin-left:15px;
} 
td.menutop { 
background:#686868;
text-align:center;
padding:5px;
}
td.menutop:hover{
background:#1F62FF;
}
#font_menutop_1 {
font-family: Arial, Helvetica, sans-serif;
font-size:8pt; 
}
#font_menutop_2 {
font-family: Arial, Helvetica, sans-serif;
font-size:20pt;
}

 

CSS RESET

Também utilizei o css reset do Eric Meyer
http://meyerweb.com/eric/tools/css/reset/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Public2004    79

Public2004
Postado

Olá, o que fez pode atender visualmente o que quer, mas vou colocar algumas observações:

Não utilize tabelas para esta finalidade e procure compreender a utilização correta da mesma;

Os "IDs" podem ser utilizados apenas uma única vez no documento, para repetir formatações, utilize classes ou defina a estilização diretamente no elemento;

Para o efeito simples desejado, dispensável o uso de JS e imagens. Segue um exemplo de como obter o mesmo resultado de forma mais limpa:

 

CSS:

ul {
font-family: Arial, Helvetica, sans-serif;
list-style:none;
}
ul li {
float:left;
font-size:8pt;
text-align:center;
}
ul li span {
display:list-item;
font-size:20pt;
}
ul li a {
background-color:#686868;
display:block;
color:#fff;
padding:5px 10px;
text-decoration:none;
}
ul li a:hover {
background-color:#1F62FF;
}

 

HTML:

<ul>
 <li><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
</ul>

 

Att.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Viniccios Paracelos    0

Viniccios Paracelos
Postado

Caraca! kk.

 

Me senti ridiculo com essa, mas como já havia falado sou iniciante nessa parte.

 

Agora uma dúvida minha, vamos supor que eu quisesse colocar dois menus criados no mesmo modo apresentado, porém, com configurações diferente.

 

Como seria? teria que adicionar um class?

 

HTML

 

<ul class="menutop">
 <li class="menutop"><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li class="menutop"><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li class="menutop"><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li class="menutop"><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li class="menutop"><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
 <li class="menutop"><a href="" title="">Pagina Inicial<span>HOME</span></a></li>
</ul>

 

CSS

 

ul.menutop {
       font-family: Arial, Helvetica, sans-serif;
       list-style:none;
}
ul li.menutop {
       float:left;
       font-size:8pt;
       text-align:center;
	font-weight:bolder;
}
ul li.menutop span {
       display:list-item;
       font-size:20pt;
}
ul li.menutop a {
       background-color:#686868;
       display:block;
       color:#fff;
       padding:5px 10px;
       text-decoration:none;
}
ul li:hover.menutop a {
       background-color:#1F62FF;
}

 

 

Consegui!

 

Tive uns problemas mas consegui entender o funcionamento do CSS

 

Muito obrigado pela resposta! :grin:

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