ShiftActif fórum

[TUTORIAL] Menu em dropdown Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Menu em dropdown 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Menu em dropdown 1660898911

[TUTORIAL] Menu em dropdown

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

  • 0

[TUTORIAL] Menu em dropdown Empty [TUTORIAL] Menu em dropdown

Mensagem por GabrielS. em Sex 3 Ago - 11:52


[TUTORIAL] Menu em dropdown Theme

Menu em dropdown

Muita gente, quer um efeito chamado de "Dropdown", esse efeito ocorre logo quando você passa o mouse acima de um nome do menu escolhido de seu fórum. Neste tutorial você aprenderá a fazer esse efeito espetacular. Sem mais demora vamos começar.

--> Tutoriais <--
Menu em dropdown


- Conhecendo o código:
Antes de iniciar o nosso tutorial, vamos conhecer os códigos que utilizaremos no decorrer no nosso tutorial.
Codigo Javascript:
jQuery(document).ready(function(){jQuery('.navlinks li a[href=/forum]"]').after('<div class="ulhome"><ul><li class="limenup"><a href="http://ENDEREÇO-DE-SEU-FÓRUM/fx-">NOME-DO-FÓRUM</a><br></li></ul></div>')});
Azul: Caso queira adicionar mais links, copie a parte em azul, logo após a tag </li>.
/forum: Onde o efeito se aplicará

Codigo CSS:
Código:
.ulhome{left:0px;top:20px;position:absolute !important;display:none;z-index:999;text-align:center !important;
background-image: url('IMAGEM-NO-FUNDO-DO-MENU-DROPDOWN') !important;
background-repeat: repeat !important;border:3px solid #ccc;list-style:none;position:relative;z-index:900
-moz-box-shadow:1px 1px 5px #9C9C9C;
-webkit-box-shadow:1px 1px 5px #9C9C9C;
box-shadow:1px 1px 5px #9C9C9C;}
.ulhome ul{text-align:left;border: 1px solid #CCCCCC;padding:0px 19px 0px 3px;}
.ulhome .limenup an{text-decoration:none;display:block;z-index:999;background-image:none !important}
li:hover .ulhome{left:0px;display:block;top:13px !important; -moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;
}

- Aplicando os códigos:
Para aplicar o código Javascript, faça o seguinte procedimento:
Painel de controle Seta azul Módulos Seta azul HTML & JAVASCRIPT Seta azul Gestão dos códigos Javascript Seta azul Criar novo javascript
Nome: Adicione qualquer nome, mas adicione um nome que lhe sirva de referencia a este código
Investimento: Adicione em todas as paginas
Código JAVASCRIPT: Adicione o código javascript, do passo anterior

Para aplicar o código CSS, faça o seguinte procedimento
Painel de controle Seta azul Visualização Seta azul Imagens e cores Seta azul Cores Seta azul Folha de estilo CSS Seta azul Adicione o código CSS citado no passo anterior

© Shiftactif & Dr. Kinki


[TUTORIAL] Menu em dropdown Act_bottom Agradeçemos a sua leitura deste tutorial, caso tenha alguma duvida, poste um tópico na seção Tire suas duvidas com o seguinte titulo:
Menu em dropdown
GabrielS.

GabrielS.
Colaborador Actif

Masculino
Idade : 20
PointActif's : 3304
ReputActifs : 20
Mensagens : 407
Inscrição : 03/04/2012

Localização : Shiftactif & SuporteDesign
100%

http://www.suportedesign.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum