[TUTORIAL] Criar um menu lateral com links rápidos

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

[TUTORIAL] Criar um menu lateral com links rápidos

Mensagem por RafaelS. em 09/07/18, 02:38 pm

Criar um menu lateral com links rápidos
Com este tutorial, será possível adicionar links para tópicos e páginas web importantes do/para o seu fórum, melhorando o acesso a esses de forma elegante. Este tutorial pode ser aplicado para todas as versões.

Criar um menu lateral com links rápidos
TUTORIAIS, DICAS E ASTÚCIAS

Instalação do Javascript

As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de Controle Seta Branca Módulos Seta Branca HTML e Javascript Seta Branca Gestão dos códigos Javascript Seta Branca Criar um novo javascript

Seta Habilitar o gerenciamento dos códigos JavaScript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.
Seta Título - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
Seta Localização - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. No nosso caso, aplicaremos Em todas as páginas.
Seta Código JavaScript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

E adicione o seguinte código:
Código:
/*globals jQuery*/
 
/**
 * Creates a custom links tab.
 *
 * @author  Luiz Felipe F.
 * @see      https://lffg.github.io
 * @version  1.0.0
 * @license  MIT
 */
 
(function($, css) {
  'use strict';
 
  var categories = [{
    name: 'Categoria de Links 1',
    links: [{
      html: 'Link 1 (Cat. 1)',
      href: '#'
    }, {
      html: 'Link 3 (Cat. 1)',
      href: '#'
    }, {
      html: 'Link 2 (Cat. 1)',
      href: '#'
    }]
  }, {
    name: 'Categoria de Links 2',
    links: [{
      html: 'Link 1 (Cat. 2)',
      href: '#'
    }, {
      html: 'Link 3 (Cat. 2)',
      href: '#'
    }, {
      html: 'Link 2 (Cat. 2)',
      href: '#'
    }]
  }];
 
  $(function() {
    var $wrapper = $([
      '<div class="fa-quick-links-wrapper">',
      '  <a class="fa-quick-links-toggler">',
      '    <i class="fa fa-link"></i>',
      '  </a>',
      '  <div class="fa-quick-links-inner"></div>',
      '</div>'
    ].join(''));
 
    var $toggler = $wrapper.find('.fa-quick-links-toggler');
    var $links  = $wrapper.find('.fa-quick-links-inner');
 
    $toggler.on('click', function(event) {
      event.preventDefault();
 
      $(this).toggleClass('active');
    });
 
    $wrapper.on('click', function(event) {
      event.stopPropagation();
    });
 
    $(document).on('click', function() {
      if ($toggler.is('.active')) $toggler.removeClass('active');
    });
 
    $.each(categories, function(index, category) {
      if (! category.links) return;
 
      var $category = $([
        '<div class="fa-quick-links-category">',
        '  ' + $('<label>', { 'text': category.name }).prop('outerHTML'),
        '  <ul></ul>',
        '</div>'
      ].join(''));
 
      $.each(category.links, function(index, link) {
        if (! link.href || ! link.html) return;
 
        $('<a>', {
          'class': 'fa-quick-links-link',
          'href': link.href,
          'html': link.html
        }).appendTo($category.find('ul'));
      });
 
      $category.appendTo($links);
    });
 
    $wrapper.appendTo('body');
    $('<style>', { 'text': css.join('') }).appendTo('head');
  });
})(jQuery, [
  '.fa-quick-links-wrapper, .fa-quick-links-wrapper * {',
  '  box-sizing: border-box;',
  '}',
  '',
  '.fa-quick-links-wrapper {',
  '  position: fixed;',
  '  left: 0;',
  '  top: 20%;',
  '}',
  '',
  '.fa-quick-links-wrapper > .fa-quick-links-toggler {',
  '  display: flex;',
  '  align-items: center;',
  '  justify-content: center;',
  '  font-size: 19px;',
  '  color: #fff;',
  '  background-color: #39c;',
  '  border-radius: 0 3px 3px 0;',
  '  width: 47px;',
  '  height: 47px;',
  '  transition: all linear 125ms;',
  '  cursor: pointer;',
  '  box-shadow: inset -1px -2px rgba(0, 0, 0, 0.06);',
  '}',
  '',
  '.fa-quick-links-wrapper > .fa-quick-links-toggler:hover {',
  '  background-color: #444;',
  '}',
  '',
  '.fa-quick-links-wrapper > .fa-quick-links-inner {',
  '  display: none;',
  '}',
  '',
  '.fa-quick-links-wrapper > .fa-quick-links-toggler.active + .fa-quick-links-inner {',
  '  display: block;',
  '}',
  '',
  '.fa-quick-links-inner {',
  '  background-color: #fff;',
  '  box-shadow: 3px 3px rgba(0, 0, 0, 0.48);',
  '  border: solid 1px #ddd;',
  '  border-left: none;',
  '  margin-top: 1px;',
  '  width: 310px;',
  '  max-height: 300px;',
  '  overflow-y: scroll;',
  '}',
  '',
  '.fa-quick-links-inner > div > label {',
  '  background-color: #39c;',
  '  display: block;',
  '  color: #fff;',
  '  padding: 13px 15px;',
  '  font-size: 13.5px;',
  '  font-weight: 600;',
  '}',
  '',
  '.fa-quick-links-inner > div a {',
  '  display: block;',
  '  padding: 12px 15px;',
  '  font-size: 11.6px;',
  '  color: #3195c7;',
  '}',
  '',
  '.fa-quick-links-inner > div a:hover {',
  '  background-color: #ddd;',
  '  color: #555;',
  '}',
  '',
  '.fa-quick-links-inner::-webkit-scrollbar {',
  '  width: 10px;',
  '}',
  '',
  '.fa-quick-links-inner::-webkit-scrollbar-track {',
  '  background: #dddddd;',
  '}',
  '',
  '.fa-quick-links-inner::-webkit-scrollbar-thumb {',
  '  background: #c3c5c5;',
  '  box-shadow: inset 0 0 3px 1px #00000026;',
  '}'
]);

  • Resultado:



Dúvidas gerais

  • Porque o ícone do menu não aparece?
    Para que o ícone apareça corretamente no seu fórum, você precisa de instalar o FontAwesome.

  • Como posso mudar o ícone do menu?
    No código JavaScript, localize esta parte:
    Código:
     var $wrapper = $([
          '<div class="fa-quick-links-wrapper">',
          '  <a class="fa-quick-links-toggler">',
          '    <i class="fa fa-link"></i>',
          '  </a>',
          '  <div class="fa-quick-links-inner"></div>',
          '</div>'
        ].join(''));
    E em
    Código:
    <i class="fa fa-link"></i>
    você pode alterar o fa-link para o código do ícone do FontAwesome que deseja, como por exemplo: fa-magic

  • Quantos links posso ter?
    Você pode ter quantos links desejar, o menu só tem aquela altura definida e possui um scrollbar, logo não prejudicará nenhum design do seu fórum, apenas aumentará o scroll há medida que vai adicionando links e categorias.


avatar

RafaelS.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3408
Pontos Ativos : 4375

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

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