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 JavascriptAs 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 Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript |
| 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. |
| Título - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum. |
| 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. |
| 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;', '}' ]);
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.
|