[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 Empty [TUTORIAL] Criar um menu lateral com links rápidos

Mensagem por RafaelS. em 09.07.18 18:38

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

[TUTORIAL] Criar um menu lateral com links rápidos Javaac10
[TUTORIAL] Criar um menu lateral com links rápidos 110111Seta 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.
[TUTORIAL] Criar um menu lateral com links rápidos 110210Seta Título - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
[TUTORIAL] Criar um menu lateral com links rápidos 110310Seta 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.
[TUTORIAL] Criar um menu lateral com links rápidos 110410Seta 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:
    [TUTORIAL] Criar um menu lateral com links rápidos XtehMf9



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.


RafaelS.

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4683
Pontos Ativos : 5736

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