Posts filed under ‘Jquery’
Top 03 jQuery modal.
Muito tempo sem postar aqui… Mas vamos lá, irei colocar aqui 3 modais para vocês:
1. http://colorpowered.com/colorbox/
Galera foi mau por ter sumido, mas ando muito sem tempo… Irei disponibilizar em breve novos tutoriais de PHP, CSS, jQuery para vocês. Até a próxima!
Mudar o background do seu site com jQuery.
Olá a todos! Um efeito que hoje em dia esta bem na moda, é o usuário poder personalizar a cor do background do site por outras cores. Então lá vai este script bem simples porem funcional:
O html ficaria assim:
<a href="javascript:void(0)" onClick="cor('blue');">Azul</a>
<br />
<a href="javascript:void(0)" onClick="cor('red');">Vermelho</a>
Quando o usuário clicar no link irá mandar por parametro o que tiver dentro () do onClick.
<script>
function cor(cores){
$("body").css("background-color", cores);
}
</script>
Na função ele irá receber o parametro e mudar no .css do jQuery.
Muito simples não?
Abraços.
Menu slideDown e slideUp com jQuery.
Fala, galera tudo bom ? Estou meio sumido pois ando com o tempo muito curto. Desenvolvi estes dias um menu em jQuery com um efeito bem moderno o slideUp e o slideDown. Ele tambem possui a opção de colocar submenus com este mesmo efeito.
Vamos lá, primeiramente vamos criar o arquivo .css
<style>
.menu_barra_titulo{
font-size:14px;
width:178px;
min-height:22px;
color:#005335;
text-align:center;
padding:0px;
cursor:pointer;
}
.menu_barra_titulo:hover{
background-image:none;
cursor:pointer;
font-weight: bold;
}
#enquadramento-barra-titulo{
background-image:url(bt-out.jpg);
padding-top:8px;
text-align:center;
min-height:19px;
font-weight: bold;
}
#enquadramento-barra-titulo:hover{
background-image:url(bt-over.jpg);
padding-top:8px;
text-align:center;
min-height:19px;
}
.menu_item{
text-decoration:none;
background-image:url(comum-quadrado-verde-out.jpg);
margin: 0; padding:0;
width:172px;
}
.menu_item li:hover{
background-image:url(comum-quadrado-verde-in.jpg);
}
li.menu_linha{ padding-left:20px; }
a.linkmenu{
text-decoration:none;
color:#005335;
}
a.linkmenu:link {
text-decoration:none;
}
a.linkmenu:hover {
font-style:italic;
text-decoration:none;
color:#663333
}
.menu_barra_item{
}
.menu_subbarra_titulo{
padding:0px;
margin:0px;
width:174px;
}
</style>
Eu usei algumas imagens, mas vocês podem estar mudando elas perfeitamente.
Agora o arquivo html:
<div id="explorerColunaMenu"> <div class="menu_barra_titulo"> <div id="enquadramento-barra-titulo"> <b>MENU PAI</b> </div> <div class="menu_barra_item"> <ul class="menu_item"> <li><a href="#" class="linkmenu">Menu 1</a> </li> <li><a href="#" class="linkmenu">Menu 2</a> </li> </ul> </div> </div> <div class="menu_barra_titulo"> <div id="enquadramento-barra-titulo"> <b>MENU PAI</b> </div> <div class="menu_barra_item"> <ul class="menu_item"> <li class="menu_linha"><a href="#" class="linkmenu">Menu 1</a></li> <li class="menu_linha"><a href="#" class="linkmenu">Menu 2</a></li> </ul> </div> </div> <div class="menu_barra_titulo"> <div id="enquadramento-barra-titulo"><b>Caracterização</b></div> <div class="menu_barra_item"> <ul class="menu_item"> <div class="menu_subbarra_titulo"> <div id="enquadramento-barra-titulo">Perguntas Dinâmicas 1</div> <div class="menu_barra_item"> <ul class="menu_subitem"> <li class="menu_linha"><a class="linkmenu">Lista de Opções</a></li> <li class="menu_linha"><a class="linkmenu">Fase de licenciamento</a></li> </ul> </div> </div> </ul> </div> <div class="menu_barra_item"> <ul class="menu_item"> <div class="menu_subbarra_titulo"> <div id="enquadramento-barra-titulo">Perguntas Dinâmicas 2</div> <div class="menu_barra_item"> <ul class="menu_subitem"> <li class="menu_linha"><a class="linkmenu">Lista de Opções</a></li> <li class="menu_linha"><a class="linkmenu">Fase de licenciamento</a></li> </ul> </div> </div> </ul> </div> </div> </div>
E por fim o código JS:
jQuery(document).ready(function(){
jQuery(".menu_barra_item").hide();
jQuery(".menu_subitem").hide();
jQuery(".menu_barra_titulo").click(function(){
jQuery(".menu_barra_item").slideUp("fast");
jQuery(this).find(".menu_barra_item").slideDown("fast");
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-left','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-top','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('border-bottom','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('font-weight','normal');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('text-color','1px solid #3e664c');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('background-color','#e3fedd');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('background-image','url()');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('text-align','left');
jQuery('.menu_subbarra_titulo').children('#enquadramento-barra-titulo').css('padding-left','15px');
// caso queira formatar os sub-menus
//jQuery('.menu_subbarra_titulo').children('div.menu_barra_item').css("display","none");
});
jQuery(".menu_subbarra_titulo").click(function(){
jQuery(".menu_subitem").slideUp("fast");
jQuery(this).find(".menu_subitem").slideDown("fast");
});
});
Vocês vão precisar da api jquery que se encontra neste site para download: http://jquery.com/
Vocês podem otimizar a vontade pois fiz meio rápido o código, da para colocar slideToggle etc… Mas espero que seja útil para vocês!
Até a próxima pessoal!
4 Exemplos de menu em JQUERY
Quatro exemplos de menu feitos com JQUERY:
Número 1: Lavalamp MENU:
LINK: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
Número 2: Smooth menu
LINK: http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
Número 3: Horizontal tooltips menu
Link: http://www.queness.com/post/556/jquery-horizontal-tooltips-menu-tutorials
Número 4: Dropdown menu
Link: http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/
O Mundo Do Mário 