Implementation of a slide menu in QML

In my first note I'd like to show you how to implement a slide menu by using QML. These sorts of menu we often can see in many Android apps and sometimes on web sites. We can search for hundreds of examples how to implement it.

 Here we are going to talk about an implementation of a menu when the layer of it is located above the surface of the main screen. It's a very common case and it can be found in many and many Android applications. You can see an example of it in this video

 First of all, you need to have a possibility to pull out your menu from the left side whatever your app has on its surface. The surface can have buttons or any flickable items such as ListView or GridView. Let's have a look on source code.

	ApplicationWindow {
	id: app
	width: 360
	height: 640
	//some actions
	property int durationOfMenuAnimation: 500
	property int menuWidth: app.width*0.85
	property int widthOfSeizure: 15
	property bool menuIsShown: Math.abs(menuView.x) < (menuWidth*0.5) ? true : false
	property real menuProgressOpening
	Rectangle {
	id: normalView
	x: 0
	y: 0
	width: parent.width
	height: parent.height
	color: "white"
	/*****( Menu bar )*****/
	Rectangle {
	id: menuBar
	z: 5
	anchors.top: parent.top
	anchors.topMargin: 0
	width: parent.width
	height: 50
	color: palette.darkPrimary
	Rectangle {
	id: menuButton
	anchors.left: parent.left
	anchors.verticalCenter: parent.verticalCenter
	width: 1.2*height
	height: parent.height
	scale: maMenuBar.pressed ? 1.2 : 1
	color: "transparent"
	MenuIconLive {
	id: menuBackIcon
	scale: (parent.height/height)*0.65
	anchors.centerIn: parent
	value: menuProgressOpening
	}
	MouseArea {
	id: maMenuBar
	anchors.fill: parent
	onClicked: onMenu()
	}
	clip: true
	}
	Label {
	id: titleText
	anchors.left: menuButton.right
	anchors.verticalCenter: parent.verticalCenter
	text: appTitle
	font.pixelSize: 0.35*parent.height
	color: palette.text
	}
	} //menuBar
	Image {
	id: imgShadow
	anchors.top: menuBar.bottom
	anchors.left: parent.left
	anchors.right: parent.right
	height: 6
	z: 4
	source: "qrc:/images/shadow_title.png"
	}
	/*****( Menu )*****/
	Rectangle {
	id: menuView
	anchors.top: menuBar.bottom
	height: parent.height - menuBar.height
	width: menuWidth
	z: 3
	MainMenu {
	id: mainMenu
	anchors.fill: parent
	onMenuItemClicked: {
	onMenu()
	loader.source = page
	}
	}
	x: -menuWidth
	Behavior on x { NumberAnimation { duration: app.durationOfMenuAnimation; easing.type: Easing.OutQuad } }
	onXChanged: {
	menuProgressOpening = (1-Math.abs(menuView.x/menuWidth))
	}
	MouseArea {
	anchors.right: parent.right
	anchors.rightMargin: app.menuIsShown ? (menuWidth - app.width) : -widthOfSeizure
	anchors.top: parent.top
	width: app.menuIsShown ? (app.width - menuWidth) : widthOfSeizure
	height: parent.height
	drag {
	target: menuView
	axis: Drag.XAxis
	minimumX: -menuView.width
	maximumX: 0
	}
	onClicked: {
	if(app.menuIsShown) app.onMenu()
	}
	onReleased: {
	if( Math.abs(menuView.x) > 0.5*menuWidth ) {
	menuView.x = -menuWidth //close the menu
	} else {
	menuView.x = 0 //fully opened
	}
	}
	}
	} //menuView
	Image {
	id: imgShadowMenu
	anchors.top: menuBar.bottom
	anchors.bottom: menuView.bottom
	anchors.left: menuView.right
	width: 10
	z: 5
	source: "qrc:/images/shadow_long.png"
	visible: menuView.x != -menuWidth
	}
	Rectangle {
	id: curtainMenu
	z: 1
	anchors.fill: parent
	color: "black"
	opacity: app.menuProgressOpening*0.5
	}
	/*****( Main loader )*****/
	Loader {
	id: loader
	anchors.top: menuBar.bottom;
	anchors.left: parent.left
	anchors.right: parent.right
	anchors.bottom: parent.bottom
	//asynchronous: true
	onStatusChanged: {
	if( status == Loader.Loading ) {
	curtainLoading.visible = true
	titleText.text = appTitle
	} else if( status == Loader.Ready ) {
	curtainLoading.visible = false
	} else if( status == Loader.Error ) {
	curtainLoading.visible = false
	}
	}
	onLoaded: {
	titleText.text = item.title
	}
	Rectangle {
	id: curtainLoading
	anchors.fill: parent
	visible: false
	color: "white"
	opacity: 0.8
	BusyIndicator {
	anchors.centerIn: parent
	}
	}
	} //loader
	} //normalView
	} //app

view raw SlideMenuExample.qml hosted with ❤ by GitHub

Here is an example of a QML file with a slide menu.

 First of all we need to consider properties of the menu which somehow describe its state and help to interact with other elements of your app.

• durationOfMenuAnimation - it's a quite understandable property which describes how fast the menu opens by pressing on a menu button.
• menuWidth - describes the width of the menu.
• widthOfSeizure - this is a very interesting property. It describes the width of area from the left side which allows you to pull out the menu.
• menuIsShown - it's a logical variable shows the state of the menu.
• menuProgressOpening - shows how much the menu is being open. It changes between 0 (the menu is fully closed) and 1 (the menu is fully open)

 Let's start consideration how it works. Here we have three main fragments:

• a top bar
• the menu
• a loader

Those three components form the main screen of our app.

The top bar contains the menu button. We will consider it a little later. As we can see, initially the menu is shifted to the left for a whole width.

 x: -menuWidth

The area at the left side of the screen is a mouse area which is attached to the right side of the menu so we can pull out the menu by using the MouseArea. Each time when we release the MouseArea this fragment decides whether the menu will be closed again or fully open.

	onReleased: {
	if( Math.abs(menuView.x) > 0.5*menuWidth ) {
	menuView.x = -menuWidth //close the menu
	} else {
	menuView.x = 0 //fully opened
	}
	}

view raw MouseAreaRelease.qml hosted with ❤ by GitHub

If the menu was released on less than a half way it would return to the previous state. It will be closed. If it was pulled out more than a half way, it would be fully open. This behaviour exactly repeats an action what all similar menus do.

 Whenever the menu is open the MouseArea expands until the right side of the screen.

width: app.menuIsShown ? (app.width - menuWidth) : widthOfSeizure

so a user can tap on any area outside of the menu and it will be closed. You can see that on the picture below

or it's also possible to tap on the menu button. If a user taps on it a function onMenu() is being called. It checks whether the menu is open or not and just changes its position by x.

 The property menuProgressOpening just helps to change the menu button simultaneously with its moving. It changes from 0 to 1. 

 The main idea of the button was taken from this project. I just changed that code to make the button follow changing of menu position. 

 Here is a short video of this menu showing how it works.

The source code of the project can be found on Githib. Any questions and notes are always welcome.