Como criar um menu esticado flutuante?

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

Atendido / Resolvido Como criar um menu esticado flutuante?

Mensagem por MEZA em Qua 11 Nov 2015 - 10:00

Detalhes da questão


Endereço do fórum: fifasagas.forumeiros.com
Versão do fórum: PhpBB3

Descrição


Bom dia, pessoal!

Consultei o tutorial do FDF (https://ajuda.forumeiros.com/t93863-tutorial-fixar-menu-no-scrolling) e fiz no meu fórum.


Mas quando rolo pra baixo o menu fica menor, veja imagem abaixo, por favor.

MENU NO TAMANHO NORMAL
Como criar um menu esticado flutuante? DTkP29w


MENU APÓS ROLAR
Como criar um menu esticado flutuante? ZneSyn7

Gostaria que o menu mantivesse o tamanho original ao rolar a página.

Vocês podem ,por favor, me ajudar?

Grato desde já,

MEZA
Administrador Fifa Sagas Game Club


Última edição por MEZA em Qua 11 Nov 2015 - 13:52, editado 1 vez(es)
MEZA

MEZA
Nível 4

Masculino
Inscrito dia : 23/04/2015
Mensagens : 26
Pontos Ativos : 47

Ver perfil do usuário http://fifasagas.forumeiros.com/forum

Atendido / Resolvido Re: Como criar um menu esticado flutuante?

Mensagem por Holkis em Qua 11 Nov 2015 - 10:54

Olá,

Retire o código utilizado no tutorial, e coloque este código em sua folha de estilo CSS:
Código:
#page-header .navbar{position: fixed;}
Veja se resulta.

Atenciosamente. zen
Holkis

Holkis
Super usuário

Masculino
Inscrito dia : 21/04/2015
Mensagens : 3532
Pontos Ativos : 4237

Ver perfil do usuário http://www.holkis.net/ https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA

Atendido / Resolvido Re: Como criar um menu esticado flutuante?

Mensagem por MEZA em Qua 11 Nov 2015 - 11:23

Ficou um pouco mais estranho...rs

Conforme imagens abaixo!

Como criar um menu esticado flutuante? 6aoU8ht

Como criar um menu esticado flutuante? IEUtSjH
MEZA

MEZA
Nível 4

Masculino
Inscrito dia : 23/04/2015
Mensagens : 26
Pontos Ativos : 47

Ver perfil do usuário http://fifasagas.forumeiros.com/forum

Atendido / Resolvido Re: Como criar um menu esticado flutuante?

Mensagem por Holkis em Qua 11 Nov 2015 - 11:25

Olá,

Volte com código do tutorial. E centralize o menu.

Atenciosamente. zen
Holkis

Holkis
Super usuário

Masculino
Inscrito dia : 21/04/2015
Mensagens : 3532
Pontos Ativos : 4237

Ver perfil do usuário http://www.holkis.net/ https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA

Atendido / Resolvido Re: Como criar um menu esticado flutuante?

Mensagem por MEZA em Qua 11 Nov 2015 - 11:28

Voltou a mesma situação do início.

O ideal seria um código parecido com o do FDF.
MEZA

MEZA
Nível 4

Masculino
Inscrito dia : 23/04/2015
Mensagens : 26
Pontos Ativos : 47

Ver perfil do usuário http://fifasagas.forumeiros.com/forum

Atendido / Resolvido Re: Como criar um menu esticado flutuante?

Mensagem por Holkis em Qua 11 Nov 2015 - 11:33

Holkis

Holkis
Super usuário

Masculino
Inscrito dia : 21/04/2015
Mensagens : 3532
Pontos Ativos : 4237

Ver perfil do usuário http://www.holkis.net/ https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA https://www.youtube.com/channel/UCyb9m2QrxbWPVsnYYfjhKHA

Atendido / Resolvido Re: Como criar um menu esticado flutuante?

Mensagem por Shek em Qua 11 Nov 2015 - 12:21

Bom dia!

Acesse seu CSS e cole:
Código:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  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 } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#CCC;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#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 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}
Em seguida, adicione para Todas as páginas este javascript:
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();
        });
      });
    }
  });
}());
Salve. Muito feliz


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Shek Crowley
Shek

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 18137
Pontos Ativos : 22144

Ver perfil do usuário https://shiftactive.blogspot.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Atendido / Resolvido Re: Como criar um menu esticado flutuante?

Mensagem por MEZA em Qua 11 Nov 2015 - 13:49

Obrigado, Shek!

Funcionou perfeitamente!

Agradeço também Holkis pela presteza!

Abraço a todos!

MEZA
Administrador Fifa Sagas Game Club
MEZA

MEZA
Nível 4

Masculino
Inscrito dia : 23/04/2015
Mensagens : 26
Pontos Ativos : 47

Ver perfil do usuário http://fifasagas.forumeiros.com/forum

Atendido / Resolvido Re: Como criar um menu esticado flutuante?

Mensagem por Shek em Qua 11 Nov 2015 - 14:21

Como criar um menu esticado flutuante? Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Shek Crowley
Shek

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 18137
Pontos Ativos : 22144

Ver perfil do usuário https://shiftactive.blogspot.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

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


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