How to make a menu with a submenu in qml? - qt

Question

I'm trying to do a menu that might have submenus for some of its options.
The behavior i want it to have is the same we see on most of websites.
When we hover an option that has a submenu, that submenu it will happear, if the mouse arrow goes anywhere else that is not the submenu the submenu will close.
I'm going to illustrate with images.
When we enter the submenu we have this:
Now we hover the Language option its submenu will happear
Now what is not done is the behavior i want. If we are hovering on the Languageoption the submenu is visible. If i go directly from language to the language's submenu it will remain there as intented.
The code of this example is provided below:
main.qml
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
main.qml
import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3
ApplicationWindow {
visible: true
width: 640
height: 500
title: qsTr("Tabbars")
Button{
id: button
text: "Menu"
onClicked: contextMenu.open()
anchors.top:parent.top
anchors.left:parent.left
height: 20
width: 100
}
Menu {
id: contextMenu
y: button.height
padding: 1
background: Rectangle {
implicitWidth: 200
border.color: "#fff"
color: "#000"
}
Button {
id: languageMenuItem
text: qsTr("Language")
width:parent.width
height: 35
background: Item {
Rectangle {
anchors.fill: parent
color: "#555"
opacity: mouseArea1.pressed ? 1 : mouseArea1.containsMouse ? 0.6 : 0.0
MouseArea {
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered: function() {
submenuLanguage.open()
}
onExited: function() {
}
}
}
}
contentItem: Text {
text: languageMenuItem.text
color: "#fff"
font.pointSize: 12
font.bold: true
}
Rectangle {
z: 1
color: "#000"
opacity: 0.5
anchors.fill: parent
visible: !parent.enabled
}
Component.onCompleted: {
mouseArea1.clicked.connect(clicked)
}
}
CMenuItem{
text: qsTr("Exit")
width: parent.width
onClicked: close()
}
}
Menu {
id:submenuLanguage
x: contextMenu.width
background: Rectangle {
implicitWidth: 200
border.color: "#fff"
color: "#000"
}
Connections {
target: mouseArea1
onExited: {
console.log("mouseArea leaving")
}
}
CMenuItem{
id:btlingen
width: parent.width
text: qsTr("English")
onClicked: {
contextMenu.close()
console.log("English")
}
}
CMenuItem{
id:btlingpt
width: parent.width
text: qsTr("Português")
onClicked: {
contextMenu.close()
console.log("Português")
}
}
CMenuItem{
id:btlinges
width: parent.width
text: qsTr("Español")
onClicked: {
contextMenu.close()
console.log("Español")
}
}
CMenuItem{
id:btlingit
width: parent.width
text: qsTr("Italiano")
onClicked: {
contextMenu.close()
console.log("Italiano")
}
}
CMenuItem{
id:btlingde
width: parent.width
text: qsTr("Deutsch")
onClicked: {
contextMenu.close()
console.log("Deutsch")
}
}
}
}
CMenuItem.qml
import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
MenuItem {
id: mainMenuItem
background: Item {
Rectangle {
anchors.fill: parent
color: "#555"
opacity: mouseArea.pressed ? 1 : mouseArea.containsMouse ? 0.6 : 0.0
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
}
}
}
contentItem: Text {
text: mainMenuItem.text
color: "#fff"
font.pointSize: 12
font.bold: true
}
Rectangle {
z: 1
color: "#000"
opacity: 0.5
anchors.fill: parent
visible: !parent.enabled
}
Component.onCompleted: {
mouseArea.clicked.connect(clicked)
}
}
How can i do this?

Answer 1

Use the cascade property to create a nested menu:
ApplicationWindow {
id: window
width: 320
height: 260
visible: true
menuBar: MenuBar {
Menu {
title: qsTr("&Foo")
Menu {
cascade: true // Nested menu
title: qsTr("&Bar")
Action { text: qsTr("A1") }
Action { text: qsTr("A2") }
Action { text: qsTr("A3") }
}
}
}
}