Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

avatar
Fundador
Menu de navegação por D'Leandro™ V1.0Visto que muitos membros estavam interessados neste modelo de menu, resolvi criar um para todas as versões, sendo que o já existente era apenas para edição de templates.
Descrição: Menu funcional e editável.

Versões de funcionamento: Todas as versões.

1º Passo - Instalando o estilo com CSS
O CSS é um tipo de código designado ao design e posicionamento, e este não é diferente, na forumeiros você encontra a sua página de edição em Painel de controle > Visualização > Imagens & cores > Cores > Folha de estilo CSS ...
Adicione o código a baixo no topo da folha de estilos CSS.
Código:
/* Menu de Navegação por D'Leandro™ V1.0 */
#rsrbspo:hover {
    background-color: rgba(0, 0, 0, 0.2);
    position: relative;
    top: 1px;
    padding: 12px 5px;
    color: #fff;
    text-shadow: 0px 0px 1px #fff;
}
#rsrbspo {
    position: relative;
    top: 1px;
    padding: 12px 5px;
    margin-right: 5px;
}
#linkshow {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0px 5px;
    height: 15px !important;
    margin-right: 5px;
}
#logcrear {
    text-align: right;
    margin-top: -18px;
}
#navbarflout {
    position: absolute;
    top: 170px;
    left: 100px;
    right: 100px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 16px rgb(0, 0, 0) inset;
    padding: 14px 20px;
    font-size: 11px;
    border-radius: 4px;
}
/* TUTORIAL = (http://staffergroupbr.stuning.net/t1384-menu-de-navegacao-por-d-leandro-v10) */
Valide seu CSS e vamos para o próximo passo.

2º Passo - Criando a barra de login
A "barra de login", assim chamada, é a parte que o usuário não logado pode ver, nela temos o botão para fazer login ou registro, entre outros links.
Vamos criar um novo módulo de Widget para instalar esta parte. Para isto vá em painel de controle > Módulos > Portal & Widgets > Gestão dos widgets do fórum > ...
Crie um novo widget personalizado com as seguintes informações:
Nome do widget: Menu de Navegação por D'Leandro™ V1.0
Utilizar um table type: Não
Título do widget: Menu de Navegação por D'Leandro™ V1.0
Fonte do widget * : Utilize o código a baixo.

Importante: Clique em e selecione apenas convidados.

Código:
<div id="navbarflout">
  <a id="rsrbspo" href="#">Index</a>
  <a id="rsrbspo" href="#">Forum</a>
  <a id="rsrbspo" href="#">Portal</a>
  <a id="rsrbspo" href="#">Membros</a>
  <a id="rsrbspo" href="#">Grupos</a>
  <a id="rsrbspo" href="#">Perfil Pessoal</a>
  <a id="rsrbspo" href="#">Mensagens</a>
  <a id="rsrbspo" href="#">Novo Link 01</a>
  <a id="rsrbspo" href="#">Novo Link 02</a>
  <a id="rsrbspo" href="#">Novo Link 03</a>
 <div id="logcrear">
  <a id="linkshow" href="/login"><img src="http://i56.servimg.com/u/f56/17/71/75/73/user_l10.png"/> Sign In</a>
  <a id="linkshow" href="/register?agreed=true&step=2"><img src="http://i56.servimg.com/u/f56/17/71/75/73/user_r10.png"/> Create Account</a>
 </div>
</div>
Salve o widget e deixe-o posicionado em uma das colunas.

3º Passo - Criando o menu definitivo
O chamado menu definitivo é formado pelos links visualizados pelos membros já logados no fórum, eles também são totalmente editáveis. Novamente teremos que adicionar um módulo. Para isto vá em painel de controle > Módulos > Portal & Widgets > Gestão dos widgets do fórum > ...
Crie um novo widget personalizado com as seguintes informações:
Nome do widget: Menu de Navegação por D'Leandro™ V1.0
Utilizar um table type: Não
Título do widget: Menu de Navegação por D'Leandro™ V1.0
Fonte do widget * : Utilize o código a baixo.

Importante: Clique em e Desselecione apenas convidados.

Código:
<div id="navbarflout">
  <a id="rsrbspo" href="#">Index</a>
  <a id="rsrbspo" href="#">Forum</a>
  <a id="rsrbspo" href="#">Portal</a>
  <a id="rsrbspo" href="#">Membros</a>
  <a id="rsrbspo" href="#">Grupos</a>
  <a id="rsrbspo" href="#">Perfil Pessoal</a>
  <a id="rsrbspo" href="#">Mensagens</a>
  <a id="rsrbspo" href="#">Novo Link 01</a>
  <a id="rsrbspo" href="#">Novo Link 02</a>
  <a id="rsrbspo" href="#">Novo Link 03</a>
 <div id="logcrear">{USERLINK}
  <a id="linkshow" href="/login?logout=1"><img src="http://www.breatheheavy.com/exhale/public/style_images/animate/user_login.png"/> Sign Out</a>
 </div>
</div>
Salve o widget e deixe-o posicionado em uma das colunas.

  • Resultado:



(Ao logar-se o menu será alterado)




© Staffer Group BR™
PRECISA DE SUPORTE?

Criador: D'Leandro™
Site: http://staffergroupbr.stuning.net/t1384-menu-de-navegacao-por-d-leandro-v10
Ver perfil do usuário

#2
 ®'Martins

avatar
Membro
ola

Caso eu necessite adcionar um sub menu épossivel?
Ver perfil do usuário

#3
 D'Leandro™

avatar
Fundador
Sim, mas muito complicado, alem do mais ja existem centenas deles porai, nao faria sentido adicionar um sub menu neste.
Ver perfil do usuário

#4
 ®'Martins

avatar
Membro
Ok obrigado!!!
Ver perfil do usuário

#5
 Master Publicitario

avatar
Membro
Muito bom, parabéns
Ver perfil do usuário

#6
 'Fusion

avatar
Membro
Tá de parabéns mano gostei
Ver perfil do usuário samuca_akira@hotmail.com

#7
 GyGu

avatar
Membro
Comentando para testar!
Ver perfil do usuário

#8
 TiagoDJ-7.0

avatar
Membro
gostei vou utilizá no meu site
Ver perfil do usuário

#9
 fojogo

avatar
Membro
Muito bom, adorei
Ver perfil do usuário

#10
 Jose Hamizaki

avatar
Membro
Está otimo, parabens.
Ver perfil do usuário

#11
 Zoster

avatar
Membro
muito bom
Ver perfil do usuário

#12
 Chorão

avatar
Membro
O Código CSS Fornecido esta Faltando alguma Tag de Fechamente:

Erro detectado
Contamos um número ímpar de aspas logo um canal está mal fechado. Isso quer dizer que o seu CSS pode não ser válido e não será exibido corretamente no seu fórum.

Lhe aconselhamos que releia o seu código.
Ver perfil do usuário

#13
 D'Leandro™

avatar
Fundador
Olá!

Irei analizar o tópico!

Até mais.
Ver perfil do usuário

#14
 Publigos

avatar
Membro
ire utilizar o codígo
Ver perfil do usuário

#15
 Hades

avatar
Membro
Vou testa-la em meu forum de testes se funcionar agradeço !
Ver perfil do usuário

#16
 azure

avatar
Membro
Muito bom, parabéns
Ver perfil do usuário

#17
 Mr.GamingPT

avatar
Membro
up
Ver perfil do usuário

#18
 Conteúdo patrocinado