[PEDIDO]Quick Navigation

Minha questão:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Este fórum teve isso antes, eu me perguntei se eu poderia tomar esse código ...

Agradeço com "melhor resposta"

---

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

@BUMP Somebody? xD

Olá,
Onde viu esse painel ae?

Até Mais...

Olá amigo,

O senhor deseja só o efeito de menu em abas vertical ou o código completo que carrega as categorias e os subfóruns?

JQuery escreveu:Olá,
Onde viu esse painel ae?

Até Mais...

In a IPB Forum

Wagner escreveu:Olá amigo,

O senhor deseja só o efeito de menu em abas horizontal ou o código completo que carrega as categorias e os subfóruns?

Yes, and this forum had it a time ago

Sorry, let's try in english x.x

Do you want just the system of a vertical menu with tabs, or the full system with the categories and the other things..?

Wagner escreveu:Sorry, let's try in english x.x

Do you want just the system of a vertical menu with tabs, or the full system with the categories and the other things..?

The second thing you say, i wanna have the code of that popup showing the categories and the subforums included, if it's possible, if not, please close this topoc, i don't wanna annoying you


This is in a Forumeiros Forum platform, this is the url --> Link

Hmm, i will do, but by my own code, as I like, ok?

Oh, well, i don't have nothing to say, i'm thankful because you are going try to help me, thanks a lot :3

Use this code:

Código:


 
<div style="display:none;" id="quicknavbs">
   
   <div class="popupWrapper" style="z-index: 10001; float: left; top: 15%; left: 50%; margin: 0 0 0 -250px; position: fixed;" id="navigation_popup_popup">
      
      <div style="width: 600px;" class="popupInner" id="navigation_popup_inner">
         
         <h3>
             Navegacion Rápida
         </h3>
         
         <div style="height: 460px; max-height: 460px; overflow: auto;" class="fixed_inner ipsBox">
             <script>
    jQuery(document).ready(function(){
    jQuery('#main_abas').prepend(
    '<ul id="navebar">  <li><a>Community</a></li> <li><a class="active">Forums</a></li></ul>')

    jQuery('.aba').css({
    display: 'none',
    marginTop: 0,
    borderTopWidth: 0
    })

    jQuery('#aba2').css('display', 'block');

    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(this).parents('#navebar').find('a').removeClass('active');
    jQuery(this).addClass('active');
    })
    })
    </script>
            <div id="main_abas">
               
               <div class="aba" id="aba1">
                  
                  <div class="block_list">
                     
                     <li>
                         <a href="/search?search_id=newposts">View New Content</a>
                     </li>
                     
                     <li>
                         <a href="/viewonline">Users Online</a>
                     </li>
                     
                     <li>
                         <a href="/memberlist">Registered Members</a>
                     </li>
                     
                  </div>
                  
               </div>
               
               <div class="aba" id="aba2">
                  
                  <div id="category">
                     
                  </div>
                   <script>jQuery("#category").load("/forum .main-head .page-title h2, .hierarchy");</script>
               </div>
               
            </div>
            
         </div>
         
         <div onclick="jQuery('#quicknavbs').fadeOut();" class="popupClose clickable" id="navigation_popup_close">
             <img alt="x" src="http://i78.servimg.com/u/f78/18/17/62/92/close_10.png" />
         </div>
         
      </div><script>
    jQuery('#quickNavLaunch').click(function(){
      jQuery('#quicknavbs').fadeToggle();return false;
    });
    </script>
   </div><style>
    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;
    }
    </style><style>
    .popupWrapper {
    background-color: #464646;
    background-color: rgba(70, 70, 70, 0.6);
    padding: 4px;
    -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
    -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;
    }
   
    .popupClose {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
    }
    .ipsBox, .ipsPad {
    padding: 9px;
    }
    .ipsBox {
    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-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      border-left: 1px solid #dcdcdc;
      font:bold 12px tahoma,helvetica,arial,sans-serif;
      margin:0;
      float: left;
      }
    #navebar li {
      display: block;
      background: #f5f5f5;
      color: #808080;
      border-bottom: 1px solid #dcdcdc;
      list-style:none;
      }
    #navebar li a:hover {
      background:#f2f2f2;
      color:#808080;
      }
    #navebar li a.active {
    width: 135px;
    position: relative;
    z-index: 8000;
    border-right: 2px solid #fcfcfc;
    background: #fcfcfc;
    color: #353535;
    font-weight: bold;
    }
    #navebar li a {
      border-right: 1px solid #dcdcdc;
      font-weight: normal;
      cursor: pointer;
      background: #f5f5f5;
      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;
      width:135px;
      display:block;
      }
    </style>
</div>


Use como modulo!

nombre del modulo:quickNavigation
usar en una tabla: NO
titulo del modulo:quickNavigation

DeeW. escreveu:Use this code:

Código:


 
<div style="display:none;" id="quicknavbs">
   
   <div class="popupWrapper" style="z-index: 10001; float: left; top: 15%; left: 50%; margin: 0 0 0 -250px; position: fixed;" id="navigation_popup_popup">
      
      <div style="width: 600px;" class="popupInner" id="navigation_popup_inner">
         
         <h3>
             Navegacion Rápida
         </h3>
         
         <div style="height: 460px; max-height: 460px; overflow: auto;" class="fixed_inner ipsBox">
             <script>
    jQuery(document).ready(function(){
    jQuery('#main_abas').prepend(
    '<ul id="navebar">  <li><a>Community</a></li> <li><a class="active">Forums</a></li></ul>')

    jQuery('.aba').css({
    display: 'none',
    marginTop: 0,
    borderTopWidth: 0
    })

    jQuery('#aba2').css('display', 'block');

    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(this).parents('#navebar').find('a').removeClass('active');
    jQuery(this).addClass('active');
    })
    })
    </script>
            <div id="main_abas">
               
               <div class="aba" id="aba1">
                  
                  <div class="block_list">
                     
                     <li>
                         <a href="/search?search_id=newposts">View New Content</a>
                     </li>
                     
                     <li>
                         <a href="/viewonline">Users Online</a>
                     </li>
                     
                     <li>
                         <a href="/memberlist">Registered Members</a>
                     </li>
                     
                  </div>
                  
               </div>
               
               <div class="aba" id="aba2">
                  
                  <div id="category">
                     
                  </div>
                   <script>jQuery("#category").load("/forum .main-head .page-title h2, .hierarchy");</script>
               </div>
               
            </div>
            
         </div>
         
         <div onclick="jQuery('#quicknavbs').fadeOut();" class="popupClose clickable" id="navigation_popup_close">
             <img alt="x" src="http://i78.servimg.com/u/f78/18/17/62/92/close_10.png" />
         </div>
         
      </div><script>
    jQuery('#quickNavLaunch').click(function(){
      jQuery('#quicknavbs').fadeToggle();return false;
    });
    </script>
   </div><style>
    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;
    }
    </style><style>
    .popupWrapper {
    background-color: #464646;
    background-color: rgba(70, 70, 70, 0.6);
    padding: 4px;
    -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
    -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;
    }
   
    .popupClose {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
    }
    .ipsBox, .ipsPad {
    padding: 9px;
    }
    .ipsBox {
    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-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      border-left: 1px solid #dcdcdc;
      font:bold 12px tahoma,helvetica,arial,sans-serif;
      margin:0;
      float: left;
      }
    #navebar li {
      display: block;
      background: #f5f5f5;
      color: #808080;
      border-bottom: 1px solid #dcdcdc;
      list-style:none;
      }
    #navebar li a:hover {
      background:#f2f2f2;
      color:#808080;
      }
    #navebar li a.active {
    width: 135px;
    position: relative;
    z-index: 8000;
    border-right: 2px solid #fcfcfc;
    background: #fcfcfc;
    color: #353535;
    font-weight: bold;
    }
    #navebar li a {
      border-right: 1px solid #dcdcdc;
      font-weight: normal;
      cursor: pointer;
      background: #f5f5f5;
      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;
      width:135px;
      display:block;
      }
    </style>
</div>


Use como modulo!

nombre del modulo:quickNavigation
usar en una tabla: NO
titulo del modulo:quickNavigation

Nope, nothing happens

Hey @mindlezz,

Can you proceed from here? If you can't, later i will finish to you...

Código:

<script>
$(function(){
    $("#forums").load("/forum .main-head .page-title h2, .hierarchy");
    $('#tabs li a').click(function(e){
        e.preventDefault();
        //$(this).addClass('active');
        if( $(this).text() === 'Forums' ){
            $('#community').hide();
            $('#forums').show();
        }else if( $(this).text() === 'Community' ){
            $('#community').show();
            $('#forums').hide();
        }
    });
});
</script>
<style type="text/css">
#quickwrap{
    z-index: 999;
    top: 15%;
    left: 50%;
    position: fixed;
    width: 600px;
    padding: .5em;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    margin-left: -300px;
}
#quicknav{
    background: #eee;
    font: 13px Lucida sans;
    overflow: hidden;
}
#quicknav h3{
    border-bottom: 1px solid #d8d8d8;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8);
    background: #eee url("http://i56.servimg.com/u/f56/17/97/98/69/highli12.png") repeat-x 0 0;
    padding: .5em;
    margin: 0;
}
#quicktabs{
}
#quicknav #tabs{
    margin: 0;
    padding: 0;
    border-bottom: #dcdcdc .3em solid;
    width: 200px;
    float: left;
}
#quicknav #tabs li{
    list-style: none;
}
#quicknav #tabs li a{
    text-decoration: none;
    color: #8d8d8d;
    background: #f5f5f5;
    padding: .6em 1em;
    display: block;
    border: #dcdcdc 1px solid;
    border-bottom: none;
    border-right: none;
}
#quicknav #tabs li a:hover{
    background: rgba(255,255,255,.1);
}
#forums, #community{
    background: #f5f5f5;
    width: 372px;
    float: right;
    border: #dcdcdc 1px solid;
}
#forums .hierarchy, #list h2{
    display: block;
    text-shadow: none;
}
#forums .hierarchy a{
    text-decoration: none;
    color: #8d8d8d;
}
#forums h2{
    margin: 1em 0 0;
    padding: .5em 1em;
    background: #333;
    color: #fff;
}
#forums h2:first-child{
    margin: 0;
}
#tabwrap{
    padding: 1em;
    overflow: hidden;
}
#community{
    display: none;
}
</style>
<div id="quickwrap">
    <div id="quicknav">
        <h3>Quick navigation</h3>
        <div id="tabwrap">
            <div id="quicktabs">
                <ul id="tabs">
                    <li><a href="javascript:void(0)">Community</a></li>
                    <li><a href="javascript:void(0)" class="active">Forums</a></li>
                </ul>
                <div id="forums">
                   
                </div>
                <div id="community">
                    <a href="javascript:void(0)">Teste</a>
                </div>
            </div>
        </div>
    </div>
</div>

Well, looks good but, i have to add the forums manually? i don't have problem with that, but i can't close it and the popup appears suddenly

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Looks, this forum had it too --> IMG LINK

FORUM LINK

Well, this is just a draft for you... If you want the code of these forums you are sending i can get for you.. But i prefer do it by my self...

Explaining the code:

The "magic" is in this part of the code

Código:

$("#forums").load("/forum .main-head .page-title h2, .hierarchy");

This is a Ajax request, read more here: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

We are replacing the content of the id #forums by the elements we get on the /forum page, look

We get this

Código:

.main-head .page-title h2

And this

Código:

.hierarchy

So we are loading the titles of the index page and putting in our ID...

It's easy, i think you can understand...

To finish, i just need to add the effect of "fade in" on click in the quick navigation button, and the effect to close the box on click in the close button...

And little design details...

Do you will wait or try to do by yourself??

If you want to do to learn i can help you with this...