Séries de Web: Aplicando efeito em Menu com JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $w	= 0; 	
var $h	= 0;
$(".circulares").animate({
top: $h,
left: $w, 
opacity: .2}, {
   duration: 800,
   complete: function(){
     $(".menu").hide();
     $(this).animate({opacity: 1},{
	complete: function(){
           $(".menu").show("slow");
    	}
     });
   }
}).show();
$(".menu").mouseover(function(){
  $(this).parent().animate({opacity: .9}).css({'background-color':'#FF9900'});
}).mouseout(function(){
  $(this).parent().animate({opacity: 1}).css({'background-color':'#CCC'})
});
});
</script>
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
}
a{ text-decoration:none }
#content{ 
width:850px; /* 850+55+55 = 960 */ 
height:170px; 
margin:0 auto;
padding: 0 55px;
background:#666666;
}
.circulares{ 
background-color:#CCCCCC;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
width:150px;
height:150px;
line-height:150px;
float:left; /* posicionamento */
margin:10px; /* espaçamento entre os circulos */
text-align:center;
position:relative;
top: -170px; /* altura do #content */
left: -960px; /* largura do #content */
z-index:999;
display:none;
}
.circulares a{ color:#000 }
.circulares a:hover{ color:#FFF; }
</style>
<div id="content">
  <div class="circulares"><a href="#" class="menu">HOME</a></div>
  <div class="circulares"><a href="#" class="menu">EMPRESA</a></div>
  <div class="circulares"><a href="#" class="menu">FOTOS</a></div>
  <div class="circulares"><a href="#" class="menu">SERVIÇOS</a></div>
  <div class="circulares"><a href="#" class="menu">CONTATO</a></div>
</div>

Veja o funcionamento, clicando aqui.

2 comentários em “Séries de Web: Aplicando efeito em Menu com JQuery

  • 19 de dezembro de 2012 em 11:10
    Permalink

    Muito bom, pena que no IE só no 9.

    Resposta
    • 19 de dezembro de 2012 em 11:19
      Permalink

      Algumas versões de navegadores não suporta o border-radius.

      Neste link você obtem maiores informações.

      Abraços.

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *