Animated custom menu

[ivanicy]

Hello!

I am trying to add a custom menu in my application. The main idea is to do something like the navegation panel in android:

I want to open it when I push a button. ¿Are there any way to do it?

This is my goal:

Thank you very much!

[VRonin]

Are you using QtWidgets or QtQuick/QML?

[Taz742]

@ivanicy
HI!
http://doc.qt.io/qt-5/qpropertyanimation.html is your friend now :)

https://imgur.com/Xq9GYbJ
https://imgur.com/uLyC8dm

static int ShowOrHide = 0;

if (++ShowOrHide % 2) {
    QPropertyAnimation *animation = new QPropertyAnimation(wdgSMS, "maximumWidth"); //wdgSMS is your widget
    animation->setDuration(500);
    animation->setStartValue(256);
    animation->setEndValue(0);
    animation->start();
} else {
    QPropertyAnimation *animation = new QPropertyAnimation(wdgSMS, "maximumWidth");
    animation->setDuration(500);
    animation->setStartValue(0);
    animation->setEndValue(256);
    animation->start();
}

[ivanicy]

@VRonin I am using QtWidgets

[ivanicy]

@Taz742 Thank you very much! But, I don't know how to do it because I have a QMenu, and I use

ui->button->setMenu(menu);

So, I want to know if I can convert my menu to your solution

[Taz742]

@ivanicy
I am hurry and review this code. make project, show what happends, maybe you will make it better else I will help you tomorrow.

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    menu = new QMenu(ui->pushButton);
    QAction *act = menu->addAction("1");
    QAction *act2 = menu->addAction("2");
    QAction *act3 = menu->addAction("3");

    ui->pushButton->setMenu(menu);

    connect(menu, &QMenu::aboutToShow, [=](){
        QPropertyAnimation* sizeAnimation = new QPropertyAnimation(this->menu, "size");
        sizeAnimation->setDuration(1000);
        sizeAnimation->setStartValue(QSize(this->menu->width(), this->menu->height() + 300));
        sizeAnimation->setEndValue(QSize(this->menu->width() + 150, this->menu->height() + 300));
        //sizeAnimation->setEasingCurve(QEasingCurve::OutBounce);
        //sizeAnimation->setEasingCurve(QEasingCurve::InOutBack);
        sizeAnimation->start(QAbstractAnimation::DeleteWhenStopped);
        menu->show();
    });

    connect(menu, &QMenu::aboutToHide, [=](){
        this->menu->setGeometry(this->menu->x(), this->menu->y(), this->menu->width() - 150, this->menu->height() - 300);
    });
}

MainWindow::~MainWindow()
{
    delete ui;
}

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include "QSqlDatabase"
#include "QSqlError"
#include "QDebug"
#include "QLabel"
#include "QPushButton"
#include "QPropertyAnimation"
#include "QMenu"
#include <QRect>

class QRect;

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

    QMenu *menu = Q_NULLPTR;

private slots:

private:
    Ui::MainWindow *ui;
    QSqlDatabase db;
    int ShowOrHide = 0;
};

#endif // MAINWINDOW_H

[mrjj]

Hi
Just as a note, chrisaverage from this forum made something like that
( with designer plugin and animation. We miss you Krzysztof Kawa :)

https://github.com/chrisaverage/burger-menu

[Taz742]

@ivanicy
I am back.
This is a full code, I did this for the first time, I do not know whether this is the right approach but its work fine for me.

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    menu = new QMenu();
    QAction *act = menu->addAction("12345");
    QAction *act2 = menu->addAction("123456");
    QAction *act3 = menu->addAction("1234567");
    QAction *act4 = menu->addAction("12345678");
    QAction *act5 = menu->addAction("123456789");
    ui->pushButton->setMenu(menu);

    menu1 = new QMenu();
    QAction *a1 = menu1->addAction("54321");
    QAction *a2 = menu1->addAction("5432");
    QAction *a3 = menu1->addAction("543");
    QAction *a4 = menu1->addAction("54");
    QAction *a5 = menu1->addAction("5");

    act->setMenu(menu1);

    this->menu->installEventFilter(this);
    this->menu1->installEventFilter(this);
}

bool MainWindow::eventFilter(QObject *obj, QEvent *e) {
    if ((obj == this->menu || obj == this->menu1) && e->type() == QEvent::Show) {
        QMenu *mmn = qobject_cast<QMenu*>(obj);
        createAnimation(mmn);
    }

    return QMainWindow::eventFilter(obj, e);
}

void MainWindow::createAnimation(QMenu *m_menu)
{
    QPropertyAnimation* sizeAnimation = new QPropertyAnimation(m_menu, "size");
    sizeAnimation->setDuration(1000);
    sizeAnimation->setStartValue(QSize(0, m_menu->height()));
    sizeAnimation->setEndValue(QSize(m_menu->width(), m_menu->height()));
    //sizeAnimation->setEasingCurve(QEasingCurve::OutBounce);
    //sizeAnimation->setEasingCurve(QEasingCurve::InOutBack);
    sizeAnimation->start(QAbstractAnimation::DeleteWhenStopped);
}

MainWindow::~MainWindow()
{
    delete ui;
}

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include "QSqlDatabase"
#include "QSqlError"
#include "QDebug"
#include "QLabel"
#include "QPushButton"
#include "QPropertyAnimation"
#include "QMenu"
#include <QRect>

class QRect;

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

    QMenu *menu = Q_NULLPTR;
    QMenu *menu1 = Q_NULLPTR;

protected:
    bool eventFilter(QObject *obj, QEvent *e);

private slots:

private:
    Ui::MainWindow *ui;
    QSqlDatabase db;
    void createAnimation(QMenu *m_menu);
};

#endif // MAINWINDOW_H

[Janilson Duarte]

@mrjj @Taz742 Can you help me create a tabview vertical menu with icons on QML, just like this image?