Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

03-08-2011 17:14

e ai Galera, boa tarde!
Bom já tentei ajuda em outros fóruns e não tive muito sucesso.
Preciso fazer um menu com bordas arredondas sem o uso de imagens, depois de dias procurando achei esse site http://www.odirleiborgert.com.br/ que mostra como fazer bordas arredondadas com js, que realmente funcione em todos os navegadores.
Só que tenho outro problema agora, não consigo tirar o background do meu menu, no estado inicial do meu menu ele vem sem nenhuma cor de fundo, mas sempre que passo o mouse sobre ele, aparece uma cor de fundo que fica.
O link do meu arquivo de teste é esse:

http://www.esinet.com.br/selmaStore/site/bordas/certo/

Eu sei que é essa linha de código que faz exibir o background depois que passo o mouse
var backgroundColor=$nav_li.css("background-color");
mas como não sei nada de js! =D
Não sei como alterar. Já fiz de tudo e nada.

Se aluguem conseguir ajudar! =D
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

03-08-2011 17:22

Você quer tirar esse fundo branco que fica ao tirar o mouse do botão, correto?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

03-08-2011 17:26

Sim correto.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

03-08-2011 17:46

Eu não achei esse exemplo que você postou aqui no site indicado, onde está?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

03-08-2011 17:52

o link do site é esse
http://www.odirleiborgert.com.br/demos/ ... navegacao/
Só que eles colocaram um fundo cinza, e o meu menu não vai ter fundo, apenas quando a pessoa passar o mouse vai aparecer o botão com borda.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

03-08-2011 17:59

Eu dei uma olhada aqui no código, e a alteração a ser feita está no próprio link.

<li style="background-color: rgb(238, 238, 238);"><a style="color: rgb(158, 0, 57);" href="#portfolio">Portfólio</a></li>

Ai onde que eu deixei em negrito, entra a cor de fundo do botão no estado normal e no mouseout

Como a cor de fundo da página é #ddd, você pode deixar assim

<li style="background-color: #ddd;"><a style="color: rgb(158, 0, 57);" href="#portfolio">Portfólio</a></li>
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

03-08-2011 18:20

Então, no meu link não tem nenhum style vou colocar o codigo da minha pagina html para vc ver.

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> <!-- @import url(http://fonts.googleapis.com/css?family=Lobster); body {margin:0; padding:0; background-color:#CCC; } #nav{position:relative; margin:40px; padding:0; font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:21px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #ccc; -webkit-box-shadow:2px 2px 3px #ccc; box-shadow:2px 2px 3px #ccc;} #nav .clear{clear:both;} #nav ul{padding:0 0 0 5px; margin:0; list-style:none;} #nav li{float:left; margin:5px 10px 5px 0; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} #nav li a{text-decoration:none; color:#9e0039; display:block; padding:10px 15px;} --> </style> <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> <!-- rounded corners for IE --> <script src="DD_roundies_0.0.2a-min.js"></script> <script> DD_roundies.addRule("#nav", "5px"); DD_roundies.addRule("#nav li", "5px"); </script> <script> $(document).ready(function(){ $nav_li=$("#nav li"); $nav_li_a=$("#nav li a"); var animSpeed=450; //fade speed var hoverTextColor="#fff"; //text color on mouse over var hoverBackgroundColor="#9e0039"; //background color on mouse over var textColor=$nav_li_a.css("color"); var backgroundColor=$nav_li.css("background-color"); //text color animation $nav_li_a.hover(function() { var $this=$(this); $this.stop().animate({ color: hoverTextColor }, animSpeed); },function() { var $this=$(this); $this.stop().animate({ color: textColor }, animSpeed); }); //background color animation $nav_li.hover(function() { var $this=$(this); $this.stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed); },function() { var $this=$(this); $this.stop().animate({ backgroundColor: backgroundColor }, animSpeed); }); }); </script> </head> <body> <div id="nav"> <ul> <li><a href="#quemsomos">Quem Somos</a></li> <li><a href="#portfolio">Portfólio</a></li> <li><a href="#projetos">Projetos</a></li> <li><a href="#contato">Contato</a></li> </ul> <div class="clear"></div> </div> </body> </html>

Nessa linha ------> var backgroundColor=$nav_li.css("background-color") <---------
que passa o valor do backgroundColor do css, só que no meu css não tem BackgroundColor nenhum ele é none.
Mas por algum motivo ele deixa de ser nome depois que passo o mouse no botão. E fica com o fundo branco.
Se tiver como te enviar todos os arquivos para vc ver como esta?

Muuito obrigado pela ajuda.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

03-08-2011 18:27

Pega o exemplo dessa página que você me indicou e altera o background como indiquei. Fiz só isso e funcionou.

No seu li você tirou as referência ao background. Adiciona novamente, e coloca da cor de fundo da página.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

05-08-2011 15:13

Pois é, quando coloco o background no li ele funciona perfeitamente. Porém o o meu menu vai ter um fundo com imagem. E essa imagem vai poder mudar a qualquer momento. Então o meu li na teoria não poderia ter uma cor de fundo. Será que na função que faz o arredondamento da borda, não dá para colocar uma outra variável que armazene o background sem cor, none no caso?
Pq realmente o meu li não pode ter background de fundo no estado inicial.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

05-08-2011 15:23

Tenta o background transparent

<li style="background-color: transparent;">...

Dessa forma a li acompanha a cor de fundo.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

05-08-2011 15:39

Já tinha tentado fazer antes, tentei fazer agora tbm, coloquei background-color: transparent no css e na função do js e não funciona. Quando tiro o mouse fica da cor do hover. Será que não tem como colocar isso na função? Quando tirar o mouse ele fica sem fundo.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

05-08-2011 17:56

Se possível posta o link com o seu background que disse que vai usar.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

05-08-2011 18:02

o link é esse
http://www.esinet.com.br/selmaStore/sit ... Teste.html

Ta um pouquinho mal recortado, mas vai ficar melhor. hehehehehe
Estou usando dois css, para o caso de precisar mudar a cor do menu, fonte, etc não precise mexer no css principal. Assim não faço tanta cagada quando precisar alterar qualquer coisa.
Esse fundo do topo do site junto com os outros backgrounds podem ser alterados.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

05-08-2011 19:22

A parte da cor de fundo do mouseout está aqui

$this.stop().animate({ backgroundColor: backgroundColor }, animSpeed);

Nesse caso, a cor que é obtida é do próprio style, o usado no li. Pelos testes que fiz, o script aceita qualquer cor, menos transparente. Tentei até usar o backgroundImage, mas nada. Parece que só definindo uma cor mesmo.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

08-08-2011 18:04

oi Galera,
primeiro vou agradecer pela atenção. De todos os fóruns que entrei esse foi o melhor.
Achei uma solução aqui que funciona em todos os navegadores, através desse site
http://dillerdesign.com/experiment/DD_roundies/
Tive que fazer algumas modificações pois o exemplo que o cara deu não funcionava em alguns navegadores. Mas com as modificações que eu fiz ta funcionando perfeitamente.
Vou postar os códigos aqui para o caso de alguém precisar.

Bom é isso ai galera. Meu arquivo html já esta lincado aos js, então acho mais fácil colocar o nome que indiquei. =D
Brigadão pela ajuda!
Se possível posta um HTML em algum servidor free com o código.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

08-08-2011 18:48

;)
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

09-08-2011 11:21

Me indica um servidor free ai! Que posto o link
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

09-08-2011 11:26

O melhor site para postar scripts é esse abaixo

http://pastebin.com/
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 10 postagens
Mais de 10 postagens
Tópico Autor
Mensagens: 19
Sexo: Masculino

bordas js

09-08-2011 11:39

Não sei se postei certo mas ta ai.

O arquivo html
http://pastebin.com/eF75KwNp

O arquivo DD_roundies_0.0.2a-min.js
http://pastebin.com/SzLhsgTz

O arquivo DD_roundies_0.0.2a.js
http://pastebin.com/ub5Bfz0U

Muito obrigado de novo! =D
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

bordas js

09-08-2011 13:30

Boa. vlw.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado