Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» Bug no plug-in "Criar tags bbcode" do Daemon
Hoje à(s) 16:00 por luuuiiiz

» Efeito hover na descrição
Hoje à(s) 15:52 por YouTube3

» Personalizar título e ícone das categorias
Hoje à(s) 15:30 por sandra51

» Erro Facebook Conect
Hoje à(s) 14:55 por Ana Leandro

» Ausência dos campos de perfil
Hoje à(s) 14:41 por Cream

» Tooltip no título dos tópicos
Hoje à(s) 14:19 por Cream

» Formulário de postagem
Hoje à(s) 14:03 por YouTube3

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
Cream
 
while
 
Shek
 
Holkis
 
Mr.Probz
 
Nean
 
lavinnia
 
Harold C+
 
Sennior
 
BichodoMato
 

Quem está conectado
90 usuários online :: 5 usuários cadastrados, Nenhum Invisível e 85 Visitantes :: 2 Motores de busca

Ana Leandro, Solkis, staay03, SyraoN_, while

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Menu rolante estilo ao do FDF

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

Resolvido Menu rolante estilo ao do FDF

Mensagem por luuuiiiz em Sex 15 Jul 2016 - 17:01

Detalhes da questão


Endereço do fórum: jornalrhc.forumeiros.com
Versão do fórum: PunBB

Descrição


Saudações, pessoas!

Gostaria de fazer, em meu fórum um menu, que aparece, assim que o menu principal desaparece, descendo a página, como o do FDF.
Se possível, gostaria de pegar um menu secundário igual ao do FDF. Mas se não for possível, gostaria de um parecido e.e
Obrigado desde já.
Muito feliz

luuuiiiz
Nível 9

Masculino
Inscrito dia : 23/04/2016
Mensagens : 216
Pontos Ativos : 538

http://rhc-forumteste.forumeiros.com

Resolvido Re: Menu rolante estilo ao do FDF

Mensagem por Game Player em Sab 16 Jul 2016 - 12:56

Tente esse código css

Código:
#page-header .navbar {
position: relative;
top: -273px;
}

#page-header .navbar{position: fixed; top: -150px; left: 0px; width: 100%;}

Game Player
Nível 6

Masculino
Inscrito dia : 26/01/2016
Mensagens : 71
Pontos Ativos : 384

http://mundogamebr.forumeiro.com/

Resolvido Re: Menu rolante estilo ao do FDF

Mensagem por while em Sab 16 Jul 2016 - 17:52

Olá, crie um novo javascript com investimento em todas as paginas com esse código:
Código:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
 
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
 
    customNav : '', // custom navlinks
 
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
 
 
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
   
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
   
      toggler : '30px'
    },
 
    activeOffset : {}, // active offset for the sticky nav
 
    visible : false, // sticky nav is visible
 
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
   
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
 
    animating : false, // sticky nav is animating
 
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
   
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
 
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
 
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
 
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
 
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
       
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
       
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
       
        document.body.appendChild(FA.Nav.toggler);
      };
     
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
   
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
     
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());

Logo após isto, adicione em sua folha de estilo css esse código:
Código:
#fa_sticky_nav {
  font-size:0;
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
#fa_sticky_nav li { display:inline }
#fa_sticky_nav a.mainmenu {
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
  margin-top:-10px;
}
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
#fa_sticky_toggle:hover { background-position:-30px 0 }
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}
 .post div[style*="-30px;"] {
  top:-60px !important;
}

Até mais.


Seta Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Seta Respeite as Regras da seção de Suporte.
Seta MP apenas para assuntos importantes!
Seta Seu tópico foi resolvido ? Não se esqueça de clicar no

while
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2435
Pontos Ativos : 3553

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Menu rolante estilo ao do FDF

Mensagem por luuuiiiz em Sab 16 Jul 2016 - 20:56

Não surtiu nenhum efeito. Triste

luuuiiiz
Nível 9

Masculino
Inscrito dia : 23/04/2016
Mensagens : 216
Pontos Ativos : 538

http://rhc-forumteste.forumeiros.com

Resolvido Re: Menu rolante estilo ao do FDF

Mensagem por while em Sab 16 Jul 2016 - 22:46

Tem certeza??

Fez o que pedi?

Adicione esse código css:
Código:
#fa_sticky_nav {
  font-size:0;
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
#fa_sticky_nav li { display:inline }
#fa_sticky_nav a.mainmenu {
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
  margin-top:0px!important;
}
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
#fa_sticky_toggle:hover { background-position:-30px 0 }
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}
 .post div[style*="-30px;"] {
  top:-60px !important;
}

E crie um novo javascript com investimento em todas as paginas com esse código:
Código:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
 
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
 
    customNav : '', // custom navlinks
 
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
 
 
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
   
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
   
      toggler : '30px'
    },
 
    activeOffset : {}, // active offset for the sticky nav
 
    visible : false, // sticky nav is visible
 
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
   
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
 
    animating : false, // sticky nav is animating
 
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
   
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
 
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
 
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
 
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
 
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
       
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
       
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
       
        document.body.appendChild(FA.Nav.toggler);
      };
     
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
   
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
     
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());

Veja o resultado que obtive com o código ativo em seu fórum: http://prntscr.com/btrw48

Até mais.


Seta Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Seta Respeite as Regras da seção de Suporte.
Seta MP apenas para assuntos importantes!
Seta Seu tópico foi resolvido ? Não se esqueça de clicar no

while
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2435
Pontos Ativos : 3553

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Menu rolante estilo ao do FDF

Mensagem por luuuiiiz em Dom 17 Jul 2016 - 2:15

Agora sim, mas ficou meio bugado, as letras pra cima... bugado! e.e

luuuiiiz
Nível 9

Masculino
Inscrito dia : 23/04/2016
Mensagens : 216
Pontos Ativos : 538

http://rhc-forumteste.forumeiros.com

Resolvido Re: Menu rolante estilo ao do FDF

Mensagem por while em Dom 17 Jul 2016 - 2:19

Não vejo o código ativo em seu fórum... estais a utilizar o investimento aonde? pois pelo que eu vi não é em todas as paginas, e muito menos no portal e no indice.

Até mais.


Seta Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Seta Respeite as Regras da seção de Suporte.
Seta MP apenas para assuntos importantes!
Seta Seu tópico foi resolvido ? Não se esqueça de clicar no

while
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2435
Pontos Ativos : 3553

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Menu rolante estilo ao do FDF

Mensagem por luuuiiiz em Dom 17 Jul 2016 - 3:27

Sim, eu desativei o mesmo, pois estava bugado. Se quiser que eu o reative, pode falar.  Rindo

luuuiiiz
Nível 9

Masculino
Inscrito dia : 23/04/2016
Mensagens : 216
Pontos Ativos : 538

http://rhc-forumteste.forumeiros.com

Resolvido Re: Menu rolante estilo ao do FDF

Mensagem por while em Dom 17 Jul 2016 - 3:35

Com certeza... reative por favor e deixe ativo pra eu testar.

se não fica complicado né... seria nesse fórum? http://jornalrhc.forumeiros.com/

Só pra eu ter certeza.... pois no meu teste não houve bug.

Enfim... não esqueça de adicionar o código css também!!!
Até mais.


Seta Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Seta Respeite as Regras da seção de Suporte.
Seta MP apenas para assuntos importantes!
Seta Seu tópico foi resolvido ? Não se esqueça de clicar no

while
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2435
Pontos Ativos : 3553

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Menu rolante estilo ao do FDF

Mensagem por while em Qua 20 Jul 2016 - 15:03

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema.
Tópico marcado como Resolvido e movido para Questões resolvidas.


Seta Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Seta Respeite as Regras da seção de Suporte.
Seta MP apenas para assuntos importantes!
Seta Seu tópico foi resolvido ? Não se esqueça de clicar no

while
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2435
Pontos Ativos : 3553

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5