Fazer itens sumirem com clique

fkrugger8 · Abril 23, 2015

Olá. Sou novo aqui no fórum e não sou assim muito conhecido de Css. Vejo vários exemplos na internet pra montar os sisteminhas, porém, me deparei com uma dúvida. Procurei algum tópico do gênero e não encontrei.

Criei um menu com listas em Css, porém, os links são carregados em um Iframe. Até ai tudo bem. O problema está que, quando eu avanço até um menu e clico, o menu não some. Eu queria que ele desaparecesse quando clicasse, logo que a parte superior onde está o menu não precisaria se recarregar.

RESUMINDO: quando levo o mouse na opção o menu é exibido, quando clico em um item ele tem que sumir.

Segue o código:

<html>

<head>

<title>Principal</title>

</head>

<body>

<td>

<tr><td align="left" background="imagens/logo2.jpg"><font color="#FFFFFF" size="6"> Bem vindo(a) <strong><?php echo $usuario; ?></strong></font></td></tr>

<tr>

<li><a href="#">Estoque de Produtos</a>

<ul>

<li><a href="#"><img src="../imagens/entrada.png"> Entrada</a></li>

<li><a href="#"><img src="../imagens/saida.png"> Saída</a></li>

<li><a href="#"><img src="../imagens/estoque.png"> Em estoque</a></li>

<li><a href="#"><img src="../imagens/documentos.png"> Relatório</a>

<ul>

<li><a href="#"><img src="../imagens/todos.png"> Total</a></li>

<li><a href="#"><img src="../imagens/mes.png"> Mensal</a></li>

</ul>

</li>

</ul>

</li>

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

<ul>

<li><a href="#"><img src="../imagens/propria.png"> Próprias</a>

<ul>

<li><a href="#"><img src="../imagens/colorida.png"> Jato de Tinta</a></li>

<li><a href="#"><img src="../imagens/peb.png"> Laser</a></li>

</ul>

</li>

<li><a href="#"><img src="../imagens/copylink.png"> Copylink</a>

<ul>

<li><a href="#"><img src="../imagens/peb.png"> Laser</a></li>

<li><a href="#"><img src="../imagens/contador.png"> Contadores</a></li>

</ul>

</li>

<li><a href="#"><img src="../imagens/toner.png"> Toners</a></li>

<li><a href="#"><img src="../imagens/documentos.png"> Relatório</a></li>

</ul>

</li>

<li><a href="#">Lista de usuários</a>

<ul>

<li><a href="#"><img src="../imagens/nomes.png"> Nomes</a></li>

<li><a href="#"><img src="../imagens/documentos.png"> Relatório</a></li>

</ul></li>

<li><a href="#">Serviços realizados</a></li>

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

<ul>

<li><a href="novousuario.php" target="centro"><img src="../imagens/usuarios.png"> Usuários</a></li>

<li><a href="novosetor.php" target="centro"><img src="../imagens/setor.png"> Setor</a></li>

<li><a href="#"><img src="../imagens/produtos.png"> Tipo de produto</a></li>

<li><a href="#"><img src="../imagens/jatotinta.png"> Impressoras</a></li>

<li><a href="#"><img src="../imagens/cartucho.png"> Tipos de cartuchos</a></li>

</ul>

</li>

</ul></td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

--------------------------------------------------------------------------------------

Segue o menu.css:

--------------------------------------------------------------------------------------

#menu, #menu ul {

margin: 0;

padding: 0;

list-style: none;

}

#menu {

width: 800px;

border: 1px solid #222;

background-color: #111;

background-image: linear-gradient(#444, #111);

border-radius: 6px;

box-shadow: 0 1px 1px #777;

}

#menu:before,

#menu:after {

content: "";

display: table;

}

#menu:after {

clear: both;

}

#menu li: click{

display:none;

visibility:collapse, hidden;

}

#menu li {

float: left;

border-right: 1px solid #222;

box-shadow: 1px 0 0 #444;

position: relative;

}

#menu a {

float: left;

padding: 12px 18px;

color: #999;

font: bold 12px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

text-align:left;

}

#menu li:hover > a {

color: #fafafa;

}

#menu ul {

margin: 20px 0 0 0;

opacity: 0;

visibility: hidden;

position: absolute;

top: 38px;

left: 0;

z-index: 1;

background: #444;

background: linear-gradient(#444, #111);

box-shadow: 0 -1px 0 rgba(255,255,255,.3);

border-radius: 3px;

}

#menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

text-align:left;

}

#menu ul ul {

top: 0;

left: 150px;

margin: 0 0 0 20px;

box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#menu ul li {

float: none;

display: block;

border: 0;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

#menu ul li:last-child {

box-shadow: none;

}

#menu ul a {

padding: 10px;

width: 130px;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#menu ul a:hover {

background-color: #0186ba;

background-image: linear-gradient(#04acec, #0186ba);

}

#menu ul li:first-child > a:after {

content: '';

position: absolute;

left: 40px;

top: -6px;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid #444;

}

#menu ul ul li:first-child a:after {

left: -6px;

top: 50%;

margin-top: -6px;

border-left: 0;

border-bottom: 6px solid transparent;

border-top: 6px solid transparent;

border-right: 6px solid #3b3b3b;

}

#menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;

}

#menu ul ul li:first-child a:hover:after {

border-right-color: #0299d3;

border-bottom-color: transparent;

}

Obrigado.

AH. Lembrando, só testei por enquanto com o Menu Home (está no menu principal, nunca vai sumir), e as opções Cadastro -> usuário / Cadastro ->setor. Testei com essas duas opções. quando tiver uma resposta crio os demais.

fkrugger8 · Abril 23, 2015

Bom, é aquela. Tentei de tudo, mas depois que escrevi aqui resolvi o problema. Não sei se ficou funcional, mas funciona.

Fiz 4 coisas:

1 - Nomeei as <UL> como aa, bb e cc (para testes mesmo);

2 - Coloquei um OnMouseMove="aparece()"

3 - Nos links criei um onClick="desaparece()"

4 - Criei em JS isso:

function desaparece()

{

document.getElementById('aa').style.visibility = 'hidden';

document.getElementById('bb').style.visibility = 'hidden';

document.getElementById('cc').style.visibility = 'hidden';

}

function aparece()

{

document.getElementById('aa').style.visibility = 'visible';

document.getElementById('bb').style.visibility = 'visible';

document.getElementById('cc').style.visibility = 'visible';

}

</script>

Teria como resumir essas 3 linhas em apena uma usando o atributo "this" em algum lugar?

Obrigado.

Claudio Junior 18 · Abril 23, 2015

Usa JQuery que fica bem mais curto.

O this você pode usar se o que você quiser fazer, for no elemento que chamou a ação, exemplo:

<a href="#">Clique para remover</a>

a.click(function() {
$(this).css('display', 'none');
});

Public2004 · Abril 23, 2015

Usa JQuery que fica bem mais curto.

Você acha mesmo que para uma função como essa, é necessário o uso desta biblioteca?

thyquevedo · Abril 23, 2015

O Claudio passou o código que você precisa, é muito simples o código.

fkrugger8 · Abril 24, 2015

Usa JQuery que fica bem mais curto.

O this você pode usar se o que você quiser fazer, for no elemento que chamou a ação, exemplo:
<a href="#">Clique para remover</a>
a.click(function() {
$(this).css('display', 'none');
});

Olá. Não sei se coloquei noo lugar certo, mas não funcionou. O Menu continua aparecendo depois de dar o clique em cima dele...

O meu código funcionou em partes... Se eu não clico nos menus, mas percorro eles, ficam aparecendo na tela como listas ocultas, que quando levo o mouse em uma opção invisivel ela aparece mesmo não tendo ido com o mouse no menu principal... Mas se clico dá tudo certo...

o Código no title ficou assim:

<title>Principal</title>

</script>

a.click(function() {

$(this).css('display', 'none');

});

</script>

....

Acho que agora foi resolvido. Sem Jquery mesmo, pois não sei qual o peso que a biblioteca causa no sistema (e porque não entendo muito disso tambem. rsrsrs)...

Bom minhas alterações:

- todos os links principais troquei:

OnMouseMove="aparece()"

por

onMouseOver="aparece()";

- no javascript substituí:

document.getElementById('aa').style.visibility = 'hidden';

por

document.getElementById('aa').style.display = 'none';

e

document.getElementById('aa').style.visibility = 'visible';

por

document.getElementById('aa').style.display = 'block';

o style visibility estava causando o aparecimento das listagens mesmo quando o mouse passava por baixo dos menus, o que atrapalhava muito.

Bom, Obrigado a todos que responderam, logo que fui juntando uma informação daqui e outra dali.

Entrar

Arquivado

Fazer itens sumirem com clique

Recommended Posts

fkrugger8 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

fkrugger8 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Junior 18 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

thyquevedo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

fkrugger8 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante