[TUTORIAL] Caixa de login no menu de navegação ao passar o mouse

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

[TUTORIAL] Caixa de login no menu de navegação ao passar o mouse Empty [TUTORIAL] Caixa de login no menu de navegação ao passar o mouse

Mensagem por Josh 10.06.12 19:41


[TUTORIAL] Caixa de login no menu de navegação ao passar o mouse Permissions

Caixa de login

Neste tutorial iremos aprender a abrir uma caixa de login rápida, que funcionará passando o mouse sobre o botão "Entrar" do menu de navegação do vosso fórum.

--> Tutoriais, dicas e astúcias <--
Caixa de login no menu de navegação ao passar o mouse


- Código utilizado:
Código:
$(function(){$('#search-box').before(' ');$('.user_login_form').closest('.panel').addClass('loginPanel');$('input.button1[name="post"]').closest('.panel').removeClass('row2').addClass('loginPanel');$('.left-box').closest('.panel').addClass('introduction');$('a.mainmenu[href="/login"]').hover(function(){$('.quick_connex').remove();$('<div class="quick_connex panel introduction"><img class="connec_close" src="http://2img.net/i/fa/fdf3/suppri12.png" alt="(X)" title="Fechar caixa" onclick="$(\'.quick_connex\').remove();" /><form name="form_login" method="post" action="/login"><dl><dt><label for="username">Nickname:</label></dt><dd><input type="text" class="inputbox autowidth" value="" maxlength="40" size="25" id="username" name="username" tabindex="1"></dd></dl><dl><dt><label for="password">Senha:</label></dt><dd><input type="password" class="inputbox autowidth" maxlength="25" size="25" name="password" id="password" tabindex="2"></dd></dl><dl><dt> </dt><dd><input type="hidden" value="" name="redirect"><input type="hidden" value="" name="query"><input type="submit" class="button1" value="Conectar" tabindex="6" name="login"></dd></dl></form></div>').appendTo('.navbar')})})<!--Forumactif desenvolvedores - http://forum.forumactif.com //-->

- Páginas .JS:
Para prosseguirmos com o tutorial, teremos de utilizar um código JavaScript para efetuar as modificações da caixa:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
[TUTORIAL] Caixa de login no menu de navegação ao passar o mouse Painel13
Sobre o título, escreva o que desejar, não afetará em nada, o investimento selecione "Em todas as páginas" para que não apresente erros e em "Código JavaScript" será o campo destinado a receber o código JavaScript e jQuery, que trabalhamos no item anterior.

- Código para folha de estilo CSS:
Agora, para finalizar vamos aplicar um CSS para personalizar a caixa, apesar que o código JS ela já funcionar.
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilos CSS
.quick_connex{
box-shadow:0 0 10px!important;
padding:5px;
position:absolute;
right:200px;
top:185px;
width:160px
}

.quick_connex .connec_close{
bottom:3px;
float:right;
left:5px;
position:relative
}

- Resultado através duma imagem:
[TUTORIAL] Caixa de login no menu de navegação ao passar o mouse Josh10
(Imagem não-ilustrativa, capturada através do Forumactif por Josh)

--> FAQ do Tutorial <--
Caixa de login no menu de navegação ao passar o mouse


  • Para quais versões este código é funcional?
    Infelizmente esta caixa de login está disponível somente para a versão PhpBB3.




© Fórum dos Fóruns & Shek


[TUTORIAL] Caixa de login no menu de navegação ao passar o mouse Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Caixa de login
Josh

Josh
Super Membro

Membro desde : 03/03/2012
Mensagens : 1170
Pontos : 1512

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos