Como fazer um dropdown no cabeçalho

4 participantes

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

Tópico resolvido Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 10.08.17 21:11

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?
CesarWatsom2

CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Luiz 10.08.17 21:33

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?
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 10.08.17 21:49

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

CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Luiz 10.08.17 21:51

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

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 10.08.17 21:52

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

CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Luiz 10.08.17 22:11

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

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 10.08.17 22:45

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

CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Luiz 11.08.17 17:44

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

^-^
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por CesarWatsom2 12.08.17 21:27

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?
CesarWatsom2

CesarWatsom2
**

Membro desde : 01/08/2017
Mensagens : 94
Pontos : 156

http://febhabbo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Kyo Panda 14.08.17 12:46

Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como fazer um dropdown no cabeçalho

Mensagem por Harleen 19.08.17 15:17

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.
Harleen

Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

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