[Tutorial] Widget Acesso rápido igual do FDF

Informações:
Autor: FdF
Funcionalidade: Todas as Versões

Painel de Controle ☛ Modulos ☛ Portal & Widgets ☛ Gestão dos Widgets do fórum

Código:

<div class="h3">Acesso rápido</div><script type="text/javascript" id="MenuShiftactif">
function Mostrar(objeto) {
    var id = objeto.id;
    id = id.replace('_m', '');
    var indice = document.getElementById(id + '_e');
    var menu = document.getElementById('menu_' + id);
    menu.style.display = 'block';
    objeto.style.display = 'none';
    indice.style.display = 'block'
}

function Esconder(objeto) {
    var id = objeto.id;
    id = id.replace('_e', '');
    var indice = document.getElementById(id + '_m');
    var menu = document.getElementById('menu_' + id);
    menu.style.display = 'none';
    objeto.style.display = 'none';
    indice.style.display = 'block'
}</script><style type="text/css">
img.img1, img.img1_ {
margin-bottom: -4% !important;
width: 15px;
height: 15px;
}

ul.menuAll, div#int_menu li {
list-style-type: none !important;
}

ul.menuAll {
padding-left: 8px !important;
}

ul.menuAll li {
border-left: 3px solid #7BB92B;
}

ul.menuAll li a {
margin-left: 5px;
}

p.ativo {
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.78);
}

div#int_menu .titles {
cursor: pointer;
border-bottom: 1px solid #009AE1;
transition: all 0.25s ease-out 0s;
}

div#int_menu .titles:hover {
cursor: pointer;
border-bottom: 2px solid #009AE1;
transition: all 0.25s ease-out 0s;
}
</style><div id="int_menu">
                  
 <li>
                  
 <p onclick="Mostrar(this);" class="titles" id="1_m">
         <img src="http://i19.servimg.com/u/f19/18/76/69/60/menu_l10.png" class="img1" /> Forumeiros & Você          
 </p>
                  
 <p class="ativo" style="display:none" onclick="Esconder(this);" id="1_e">
  <img src="http://i45.servimg.com/u/f45/12/05/75/97/th/i11.png" class="img1_" /> Equipe Forumeiros  
 </p>
                  
 <ul style="display:none" class="menuAll" id="menu_1">
                  
 <li>
          <a href="/-f4"> Regulamento e Staff</a>          
 </li>
                  
 <li>
          <a href="/-f1"> Anúncios e Atualizações</a>          
 </li>
                  
 <li>
          <a href="/t23-"> Perguntas e respostas</a>          
 </li>
                  
 <li>
          <a href="/t6745-"> Tutoriais e astúcias</a>          
 </li>
                  
 </ul>
    
 <p onclick="Mostrar(this);" class="titles" id="2_m">
         <img src="http://2img.net/i/fa/fdf/admin.png" class="img1" /> Ajuda & Suporte  
 </p>
                  
 <p class="ativo" style="display:none" onclick="Esconder(this);" id="2_e">
  <img src="http://2img.net/i/fa/fdf/questions.png" class="img1_" /> Setor de Suporte  
 </p>
                  
 <ul style="display:none" class="menuAll" id="menu_2">
                  
 <li>
          <a href="/-f69"> Questões sobre Conexão</a>          
 </li>
                  
 <li>
          <a href="/-f22"> Questões sobre códigos</a>          
 </li>
    
 <li>
          <a href="/-f27"> Questões sobre painel</a>          
 </li>
    
 <li>
          <a href="/-f75"> Questões sobre domínios e créditos</a>          
 </li>
    
 <li>
          <a href="/-f25"> Questões sobre aparência</a>          
 </li>
    
 <li>
          <a href="/-f29"> Questões sobre diversas</a>          
 </li>
                  
 </ul>