Ir para conteúdo
Fórum Script Brasil
  • 0

Efeito De Css Para Menu

rfp

Perguntado por rfp,

 Share

Pergunta

rfp

rfp

Postado
Postado

Eu gostaria de um esquema em CSS que faça aquele efeito de ao passar o mouse sobre o menu modifique a cor da célula do menu, eu consegui mas no meu CSS a célula fica com bordas.

Eu já tentei colocar:

border-bottom-style: none;

border-left-style: none;

border-right-style: none;

border-top-style: none;

E não funcionou!!

Será que alguém ai pode me ajudar, mas eu gostaria que fosse em CSS, por que em JS eu estou ligado como é. :(

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
rfp

rfp

Postado
  • Autor
Postado

La vai o código do menu:

<table border=0 cellpadding=2 cellspacing=1 width=132 bgcolor="#686498">

<tr bgcolor="#403878" bordercolor="#666699">

<td width="132" height="2"><font size="-1">Empresa</font></a></td>

</tr>

<tbody>

<tr>

<td class="celula_menu"><a href="idx_principal.htm">Home</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="estrutura.htm">Estrutura</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="localizacao.htm">Localização</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="missao.htm">Missão</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="contatos.htm">Contatos</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="eventos.htm">Eventos</a></td>

</tr>

</tr>

</table>

E aqui vai o CSS:

.celula_menu a:link { background-color:#CCCCCC; width:125; color:#403878; font-color:#403878; font-weight:bold; font-family: Verdana, Arial, Helvetica; height: 16; text-decoration: none; font-size:10px; BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; }

.celula_menu a:active { background-color:#CCCCCC; width:125; color:#403878; font-color:#403878; font-weight:bold; font-family: Verdana, Arial, Helvetica; height: 16; text-decoration: none; font-size:10px; BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; }

.celula_menu a:visited { background-color:#CCCCCC; width:125; color:#403878; font-color:#403878; font-weight:bold; font-family: Verdana, Arial, Helvetica; height: 16; text-decoration: none; font-size:10px; BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; }

.celula_menu a:hover { background-color:#D8D8D8; width:125; color:#403878; font-color:#407999; font-weight:bold; font-family: Verdana, Arial, Helvetica; height: 16; text-decoration: none; font-size:10px; BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; }

Tomara que de pra entender e me ajudar espero respostas!

Link para o comentário
Compartilhar em outros sites
  • 0
David Elias

David Elias

Postado
Postado

Experimente, só com css sem javascript ;) 

.celula_menu a {
    display:block;
    width: 132px;
    height:16;
    padding:2px;
    background-color:#CCC;
    color:#403878;
    text-decoration: none;
    font-size:10px;
    font-weight:bold;
    font-family: Verdana, Arial, Helvetica;
}

.celula_menu a:hover {
    color:#407999;
    background-color:#D8D8D8;
}

</style>

Claro que depois vais ter colocar class="celula_menu" nas celulas.

Link para o comentário
Compartilhar em outros sites
  • 0
rfp

rfp

Postado
  • Autor
Postado

NÃO, eu quero um menu sem bordas antes e depois de passar o mouse, o que está acontecendo é que eu não consigo retirar as bordas, gostaria de saber como fazer isso usando o CSS.

Eu quero que ao passar o mouse modifique somente o fundo da célula e a font,

compreende?! :unsure:

Link para o comentário
Compartilhar em outros sites
  • 0
diraol

diraol

Postado
Postado

Testa ai............

<html>

<head>

<title>NOME DA SUA PÁGINA</title>

</head>

<style>

celula_menu a {

  border: none

  display:block;

  width: 132px;

  height:16;

  padding:2px;

  background-color:#CCC;

  color:#403878;

  text-decoration: none;

  font-size:10px;

  font-weight:bold;

  font-family: Verdana, Arial, Helvetica;

}.celula_menu a:hover {

border: none

color:#407999;

background-color:#D8D8D8;

}

</style>

<body>

<table border=0 cellpadding=2 cellspacing=1 width=132 bgcolor="#686498">

<tr bgcolor="#403878" bordercolor="#666699">

<td width="132" height="2" class="celula_menu"><font size="-1">Empresa</font></a></td>

</tr>

<tbody>

<tr>

<td class="celula_menu"><a href="idx_principal.htm">Home</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="estrutura.htm">Estrutura</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="localizacao.htm">Localização</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="missao.htm">Missão</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="contatos.htm">Contatos</a></td>

</tr>

<tr>

<td class="celula_menu"><a href="eventos.htm">Eventos</a></td>

</tr>

</tr>

</table>

</body></html>

Link para o comentário
Compartilhar em outros sites
  • 0
David Elias

David Elias

Postado
Postado

é isso ai diraol, só falta se calhar colocar cellpading="0" e cellspacing="0", em "celula_menu" a colocar ".celula_menu a" e o ponto e virgula no fim de "border: none;"

;)

Eu nos meus trabalhos faria sem tabelas assim:

<html>
<head>
<title>NOME DA SUA PÁGINA</title>
</head>

<style>

#menu {
    width: 132px;
    font-family: Verdana, Arial, Helvetica;
}

#menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#menu li {
    margin: 0px;
    padding: 0px;
    display: inline;
    list-style-type: none;
}

#menu h1 {
    margin: 0px;
    padding: 4px;
    font-size: 11px;
    font-weight: bold;
    color: #FFF;
    background-color: #666699;
}

#menu a {
    display:block;
    width: 132px;
    padding: 4px;
    background-color: #CCC;
    color: #403878;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
}

#menu a:hover {
    color: #407999;
    background-color: #D8D8D8;
}
</style>

<body>

<div id="menu">
<ul>
  <li><h1>Empresa</h1>
    <ul>
      <li><a href="idx_principal.htm">Home</a></li>
      <li><a href="estrutura.htm">Estrutura</a></li>
      <li><a href="localizacao.htm">Localização</a></li>
      <li><a href="missao.htm">Missão</a></li>
      <li><a href="contatos.htm">Contatos</a></li>
      <li><a href="eventos.htm">Eventos</a></li>
    </ul>
  </li>
</ul>
</div>

</body>
</html>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...