Como fazer um dropdown no cabeçalho

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

Resolvido Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 em 10/08/17, 05:11 pm

Detalhes da questão


Endereço do fórum: http://portaldsh.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá, gostaria de Fazer um DropDown no botão "Perfil" do cabeçalho

Assim: https://prnt.sc/f5hhgm
com os menus :

Perfil
Avatar
Assinatura
Preferências
Mensagem Privada
Sub-Fórum (Fórum fechado para usuários, só irá aparecer, caso esse usuário seja daquele grupo)

tem como?
avatar

CesarWatsom2
Nível 6

Masculino
Inscrito dia : 01/08/2017
Mensagens : 71
Pontos Ativos : 113

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

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Luiz em 10/08/17, 05:33 pm

Só uma nota antes de começarmos que não há como fazer essa distinção de grupos:
Sub-Fórum (Fórum fechado para usuários, só irá aparecer, caso esse usuário seja daquele grupo)

Tudo bem?
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 em 10/08/17, 05:49 pm

Que pena haushuashuashu era o que eu mais queria, mas tudo bem... Desde que eu consiga aperfeiçoar meu fórum, está ótimo...
avatar

CesarWatsom2
Nível 6

Masculino
Inscrito dia : 01/08/2017
Mensagens : 71
Pontos Ativos : 113

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

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Luiz em 10/08/17, 05:51 pm

Precisarei de uma conta teste em seu fórum para poder continuar. o/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 em 10/08/17, 05:52 pm

Ok faça o cadastro lá que eu ativo... Pode ser?
avatar

CesarWatsom2
Nível 6

Masculino
Inscrito dia : 01/08/2017
Mensagens : 71
Pontos Ativos : 113

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

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Luiz em 10/08/17, 06:11 pm

Nesse caso é o senhor que deve providenciá-la.
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 em 10/08/17, 06:45 pm

Pronto... Enviei os dados por MP... podemos prosseguir?
avatar

CesarWatsom2
Nível 6

Masculino
Inscrito dia : 01/08/2017
Mensagens : 71
Pontos Ativos : 113

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

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Luiz em 11/08/17, 01:44 pm

Eu me dei a liberdade de criar algo diferente que combina mais com seu fórum e é mais fancy:
-> http://prntscr.com/g7b0w8

Crie um novo JavaScript investido em todas as páginas com o código:
Código:
(function ($, styles) {
  'use strict';

  var $submenu = {

    toggle: function ($parent) {
      if (this.template.css('display') === 'none') {
        this.template
          .show()
            .css({
              position: 'absolute',
              left: $parent.offset().left,
              top: $parent.offset().top
            })
        ;

        return;
      }

      this.template
        .removeAttr('style')
          .hide()
      ;
    },

    linklist: [
      {
        name: 'Perfil',
        icon: 'ion-clipboard',
        link: '/profile?mode=editprofile&page_profil=informations',
      },
      {
        name: 'Preferências',
        icon: 'ion-gear-a',
        link: '/profile?mode=editprofile&page_profil=preferences',
      },
      {
        name: 'Avatar',
        icon: 'ion-person',
        link: '/profile?mode=editprofile&page_profil=avatars',
      },
      {
        name: 'Assinatura',
        icon: 'ion-android-more-horizontal',
        link: '/profile?mode=editprofile&page_profil=signature',
      }
    ],

    template: $('<nav>', {
      'class': 'fa-submenu-profile',
      'style': 'display: none;'
    }),

    init: function () {
      var self = this;
      $.each(self.linklist, function () {
        $('<a>', {
          'href': this.link,
          'html': [
            $('<i>', { 'class': this.icon }).prop('outerHTML'),
            $('<span>', { 'text': this.name }).prop('outerHTML')
          ].join('\n')
        }).appendTo(self.template);
      });
    }

  };

  $(function () {

    $submenu.init();
   
    $('a[href="/profile?mode=editprofile"]')
      .parents('li')
        .on('click', function (event) {
          event.preventDefault();
          $submenu.toggle($(this));
        })
    ;

    // Criar os elementos:
    $('body').append($submenu.template);
    $('head').append(['<style>', styles, '</style>'].join('\n'));
  });
}(jQuery, [
  '.fa-submenu-profile {',
  '  min-width: 190px;',
  '  background-color: #fff;',
  '  padding: 5px 0;',
  '  display: block;',
  '  border-radius: 2px;',
  '  margin-top: 30px;',
  '  z-index: 999;',
  '}',
  '',
  '.fa-submenu-profile::before {',
  '  content: "";',
  '  border: solid 6px transparent;',
  '  border-bottom-color: white;',
  '  position: absolute;',
  '  top: -12px;',
  '  left: 8px;',
  '}',
  '',
  '.fa-submenu-profile > a {',
  '  display: block;',
  '  padding: 5px 10px;',
  '  font-size: 13px;',
  '}',
  '',
  '.fa-submenu-profile > a,',
  '.fa-submenu-profile > a * {',
  '  transition: all 120ms linear;',
  '}',
  '',
  '.fa-submenu-profile > a:hover {',
  '  background-color: #455280;',
  '  color: #fff;',
  '}',
].join('\n')));

Os links, títulos e links podem ser configurados no script, aqui:
Código:
linklist: [
  {
    name: 'Perfil',
    icon: 'ion-clipboard',
    link: '/profile?mode=editprofile&page_profil=informations',
  },
  {
    name: 'Preferências',
    icon: 'ion-gear-a',
    link: '/profile?mode=editprofile&page_profil=preferences',
  },
  {
    name: 'Avatar',
    icon: 'ion-person',
    link: '/profile?mode=editprofile&page_profil=avatars',
  },
  {
    name: 'Assinatura',
    icon: 'ion-android-more-horizontal',
    link: '/profile?mode=editprofile&page_profil=signature',
  }
],

^-^
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 em 12/08/17, 05:27 pm

Muiito Obrigado Luiz Muito feliz ...

Como eu consigo fazer um DropDown para o MP ... tipo mostrando as ultimas mensagens, parecido aqui com o Forumeiros... tem como?
avatar

CesarWatsom2
Nível 6

Masculino
Inscrito dia : 01/08/2017
Mensagens : 71
Pontos Ativos : 113

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

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Kyo Panda em 14/08/17, 08:46 am

avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Harleen em 19/08/17, 11:17 am

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1535
Pontos Ativos : 1992

Ver perfil do usuário https://soulfulbrmusic.forumeiros.com/ https://go.topicit.net/ZosT/ZanjVxxqwI

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum