Animated custom menu



  • 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:

    0_1513080409209_5dd8a354-fdbe-4c29-84c5-d1edda540d29-navigation-drawer-activity-template_2-2_2x.png

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

    This is my goal:

    0_1513080617535_5f6280b8-8951-4fa8-9b8e-ff5cc0a91d4f-imagen.png

    Thank you very much!



  • Are you using QtWidgets or QtQuick/QML?



  • @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();
    }
    


  • @VRonin I am using QtWidgets



  • @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);
    

    0_1513082486664_ae1fd8d9-0d2d-4be6-acd7-0c27903d2cab-imagen.png

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



  • @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
    
    

  • Qt Champions 2016

    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

    alt text



  • @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
    
    

    alt text


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.