Como fazer um dropdown no cabeçalho

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?

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?

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

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

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

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

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

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',
  }
],

^-^

Muiito Obrigado Luiz  ...

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

Algo desse tipo?

https://ajuda.forumeiros.com/t93956-tutorial-menu-de-mensagens-privadas