[TUTORIAL] Caixa de login no menu de navegação ao passar o mouse
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Caixa de login no menu de navegação ao passar o mouse
Caixa de login no menu de navegação ao passar o mouse |
Com o uso básico do código Java script, vamos neste tutorial aprender a realizar um grande efeito visual e funcional no seu fórum, que pode ter certeza que vai lhe agradar e agradar aos seus membros.
--> Tutoriais <--
Caixa de login no menu de navegação ao passar o mouse
Caixa de login no menu de navegação ao passar o mouse
1º - Páginas .JS:
Com essa opção será possível adicionar-mos o Javascript ao fórum sem muitos problemas, mas lembre-se que antes de publicar essa página .JS,
pré-visualize a mesma.
Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
Título - Correspondente ao nome da página JavaScript/jQuery que será criada. |
Localização - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções: No índice : O código será aplicado ao índice do fórum. No portal : O código será aplicado ao Portal do fórum. Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns. Sobre os temas : O código será aplicado aos tópicos do fórum. Na galeria : O código será aplicado na sua Galeria de imagens. Em todas as páginas : O código será aplicado em todas as páginas do fórum. |
Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery. |
Habilitar o gerenciamento dos códigos JavaScript - Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum. |
Agora que aprendeu sobre as páginas JS, vamos usar o código a seguir:
- 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">Login:</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 agora" tabindex="6" name="login"></dd></dl></form></div>').appendTo('.navbar')})})<!--Shiftactif and Forumactif desenvolvedores - http://shift.forumactif.com Por favor, não copie o código sem autorização. Entre em contato com a equipe Shiftactif e deixe o endereço do seu fórum em nossas listagens //-->
2º - 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.
.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:
- Vídeo tutorial
www.youtube.com/watch?v=j5SRD4DLrT4
OBS: Este tutorial só funciona para Phpbb3!
© Shiftactif
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Caixa de login no menu de navegação ao passar o mouse |
Tópicos semelhantes
» [TUTORIAL] Bloquear botão direito do mouse em todas as páginas
» [TUTORIAL] Widget "Login" personalizado
» [TUTORIAL] Criar uma página de login personalizada
» [TUTORIAL] Mudar informações da página de Login
» [TUTORIAL] Bloquear botão direito do mouse
» [TUTORIAL] Widget "Login" personalizado
» [TUTORIAL] Criar uma página de login personalizada
» [TUTORIAL] Mudar informações da página de Login
» [TUTORIAL] Bloquear botão direito do mouse
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|