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

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

1º - 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 //-->

2º - 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
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.

3º - 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
}

4º - Resultado através duma imagem:

--> 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

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Caixa de login