[TUTORIAL] Colocar navegação rápida no rodapé da pagina

Com este tutorial, nós estaremos mostrando a seguir uma função de navegação rápida nos fóruns. Com a função poderemos aceder entre os fóruns por uma aba com um efeito bem aconchegante aos fóruns Forumeiros.

--> Tutoriais, dicas e astúcias <--
Colocar navegação rápida no rodapé da pagina

1º - Noção básica da função:
Nós estaremos utilizando um código HTML que funcionará na Home page de teu fórum. O código é bem simples e de fácil manuseio se quiser editar algo dentro dele.

Assunto da mensagem: Correspondente ao nome do código HTML na Home page. Aconselhamos deixar em branco

Conteúdo da mensagem:- Nesta área que colocaremos o código HTML.

2º - Código a ser usado:
Abaixo temos o código em que voce usara para fazer a função em teu fórum. Aconselhamos não editar nenhuma parte do código a menos que você entenda o que esta alterando:

Código:

<ul class="nav_fast">
   
  <li>
          <a class="clickable" onclick="jQuery('#quicknavbs').fadeToggle();" id="quickNavLaunch" title="Abrir Navegação Rápida">Navegação rápida</a>               
  </li>
</ul><style type="text/css">
#navigation_popup_popup {
position: fixed;
z-index: 999;
top: 15%;
left: 50%;
margin-left: -300px;
}
#navigation_popup_inner {width: 600px;}
#navigation_popup_inner .fixed_inner {
height: 460px;
max-height: 460px;
overflow: auto;
}
.nav_fast {
bottom: 15px;
right: 5px;
padding: 0 !important;
position: fixed;
}
.nav_fast li {list-style-type: none;}
.nav_fast a {
padding: 9px;
background: #eee;
border: 1px solid #ddd;
}
.nav_fast a, .nav_fast a:hover {color: gray;}
div#category h2 {
border-bottom: 1px solid #eaeaea;
border-top: 1px solid #fff;
font-weight: bold;
display: block;
padding: 5px 10px;
}
div#category .hierarchy {
font-weight: normal!important;
font-size: 11px;
text-shadow: 0px 0px 0px;
background: none;
display: block;
margin-left: 0px;
border-top: 1px solid #fff;
border-bottom: 1px solid #eaeaea;
padding: 5px 10px;
padding-left: 15px;
}
.popupWrapper {
background: url('http://i72.servimg.com/u/f72/18/07/42/17/trans610.png') repeat;
background: rgba(0,0,0,0.6);
padding: 8px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0px 10px 20px;
-moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.popupInner {
background: white;
width: 500px;
overflow: auto;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
overflow-x: hidden;
}
.popupInner h3 {
background: #eee url(http://i72.servimg.com/u/f72/18/07/42/17/highli13.png) repeat-x top;
border-bottom: 1px solid #d8d8d8;
text-shadow: rgba(255,255,255,0.8) 0px 1px 0px;
padding: 8px 10px 9px;
font-size: 16px;
font-weight: 300;
}
.popupClose {
position: absolute;
right: 20px;
top: 20px;
}
.fixed_inner {
padding: 9px;
background: #eee;
}
.block_list > li {
padding: 5px 10px;
list-style-type: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #eaeaea;
}
div.aba { 
margin-left: 153px;
background: #fcfcfc;
text-align: justify;
min-height: 400px;
border: 1px solid #dcdcdc!important;
}
#navebar {
border: 1px solid #dcdcdc;
border-right: 0;
font: bold 12px tahoma,helvetica,arial,sans-serif;
margin: 0;
float: left;
padding: 0 !important;
}
#navebar li {
display: block;
background: #f5f5f5;
color: #808080;
border-bottom: 1px solid #dcdcdc;
list-style: none;
}
#navebar li:last-child {border-bottom: 0;}
#navebar li a {
font-weight: normal;
cursor: pointer;
background: #f5f5f5;
border-right: 1px solid #dcdcdc;
color: #8d8d8d;
padding: 10px 8px;
outline: 0;
color: #8d8d8d;
-webkit-transition: background-color 0.1s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
text-decoration: none;
display: block;
}
#navebar li a:hover {
background: #f2f2f2;
color: #808080;
}
#navebar li a.active {
width: 135px;
position: relative;
z-index: 8000;
background: #fcfcfc;
border-right: 2px solid #fcfcfc;
color: #353535;
font-weight: bold;
}
.clickable {cursor: pointer;}
</style>
<div style="display: none;" id="quicknavbs">
                   
  <div id="navigation_popup_popup" class="popupWrapper">
                             
      <div id="navigation_popup_inner" class="popupInner">
                                     
        <h3>
                                      Navegação Rápida                       
        </h3>
                                         
        <div class="fixed_inner">
                                                       
            <div id="main_abas">
                                                         
              <div style="display: none;" id="aba1" class="aba">
                                                                     
                  <div class="block_list">
                                                                         
                    <li>
                                                        <a href="/search?search_id=newposts">Ver Novo Conteúdo </a>                                 
                    </li>
                                                                         
                    <li>
                                                        <a href="/viewonline">Usuários Online</a>                                 
                    </li>
                                                                         
                    <li>
                                                        <a href="/memberlist">Membros Registrados</a>                                 
                    </li>
                                                                           
                  </div>
                                                                 
              </div>
                                                         
              <div id="aba2" class="aba">
                                                                                             
                  <div class="block_list" id="category">
                                                                   
                  </div>
                                                                 
              </div>
                                                                             
            </div>
                                                                     
        </div>
                                     
        <div id="navigation_popup_close" onclick="jQuery('#quicknavbs').fadeOut();" class="popupClose clickable">
                              <img src="http://i81.servimg.com/u/f81/18/07/42/17/close_11.png" alt="x" />                     
        </div>
                                 
      </div>
       
  </div>
</div><script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#category').load('/forum .main-head .page-title h2, .hierarchy');
jQuery('#main_abas').prepend(
'        <ul id="navebar">' +
'          <li>' +
'          <a>Geral</a>' +
'          </li>' +
'          <li>' +
'          <a class="active">Forums</a>' +
'          </li>' +
'        </ul>');
jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#main_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery('#navebar a.active').removeClass('active');
jQuery(this).addClass('active');
});
});
</script>

Resultado:

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Colocar navegação rápida no rodapé da pagina