Criar menu suspenso na barra de navegação

2 participantes

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

Tópico resolvido Criar menu suspenso na barra de navegação

Mensagem por LucianoMicle 13.03.22 5:00

Detalhes da questão


Endereço do fórum: https://divtes.foroactivo.com/
Versão do fórum: AwesomeBB

Descrição


Olá
Eu estava procurando no fórum um tutorial ou um tópico semelhante ao que estou procurando, mas não encontrei nenhum.
Quero adicionar um menu suspenso na barra de navegação e os elementos que aparecem nesse menu vão para uma página criada por HTML.
Deixo um exemplo:
Spoiler:


Aguardo resposta, abraço
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar menu suspenso na barra de navegação

Mensagem por LucianoMicle 15.03.22 14:25

Up
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Criar menu suspenso na barra de navegação

Mensagem por tikky 16.03.22 15:19

Olá @LucianoMicle,

Veja se este tutorial ajuda: "Criar um menu lateral com links rápidos". Qualquer dúvida disponha!


Atenciosamente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar menu suspenso na barra de navegação

Mensagem por LucianoMicle 16.03.22 17:59

Olá @Pedxz
Eu o instalei, mas, ao instalá-lo, ele permanece fixo na barra do navegador.
Quer dizer, isso quer dizer que está ao lado das últimas edições.

Menu - Criar menu suspenso na barra de navegação Menu110

Edit: Também está atrás do menu.
Menu - Criar menu suspenso na barra de navegação Menu210
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Criar menu suspenso na barra de navegação

Mensagem por tikky 17.03.22 15:08

Altere o código para
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 = $([
            '<li class="fa-quick-links-wrapper">',
            '  <a class="fa-quick-links-toggler">',
            '    <i class="material-icons">menu</i>',
            '  </a>',
            '  <div class="fa-quick-links-inner"></div>',
            '</li>'
        ].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('#header-navigation');
        $('<style>', {
            'text': css.join('')
        }).appendTo('head');
    });
})(jQuery, [
    '.fa-quick-links-wrapper, .fa-quick-links-wrapper * {',
    '  box-sizing: border-box;',
    '}',
    '',
    '.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: 0 2px 3px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.1);',
    '  border-radius: 3px;',
    '  margin-top: 1px;',
    '  padding: .25rem;',
    '  width: 310px;',
    '  max-height: 300px;',
    '  overflow-y: scroll;',
    '  position: fixed;',
    '}',
    '',
    '.fa-quick-links-category ul {',
    '  margin: 0;',
    '  margin-top: .25rem;',
    '  margin-bottom: .25rem;',
    '}',
    '',
    '.fa-quick-links-inner > div > label {',
    '  background-color: #263238;',
    '  display: block;',
    '  color: #fff;',
    '  border-radius: 3px;',
    '  font-weight: 400;',
    '  margin-bottom: 0;',
    '  height: 45px;',
    '  line-height: 45px;',
    '  text-indent: 12px;',
    '}',
    '',
    '.fa-quick-links-inner > div a {',
    '  display: block !important;',
    '  font-size: 11.6px;',
    '  color: #263238 !important;',
    '  height: auto !important;',
    '  line-height: 4;',
    '}',
    '',
    '.fa-quick-links-inner > div a:hover {',
    '  color: #1E88E5 !important;',
    '  border-radius: 3px;',
    '  background-color: #f0f0f0 !important;',
    '}',
    '',
    '.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;',
    '}'
]);
Demonstração

Menu - Criar menu suspenso na barra de navegação Image28
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar menu suspenso na barra de navegação

Mensagem por LucianoMicle 17.03.22 15:18

Olá amigo! @Pedxz
A parte quando você clica no menu e move o mouse para baixo. Eles também se movem
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Criar menu suspenso na barra de navegação

Mensagem por tikky 17.03.22 15:21

LucianoMicle escreveu:Olá amigo! @Pedxz
A parte quando você clica no menu e move o mouse para baixo. Eles também se movem
Como fiz a edição na versão #AwesomeBB sem edições o sub-menu ficou fixo. Altere ' position: fixed;', para ' position: absolute;',
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar menu suspenso na barra de navegação

Mensagem por LucianoMicle 17.03.22 15:25

Perfeito, é ótimo. Muito obrigado @Pedxz
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Criar menu suspenso na barra de navegação

Mensagem por tikky 17.03.22 15:26

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos